diff --git a/blazor-toc.html b/blazor-toc.html
index cc2eb10375..0c48e9491c 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -4994,7 +4994,11 @@
 			<li>2025 Volume 3 - 31.*
 				<ul>
 					<li>Weekly Nuget Release
-						<ul><li><a href="/blazor/release-notes/31.2.10">31.2.10</a></li><li><a href="/blazor/release-notes/31.2.5">31.2.5</a></li><li><a href="/blazor/release-notes/31.2.4">31.2.4</a></li>
+						<ul><li><a href="/blazor/release-notes/31.2.16">31.2.16</a></li>
+							<li><a href="/blazor/release-notes/31.2.15">31.2.15</a></li>
+						    <li><a href="/blazor/release-notes/31.2.10">31.2.10</a></li>
+							<li><a href="/blazor/release-notes/31.2.5">31.2.5</a></li>
+							<li><a href="/blazor/release-notes/31.2.4">31.2.4</a></li>
 							<li><a href="/blazor/release-notes/31.2.3">31.2.3</a></li>
 							<li><a href="/blazor/release-notes/31.1.23">31.1.23</a></li>
 							<li><a href="/blazor/release-notes/31.1.22">31.1.22</a></li>
diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md
index e0fc19c383..82e7f52760 100644
--- a/blazor/3D-chart/getting-started-with-web-app.md
+++ b/blazor/3D-chart/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor 3D Chart Component in Web App
 
-This section briefly explains about how to include `Blazor 3D Chart` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 To get started quickly with Blazor 3D Chart component, check on the following video:
 
@@ -26,15 +26,17 @@ To get started quickly with Blazor 3D Chart component, check on the following vi
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart NuGet in the Blazor Web App
 
-To add **Blazor 3D Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D).
+To add the **Blazor 3D Chart** component in the app, open NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -46,7 +48,7 @@ Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -58,9 +60,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -74,11 +76,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart3D NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -95,20 +95,68 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart3D NuGet in the App
+
+Here's an example of how to add the **Blazor 3D Chart** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Chart3D --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -119,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -155,27 +205,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add script resources
 
 The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -191,16 +220,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +249,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor 3D Chart component in the default web browser.
 
 ## Populate Blazor 3D Chart with data
 
diff --git a/blazor/3D-chart/images/blazor-create-web-app.png b/blazor/3D-chart/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/3D-chart/images/blazor-create-web-app.png differ
diff --git a/blazor/Release-Notes/31.2.15.md b/blazor/Release-Notes/31.2.15.md
new file mode 100644
index 0000000000..5493769204
--- /dev/null
+++ b/blazor/Release-Notes/31.2.15.md
@@ -0,0 +1,94 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v31.2.15 Release Notes
+
+{% include release-info.html date="November 25, 2025"  version="v31.2.15" passed="74487" failed="0" %} 
+
+{% directory path: _includes/release-notes/v31.2.15 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 198 | 198 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 297 | 297 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 4175 | 4175 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 196 | 196 | 0 | All Passed |
+| CircularGauge | 928 | 928 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 248 | 248 | 0 | All Passed |
+| DashboardLayout | 253 | 253 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 5951 | 5951 | 0 | All Passed |
+| DatePicker | 576 | 576 | 0 | All Passed |
+| DateRangePicker | 366 | 366 | 0 | All Passed |
+| DateTimePicker | 474 | 474 | 0 | All Passed |
+| Diagram | 15316 | 15316 | 0 | All Passed |
+| Dialog | 481 | 481 | 0 | All Passed |
+| DropdownList | 584 | 584 | 0 | All Passed |
+| Dropdowntree | 164 | 164 | 0 | All Passed |
+| FileManager | 3108 | 3108 | 0 | All Passed |
+| FileUpload | 330 | 330 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4800 | 4800 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 764 | 764 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 380 | 380 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 441 | 441 | 0 | All Passed |
+| Maps | 1570 | 1570 | 0 | All Passed |
+| Mention | 152 | 152 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 386 | 386 | 0 | All Passed |
+| NumericTextbox | 442 | 442 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1378 | 1378 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 451 | 451 | 0 | All Passed |
+| RichTextEditor | 2768 | 2768 | 0 | All Passed |
+| Scheduler | 5623 | 5623 | 0 | All Passed |
+| Sidebar | 144 | 144 | 0 | All Passed |
+| Slider | 271 | 271 | 0 | All Passed |
+| SmithChart | 259 | 259 | 0 | All Passed |
+| SparklineChart | 150 | 150 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 335 | 335 | 0 | All Passed |
+| Tabs | 936 | 936 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 653 | 653 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 419 | 419 | 0 | All Passed |
+| Toast | 233 | 233 | 0 | All Passed |
+| Toolbar | 230 | 230 | 0 | All Passed |
+| TreeGrid | 4943 | 4943 | 0 | All Passed |
+| TreeMap | 704 | 704 | 0 | All Passed |
+| TreeView | 1361 | 1361 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/31.2.16.md b/blazor/Release-Notes/31.2.16.md
new file mode 100644
index 0000000000..04592f225c
--- /dev/null
+++ b/blazor/Release-Notes/31.2.16.md
@@ -0,0 +1,94 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v31.2.16 Release Notes
+
+{% include release-info.html date="December 02, 2025"  version="v31.2.16" passed="74506" failed="0" %} 
+
+{% directory path: _includes/release-notes/v31.2.16 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 198 | 198 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 297 | 297 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 4175 | 4175 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 196 | 196 | 0 | All Passed |
+| CircularGauge | 928 | 928 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 248 | 248 | 0 | All Passed |
+| DashboardLayout | 253 | 253 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 5953 | 5953 | 0 | All Passed |
+| DatePicker | 576 | 576 | 0 | All Passed |
+| DateRangePicker | 366 | 366 | 0 | All Passed |
+| DateTimePicker | 474 | 474 | 0 | All Passed |
+| Diagram | 15323 | 15323 | 0 | All Passed |
+| Dialog | 481 | 481 | 0 | All Passed |
+| DropdownList | 584 | 584 | 0 | All Passed |
+| Dropdowntree | 164 | 164 | 0 | All Passed |
+| FileManager | 3108 | 3108 | 0 | All Passed |
+| FileUpload | 330 | 330 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4800 | 4800 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 764 | 764 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 380 | 380 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 441 | 441 | 0 | All Passed |
+| Maps | 1570 | 1570 | 0 | All Passed |
+| Mention | 152 | 152 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 386 | 386 | 0 | All Passed |
+| NumericTextbox | 442 | 442 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1378 | 1378 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 451 | 451 | 0 | All Passed |
+| RichTextEditor | 2768 | 2768 | 0 | All Passed |
+| Scheduler | 5623 | 5623 | 0 | All Passed |
+| Sidebar | 144 | 144 | 0 | All Passed |
+| Slider | 271 | 271 | 0 | All Passed |
+| SmithChart | 259 | 259 | 0 | All Passed |
+| SparklineChart | 150 | 150 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 335 | 335 | 0 | All Passed |
+| Tabs | 936 | 936 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 653 | 653 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 419 | 419 | 0 | All Passed |
+| Toast | 233 | 233 | 0 | All Passed |
+| Toolbar | 230 | 230 | 0 | All Passed |
+| TreeGrid | 4953 | 4953 | 0 | All Passed |
+| TreeMap | 704 | 704 | 0 | All Passed |
+| TreeView | 1361 | 1361 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md
index 55a2b35437..9a0c5b81f1 100644
--- a/blazor/accordion/getting-started-with-web-app.md
+++ b/blazor/accordion/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Accordion in Blazor Web App
 
-This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Accordion](https://ww
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-To add **Blazor Accordion** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Accordion** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Accordion** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Navigations --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accordion component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accordion component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accordion component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -227,7 +256,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accordion component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accordion component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBfZMDKrVnxBgsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component](images/blazor-accordion-component.png)" %}
 
diff --git a/blazor/accordion/images/blazor-create-web-app.png b/blazor/accordion/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/accordion/images/blazor-create-web-app.png differ
diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md
index c9e3896983..e5ddb0212e 100644
--- a/blazor/accumulation-chart/getting-started-with-web-app.md
+++ b/blazor/accumulation-chart/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Accumulation Chart in Blazor Web App
 
-This section briefly explains about how to include `Blazor Accumulation Chart` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include `Blazor Accumulation Chart` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include `Blazor Accumulation Chart` c
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts and Themes NuGet in the App
 
-To add **Blazor Accumulation Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Accumulation Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Accumulation Chart** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Charts --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -246,7 +275,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in your default web browser.
+Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Accumulation Chart component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.png)" %}
 
diff --git a/blazor/accumulation-chart/images/blazor-create-web-app.png b/blazor/accumulation-chart/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/accumulation-chart/images/blazor-create-web-app.png differ
diff --git a/blazor/ai-assistview/speech/speech-to-text.md b/blazor/ai-assistview/speech/speech-to-text.md
index fdc261a6bd..84dfa69270 100644
--- a/blazor/ai-assistview/speech/speech-to-text.md
+++ b/blazor/ai-assistview/speech/speech-to-text.md
@@ -18,12 +18,23 @@ Before integrating `Speech-to-Text`, ensure the following:
 1. The Syncfusion AI AssistView component is properly set up in your Blazor application.
     - [Blazor Getting Started Guide](../getting-started)
 
-2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai).
+2. The AI AssistView component is integrated with Azure OpenAI
     - [Integration of Azure OpenAI With Blazor AI AssistView component](../ai-integrations/openai-integration.md)
 
 ## Configure Speech-to-Text
 
-To enable Speech-to-Text functionality, modify the `Home.razor` file to incorporate the Web Speech API. The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
+To enable Speech-to-Text functionality in the Blazor AI AssistView component, update the `Home.razor` file to incorporate the Web Speech API.
+
+The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens to audio input from the device’s microphone, transcribes spoken words into text, and updates the AI AssistView’s editable footer using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to display the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component.
+
+### Configuration Options
+
+* **[`Language`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_Language)**: Specifies the language for speech recognition. For example:
+
+    * `en-US` for American English
+    * `fr-FR` for French
+
+* **[`AllowInterimResults`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSpeechToText.html#Syncfusion_Blazor_Inputs_SfSpeechToText_AllowInterimResults)**: Set to `true` to receive real-time (interim) recognition results, or `false` to receive only final results.
 
 The `speechtotext.js` file handles operations related to the content of the editable footer, such as checking for meaningful input, clearing existing text, and updating the content with the transcribed value. Meanwhile, the `speechtotext.css` file styles the AI AssistView layout and ensures the component remains responsive across different screen sizes and devices.
 
@@ -268,6 +279,14 @@ function updateContentEditableDiv(element, value) {
 
 ![Integrating Speech-to-Text with AI AssistView](../images/assist-stt.png)
 
+## Error Handling
+
+The `SpeechToText` component provides events to handle errors that may occur during speech recognition. For more information, refer to the [Error Handling](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#error-handling) section in the documentation.
+
+## Browser Compatibility
+
+The `SpeechToText` component relies on the [Speech Recognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition), which has limited browser support. Refer to the [Browser Compatibility](https://blazor.syncfusion.com/documentation/speech-to-text/speech-recognition#browser-support) section for detailed information.
+
 ## See Also
 
 * [Text-to-Speech](./text-to-speech.md)
\ No newline at end of file
diff --git a/blazor/appbar/getting-started-with-web-app.md b/blazor/appbar/getting-started-with-web-app.md
index a4a12073d8..2390147e33 100644
--- a/blazor/appbar/getting-started-with-web-app.md
+++ b/blazor/appbar/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor AppBar Component in Blazor Web App
 
-This section briefly explains about how to include `Blazor AppBar` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include `Blazor AppBar` component in
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-To add **Blazor AppBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor AppBar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor AppBar** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Navigations --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AppBar component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AppBar component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AppBar component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -237,7 +266,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AppBar component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AppBar component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBfNCLSLdCUQyHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar Component](images/getting_started.png)" %}
 
diff --git a/blazor/appbar/images/blazor-create-web-app.png b/blazor/appbar/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/appbar/images/blazor-create-web-app.png differ
diff --git a/blazor/autocomplete/accessibility.md b/blazor/autocomplete/accessibility.md
index d2683c53a9..f8fb0ec0f7 100644
--- a/blazor/autocomplete/accessibility.md
+++ b/blazor/autocomplete/accessibility.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor AutoComplete Component
 
-The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications, and applies the `WAI-ARIA` roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+The [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component is designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) guidance in mind and applies semantic roles, states, and properties along with comprehensive keyboard support. It provides strong screen reader and keyboard navigation support to assist users of assistive technologies (AT) and those who rely on the keyboard.
 
-The Blazor AutoComplete component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor AutoComplete component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA](https://www.w3.org/TR/wai-aria/) specifications commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor AutoComplete component is outlined below.
 
@@ -41,44 +41,44 @@ The accessibility compliance for the Blazor AutoComplete component is outlined b
 
 ## WAI-ARIA attributes
 
-The Blazor AutoComplete component uses the `combobox` role and each list item has an `option` role. The following `ARIA Attributes` denotes the AutoComplete state:
+The AutoComplete uses the `combobox` role for its input and the `listbox` role for its popup list; each list item has an `option` role. The following ARIA attributes convey state and relationships:
 
 | **Property** | **Functionalities** |
 | --- | --- |
-| `aria-haspopup`| Indicates whether the AutoComplete input element has a suggestion list or not. |
-| `aria-expanded` | Indicates whether the suggestion list has expanded or not. |
-| `aria-selected` | Indicates the selected option from the list. |
-| `aria-readonly` | Indicates the readonly state of the AutoComplete element. |
-| `aria-disabled` | Indicates whether the AutoComplete component is in disabled state or not.|
-| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
-| `aria-owns` | This attribute contains the ID of the suggestion list to indicate popup as a child element. |
-| `aria-autocomplete` | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
+| `aria-haspopup` | Indicates that the input (combobox) has an associated popup list. |
+| `aria-expanded` | Reflects whether the popup list is open (`true`) or closed (`false`). |
+| `aria-selected` | Indicates the selected option within the listbox. |
+| `aria-readonly` | Indicates the read-only state of the input. |
+| `aria-disabled` | Indicates whether the component is disabled. |
+| `aria-activedescendant` | Identifies the ID of the active (focused) option within the listbox. |
+| `aria-owns` | References the ID of the popup listbox the combobox controls. |
+| `aria-autocomplete` | Indicates the autocomplete behavior; typically `list` or `both` when inline completion is shown along with a list. |
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the AutoComplete without interruptions:
+Use the following key shortcuts to operate the AutoComplete with the keyboard:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
 |**Focus**| | |
-|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample. |
+|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses the first component in the sample. |
 |**Input Navigation**| | |
-| <kbd>Alt</kbd> +<kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
+| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 |**Selection**| | |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item; when closed, toggles or confirms the value based on context. |
 |**Popup Navigation**| | |
-| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Selects the first item in the AutoComplete when no item is selected. Otherwise, selects the item next to the currently selected item. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Selects the item previous to the currently selected one. |
-| <kbd>Page down</kbd> | <kbd>Page down</kbd> | Scrolls down to the next page and selects the first item when the popup list opens. |
-| <kbd>Page up</kbd> | <kbd>Page up</kbd> | Scrolls up to the previous page and selects the first item when the popup list opens. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Selects the first item. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Selects the last item. |
+| <kbd>Esc</kbd> | <kbd>Escape</kbd> | Closes the popup list; the current selection remains unchanged. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | When no item is selected, moves to the first item; otherwise, moves to the next item. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves to the previous item. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down a page and focuses the first visible item. |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up a page and focuses the first visible item. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first item. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last item. |
 
-N> In the following sample, disable the AutoComplete component using <kbd>t</kbd> keys.
+N> In the following sample, pressing the <kbd>t</kbd> key toggles the disabled state of the AutoComplete. This is a sample-specific behavior, not a built-in shortcut.
 
 {% highlight cshtml %}
 
@@ -90,9 +90,9 @@ N> In the following sample, disable the AutoComplete component using <kbd>t</kbd
 
 ## Ensuring accessibility
 
-The Blazor AutoComplete component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor AutoComplete component’s accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
-The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the accessibility of the AutoComplete component with accessibility tools.
+The accessibility compliance of the AutoComplete component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/autocomplete) in a new window to evaluate the AutoComplete component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/autocomplete/custom-value.md b/blazor/autocomplete/custom-value.md
index b85a2f1554..34aa72ddff 100644
--- a/blazor/autocomplete/custom-value.md
+++ b/blazor/autocomplete/custom-value.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Custom value in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Custom value in Syncfusion Blazor AutoComplete component and more.
+description: Learn how to enable or disable custom values in the Syncfusion Blazor AutoComplete component using the AllowCustom property.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,11 +9,10 @@ documentation: ug
 
 # Custom value enable and disable
 
-The AutoComplete allows the users to give input as custom value, which is not required to present in predefined set of values. By default, this support is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom) property. The custom value will be sent to post back handler when a form is about to be submitted.
+The AutoComplete supports entering custom values that are not present in the predefined data set. This behavior is controlled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_AllowCustom) property, which is enabled by default. When enabled, a user-entered custom value is accepted and submitted with the form during postback. To restrict input to only the items in the data source, set `AllowCustom="false"`.
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/custom-value/custom-value-enable.razor %}
 
-{% endhighlight %}
-
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/autocomplete/data-binding.md b/blazor/autocomplete/data-binding.md
index e801847ffd..0023cffc06 100644
--- a/blazor/autocomplete/data-binding.md
+++ b/blazor/autocomplete/data-binding.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Data Binding in AutoComplete
 
-The AutoComplete loads the data either from the local data sources or remote data services. Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property,  bind the local data or using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), bind the remote data.
+The AutoComplete loads data from local collections or remote services. Use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property to bind local data, or configure remote data using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-* **TItem** - Specifies the type of the datasource of the AutoComplete component.
+* TItem - Specifies the type of the AutoComplete data source.
 
 ## Binding local data
 
-The AutoComplete loads the data from local data sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of `Array of primitive type`, `Array of object`, `List of primitive type`,`List of object`, `Observable Collection`, `ExpandoObject`, `DynamicObject`.
+Load data from local sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Supported types include: Array or List of primitives, Array or List of objects, ObservableCollection, ExpandoObject, and DynamicObject.
 
 {% highlight cshtml %}
 
@@ -27,7 +27,7 @@ The AutoComplete loads the data from local data sources through the [DataSource]
 
 ### DataBound event
 
-The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_DataBound) event triggers when the data source is populated in the popup list.
+The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_DataBound) event is triggered after the data source is populated in the popup list.
 
 {% highlight cshtml %}
 
@@ -37,9 +37,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown
 
 ### Primitive type
 
-Bind the data to the AutoComplete as an array or list of the `string`, `int`, `double` and `bool` type items.
+Bind arrays or lists of primitive types such as `string`, `int`, `double`, and `bool`.
 
-The following code demonstrates array of string values to the AutoComplete component.
+The following example binds an array of strings to the AutoComplete component.
 
 {% highlight cshtml %}
 
@@ -49,7 +49,7 @@ The following code demonstrates array of string values to the AutoComplete compo
 
 ![Blazor AutoComplete with Primitive string type](./images/data-binding/blazor_autocomplete_primitive-type-string.png)
 
-The following code demonstrates array of integer values to the AutoComplete component.
+The following example binds an array of integers to the AutoComplete component.
 
 {% highlight cshtml %}
 
@@ -61,9 +61,9 @@ The following code demonstrates array of integer values to the AutoComplete comp
 
 ### Complex data type
 
-The AutoComplete can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html) property.
+Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html) property.
 
-In the following example, `Country.CountryID` column from complex data have been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) field.
+In the following example, the `Country.CountryID` column is mapped to the [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) field.
 
 {% highlight cshtml %}
 
@@ -75,7 +75,7 @@ In the following example, `Country.CountryID` column from complex data have be
 
 ### Expando object binding
 
-Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete. The following example binds a collection of vehicles.
 
 {% highlight cshtml %}
 
@@ -87,7 +87,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Observable collection binding
 
-Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the AutoComplete component. In the following example, the `Observable Data` is bound to a collection of colors data.
+Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) so UI updates reflect collection changes automatically. The following example binds a collection of colors.
 
 {% highlight cshtml %}
 
@@ -99,7 +99,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm
 
 ### Dynamic object binding
 
-Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. In the following example, the `DynamicObject` is bound to the collection of customer data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) instances to the AutoComplete. The following example binds a collection of customers.
 
 {% highlight cshtml %}
 
@@ -111,7 +111,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Enum data binding
 
-Bind the enum data to the AutoComplete component. The following code helps you to get a description value from the enumeration data.
+Bind enum values to the AutoComplete. The following example shows how to display the description value from enumeration data.
 
 {% highlight cshtml %}
 
@@ -123,17 +123,15 @@ Bind the enum data to the AutoComplete component. The following code helps you t
 
 ## Binding remote data 
 
-The AutoComplete loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. 
+Load data from remote services using the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started). Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape requests and bind results to the AutoComplete.
 
-The AutoComplete supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the AutoComplete.
-
-* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint. 
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
+* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Service endpoint to fetch data.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Adaptor for the service. By default, [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding.
+* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) provides predefined adaptors designed for common endpoints.
 
 ### OnActionBegin event
 
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionBegin) event triggers before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionBegin) event is triggered before fetching data from the remote server.
 
 {% highlight cshtml %}
 
@@ -145,7 +143,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ### OnActionComplete event
 
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
+The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionComplete) event is triggered after data is fetched successfully.
 
 {% highlight cshtml %}
 
@@ -155,7 +153,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
 
 ### OnActionFailure event
 
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnActionFailure) event is triggered when the data fetch request fails.
 
 {% highlight cshtml %}
 
@@ -165,7 +163,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ### OData v4 services
 
-The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
+Use the [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) to consume data from OData v4 services. The following sample displays the first six customer records from the `Customers` table of the `Northwind` service.
 
 {% highlight cshtml %}
 
@@ -177,7 +175,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 ### Web API adaptor
 
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request. 
+The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) interacts with Web API endpoints that understand OData-formatted queries. It extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor).
 
 {% highlight cshtml %}
 
@@ -189,12 +187,7 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
 
 ### Custom adaptor
 
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the AutoComplete component.
-
-For implementing custom data binding in the AutoComplete, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
-
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. Following are the method signatures present in this class.
-
+The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval for the AutoComplete.
 
 ```csharp
 public abstract class DataAdaptor
@@ -211,9 +204,7 @@ public abstract class DataAdaptor
 }
 ```
 
-In custom Adaptor, the data binding operation can be performed in the AutoComplete component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
-
-The following sample code demonstrates implementing custom data binding using custom adaptor.
+The following example demonstrates custom data binding using a custom adaptor.
 
 {% highlight cshtml %}
 
@@ -223,9 +214,9 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the AutoComplete to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
+To avoid a round trip for every action, load data once on initialization and process actions on the client by setting the DataManager’s `Offline` property to true.
 
-The following example is for remote data binding and enabled offline mode.
+The following example shows remote data binding with offline mode enabled.
 
 {% highlight cshtml %}
 
@@ -237,11 +228,11 @@ The following example is for remote data binding and enabled offline mode.
 
 ### Entity Framework
 
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the AutoComplete component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the AutoComplete component.
 
 #### Create DBContext class
 
-The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database.
+Create a `DbContext` class (`OrderContext`) to connect to SQL Server.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -270,7 +261,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Create data access layer to perform data operation
 
-Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table.
+Create a data access class (`OrderDataAccessLayer`) to retrieve records from the database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -304,7 +295,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Creating web API controller
 
- A Web API Controller has to be created, which allows the AutoComplete to directly consume data from the Entity Framework.
+Create a Web API controller that allows the AutoComplete to consume data directly from Entity Framework.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -351,7 +342,7 @@ namespace EFDropDown.Controllers
 
 ### Configure AutoComplete component using Web API adaptor
 
-Now, configure the AutoComplete using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
+Configure the AutoComplete with [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the Web API using the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
 
 {% highlight cshtml %}
 
@@ -361,7 +352,7 @@ Now, configure the AutoComplete using the [SfDataManager](https://blazor.syncfus
 
 ## Adding new items
 
-Add the new item in the popup with the help of [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) public method. This method will add a mentioned item in the AutoComplete popup without affecting the data source items.
+Add new items to the popup list using the [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method. This adds items to the popup without modifying the underlying data source.
 
 {% highlight cshtml %}
 
diff --git a/blazor/autocomplete/data-source.md b/blazor/autocomplete/data-source.md
index 5062b2b585..7ef939b953 100644
--- a/blazor/autocomplete/data-source.md
+++ b/blazor/autocomplete/data-source.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Data Source in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Data Source in Syncfusion Blazor AutoComplete component and much more.
+description: Learn how to bind data sources in the Syncfusion Blazor AutoComplete component using local collections or remote services with DataManager and adaptors.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,17 +9,17 @@ documentation: ug
 
 # Data Source in Blazor AutoComplete Component
 
-The AutoComplete loads the data either from local data sources or remote data services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of array or [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+The AutoComplete loads data from local sources or remote services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports an array or the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-The AutoComplete also supports different kinds of data services such as OData, OData V4, and Web API and data formats such as XML, JSON, JSONP with the help of DataManager Adaptors.
+The AutoComplete also supports various data services such as OData, OData V4, and Web API and data formats such as XML, JSON, and JSONP through DataManager adaptors.
 
 | Fields  | Type            | Description                                                                                  |
 | ------- | --------------- | -------------------------------------------------------------------------------------------- |
-| Value   | `int or string` | Specifies the hidden data value mapped to each list item that should contain a unique value. |
-| GroupBy | `string`        | Specifies the category under which the list item has to be grouped.                          |
-| IconCss | `string`        | Specifies the icon class of each list item.                                                  |
+| Value   | `int or string` | Specifies the hidden data value mapped to each list item; it should be unique.              |
+| GroupBy | `string`        | Specifies the category used to group list items.                                             |
+| IconCss | `string`        | Specifies the icon CSS class for each list item.                                             |
 
-N> While binding complex data to AutoComplete, fields should be mapped correctly. Otherwise, the selected item remains undefined.
+N> When binding complex data to AutoComplete, ensure field mappings are configured correctly; otherwise, the selected item remains undefined.
 
 ## Bind to local data
 
@@ -27,9 +27,9 @@ Local data can be represented in two ways as described below.
 
 ### Array of object
 
-The AutoComplete can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
 
-In the following example, `Name` column from complex data have been mapped to the `Value` field.
+In the following example, the `Name` column from complex data is mapped to the `Value` field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -72,15 +72,13 @@ In the following example, `Name` column from complex data have been mapped to
 }
 ```
 
-
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor AutoComplete Component Items](./images/blazor-aurocomplete-binding-items.png)" %}
 
-
 ### Array of complex object
 
-The AutoComplete can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+Generate list items from an array of complex objects by mapping fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
 
-In the following example, `Country.CountryID` column from complex data have been mapped to the `Value` field.
+In the following example, the `Country.CountryID` column from complex data is mapped to the `Value` field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -126,9 +124,9 @@ In the following example, `Country.CountryID` column from complex data have be
 
 ## Bind to remote data
 
-The AutoComplete supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property, which is used to fetch data from the database and bind it to the AutoComplete.
+Retrieve data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape queries and bind results to the AutoComplete.
 
-The following sample displays the first 6 contacts from the **Customers** table of the `Northwind` data service.
+The following sample displays the first 6 contacts from the Customers table of the `Northwind` data service.
 
 ```cshtml
 @using Syncfusion.Blazor
@@ -167,7 +165,7 @@ The following sample displays the first 6 contacts from the **Customers** table
 
 ### Web API Adaptor
 
-Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData.
+Use the `WebApiAdaptor` to bind AutoComplete with a Web API that supports OData-style queries.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -198,13 +196,10 @@ Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData.
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Web API Adaptor](./images/blazor-autocomplete-remote-data.png)" %}
 
-### Custom adaptor
 
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the AutoComplete component.
-
-For implementing custom data binding in AutoComplete, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+### Custom adaptor
 
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors for manual data operations. Implement a custom adaptor by inheriting from `DataAdaptor` and overriding `Read` or `ReadAsync` to control data retrieval.
 
 ```c#
 public abstract class DataAdaptor
@@ -221,9 +216,9 @@ public abstract class DataAdaptor
 }
 ```
 
-The custom data binding can be performed in the AutoComplete component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
+The custom data binding can be performed by providing the custom adaptor class and overriding the required methods.
 
-The following sample code demonstrates implementing custom data binding using custom adaptor,
+The following sample demonstrates custom data binding using a custom adaptor:
 
 ```cshtml
 <SfAutoComplete TValue="string" TItem="Orders">
@@ -280,9 +275,9 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the autocomplete to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of `DataManager`.
+To avoid round trips for each action, load data during initialization and perform actions on the client by setting the DataManager’s `Offline` property to true.
 
-Refer to the following example for remote data binding and enabled offline mode.
+Refer to the following example for remote data binding with offline mode enabled.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -308,7 +303,7 @@ Refer to the following example for remote data binding and enabled offline mode.
 
 ### ValueTuple data binding
 
-You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to AutoComplete component. The following code helps you get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the AutoComplete component. The following example shows how to get a string value from enumeration data using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
 
 ```csharp
 
@@ -324,7 +319,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
 
 ## Binding ExpandoObject
 
-You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. The following example `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the AutoComplete component. The following example binds an `ExpandoObject` collection of vehicles.
 
 ```csharp
 
@@ -351,13 +346,11 @@ You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ```
 
-
-
 ![Blazor AutoComplete with expando object data binding](./images/blazor_autocomplete_expando-object.png)
 
 ## Binding DynamicObject
 
-You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. The following example `DynamicObject` is bound to the collection of customers data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the AutoComplete component. The following example binds a `DynamicObject` collection of customers.
 
 ```csharp
 
@@ -403,13 +396,11 @@ You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ```
 
-
-
 ![Blazor AutoComplete with dynamic object data binding](./images/blazor_autocomplete_dynamic-object.png)
 
 ## Binding ObservableCollection
 
-You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the AutoComplete component. The following example `Observable Data` is bound to a collection of colors data.
+Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the AutoComplete component. The following example binds `ObservableCollection` data for colors.
 
 ```csharp
 
@@ -451,11 +442,11 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api
 
 ## Entity Framework
 
-You need to follow the below steps to consume data from the **Entity Framework** in the AutoComplete component.
+Follow the steps below to consume data from Entity Framework in the AutoComplete component.
 
 ### Create DBContext class
 
-The first step is to create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database.
+Create a `DbContext` class called `OrderContext` to connect to a Microsoft SQL Server database.
 
 ```c#
 using Microsoft.EntityFrameworkCore;
@@ -484,7 +475,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Create data access layer to perform data operation
 
-Now you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table.
+Create a data access class named `OrderDataAccessLayer` to retrieve the records from the database table.
 
 ```c#
 using Microsoft.EntityFrameworkCore;
@@ -518,7 +509,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Creating Web API Controller
 
-A Web API Controller has to be created which allows AutoComplete directly to consume data from the Entity framework.
+Create a Web API Controller that allows the AutoComplete to consume data directly from Entity Framework.
 
 ```c#
 using EFDropDown.Shared.DataAccess;
@@ -565,7 +556,7 @@ namespace EFDropDown.Controllers
 
 ### Configure AutoComplete component using Web API adaptor
 
-Now you can configure the AutoComplete using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
+Configure the AutoComplete using the **SfDataManager** to interact with the created Web API and consume the data appropriately. To interact with the Web API, use `WebApiAdaptor`.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
diff --git a/blazor/autocomplete/disabled-items.md b/blazor/autocomplete/disabled-items.md
index 348845813f..c9d5326940 100644
--- a/blazor/autocomplete/disabled-items.md
+++ b/blazor/autocomplete/disabled-items.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Disabled Items in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Disabled Items in Syncfusion Blazor AutoComplete component and much more.
+description: Learn how to configure and manage disabled items in the Syncfusion Blazor AutoComplete component, including field mapping and dynamic enabling or disabling.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
 
 # Disabled Items in Blazor AutoComplete Component
 
-The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `AutoCompleteFieldSettings.Disabled` property.
+The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports marking individual items as enabled or disabled for specific scenarios. Map the disabled state by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Disabled) field in the data source via `AutoCompleteFieldSettings.Disabled`. Disabled items cannot be selected.
 
-In the following sample, State are grouped according on its category using `Disabled` field.
+In the following sample, items are disabled based on the `Disabled` field value in the bound data.
 
 {% highlight cshtml %}
 
@@ -23,15 +23,15 @@ In the following sample, State are grouped according on its category using `Disa
 
 ## Disable Item Method
 
-The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
+The disableItem method can be used to change the disabled state of a specific item at runtime. One item can be updated per call. To update multiple items, call this method iteratively for each target item. When an item is disabled using this method, the corresponding `Disabled` field value in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) is updated. If the currently selected item becomes disabled, the selection is cleared.
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
-| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | The value of the item to enable or disable (should match the value field type of the bound data). |
+| itemIndex | <code>number</code> | The zero-based index of the item to enable or disable. |
 
 ## Enabled
 
-If you want to disabled the overall component to set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false.
+To disable the entire component, set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to false.
 
-![Disabled AutoComplete Component](./images/autocomplete-disable.png)
+![AutoComplete component in a disabled state](./images/autocomplete-disable.png)
\ No newline at end of file
diff --git a/blazor/autocomplete/events.md b/blazor/autocomplete/events.md
index 98a5e369a7..d877abf03e 100644
--- a/blazor/autocomplete/events.md
+++ b/blazor/autocomplete/events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Events in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Events in Syncfusion Blazor AutoComplete component and much more details.
+description: Learn about events in the Syncfusion Blazor AutoComplete component, including ValueChange, OnOpen, OnClose, DataBound, Filtering, selection events, and more.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor AutoComplete Component
 
-This section explains the list of events of the AutoComplete component which will be triggered for appropriate AutoComplete actions.
+This section lists and describes the events raised by the AutoComplete component for common user interactions and lifecycle actions.
 
 ## Blur
 
-`Blur` event triggers when the input loses focus.
+The `Blur` event is triggered when the input loses focus.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -47,7 +47,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## ValueChange
 
-`ValueChange` event triggers when the AutoComplete value is changed.
+The `ValueChange` event is triggered when the AutoComplete value changes.
 
 ```cshtml
 
@@ -83,7 +83,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Closed
 
-`Closed` event triggers after the popup has been closed.
+The `Closed` event is triggered after the popup has been closed.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -117,7 +117,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Created
 
-`Created` event triggers when the component is created.
+The `Created` event is triggered when the component is created.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -151,7 +151,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Destroyed
 
-`Destroyed` event triggers when the component is destroyed.
+The `Destroyed` event is triggered when the component is destroyed.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -185,7 +185,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Focus
 
-`Focus` event triggers when the input gets focus.
+The `Focus` event is triggered when the input gains focus.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -219,7 +219,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## OnOpen
 
-`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The `OnOpen` event is triggered when the popup is opened. If this event is canceled, the popup remains closed.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -253,7 +253,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## OnClose
 
-`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The `OnClose` event is triggered before the popup is closed. If this event is canceled, the popup remains open.
 
 ```cshtml
 
@@ -288,7 +288,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## DataBound
 
-`DataBound` event triggers when the data source is populated in the popup list.
+The `DataBound` event is triggered after the data source is populated in the popup list.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -322,7 +322,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Filtering
 
-`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled.
+The `Filtering` event is triggered while typing in the input when `AllowFiltering` is enabled.
 
 ```cshtml
 
@@ -359,7 +359,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## OnActionBegin
 
-`OnActionBegin` event triggers before fetching data from the remote server.
+The `OnActionBegin` event is triggered before fetching data from the remote server.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -398,7 +398,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## OnActionFailure
 
-`OnActionFailure` event triggers when the data fetch request from the remote server fails.
+The `OnActionFailure` event is triggered when the data fetch request from the remote server fails.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -437,7 +437,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## OnValueSelect
 
-`OnValueSelect` event triggers when a user selects an item in the popup using the mouse/tap or keyboard navigation.
+The `OnValueSelect` event is triggered when a user selects an item in the popup using mouse/tap or keyboard navigation.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -471,7 +471,7 @@ This section explains the list of events of the AutoComplete component which wil
 
 ## Opened
 
-`Opened` event triggers when the popup opens.
+The `Opened` event is triggered when the popup opens.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -504,4 +504,4 @@ This section explains the list of events of the AutoComplete component which wil
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVqsBCTAcAbJVPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-N> AutoComplete is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
+N> The AutoComplete currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the required event is not listed, submit a request on the [Syncfusion Feedback](https://www.syncfusion.com/feedback/blazor-components) portal.
\ No newline at end of file
diff --git a/blazor/autocomplete/filtering.md b/blazor/autocomplete/filtering.md
index b382c09df5..c6b64bb975 100644
--- a/blazor/autocomplete/filtering.md
+++ b/blazor/autocomplete/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filtering in Blazor AutoComplete
 
-The AutoComplete has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is enabled. The filter operation starts as soon as you start typing characters in the search box.  Default value of AllowFiltering is `false`.
+The AutoComplete component provides built-in support for filtering data items when the [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_AllowFiltering) property is enabled. Filtering begins as soon as start typing characters in the search box. The default value for `AllowFiltering` is `false`.
 
 ## Local data
 
@@ -25,9 +25,9 @@ The following code demonstrates the filtering functionality with local data in t
 
 ## Remote data
 
-For Remote data, each key press, filter action request is made at the server end.
+For remote data, a filter action request is made to the server (via the [`DataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) and its configured adaptor) with each key press, depending on the [`DebounceDelay`](#debounce-delay).
 
-The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the AutoComplete component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
+The code below demonstrates the filtering functionality with [`ODataAdaptor`](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the AutoComplete component using the [`Query`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
 
 {% highlight cshtml %}
 
@@ -35,11 +35,13 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Remote Data filtering](./images/filtering/blazor_autocomplete_remote-data.png)
+![Blazor AutoComplete with remote data filtering](./images/filtering/blazor_autocomplete_remote-data.png)
 
 ## Debounce delay
 
-You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
+Control the frequency of filtering operations by using the [`DebounceDelay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_DebounceDelay) property, which sets a delay in milliseconds. This feature helps to reduce the number of filter requests as type, improving performance and responsiveness for a smoother user experience, especially with remote data sources.
+
+By default, the `DebounceDelay` is set to `300ms`. To disable this feature entirely (triggering a filter on every key stroke), can set it to `0ms`.
 
 {% highlight cshtml %}
 
@@ -49,16 +51,15 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ![Blazor AutoComplete with DebounceDelay in filtering](./images/filtering/blazor_autocomplete_debounce-delay.gif)
 
-
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Specify the type of filter action to be used during the search operation using the [`FilterType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_FilterType) property. These filter types are typically applied to string fields in data.
 
-FilterType     | Description
------------- | -------------
-  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contained with specified value.
+| FilterType | Description |
+| :--------- | :---------- |
+| [`StartsWith`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether a value begins with the specified search string. |
+| [`EndsWith`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether a value ends with the specified search string. |
+| [`Contains`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether a value contains the specified search string. |
 
 In the following example, `StartsWith` filter type has been mapped to the `FilterType` property.
 
@@ -72,9 +73,9 @@ In the following example, `StartsWith` filter type has been mapped to the `Filte
 
 ## Minimum length
 
-You can set the limit for the character count to filter the data on the AutoComplete. This can be done by setting the [MinLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_MinLength) property to AutoComplete.
+Set a minimum character count required to trigger data filtering in the AutoComplete component by setting the [`MinLength`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_MinLength) property. This can reduce unnecessary filtering operations, especially with remote data.
 
-In the following example, the remote request does not fetch the search data until the search key contains three characters.
+In the following example, the search data will not be fetched (for either local or remote data) until the input contains at least three characters.
 
 {% highlight cshtml %}
 
@@ -84,9 +85,9 @@ In the following example, the remote request does not fetch the search data unti
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Character Count](./images/blazor-autocomplete-filter-based-length.png)" %}
 
-## Multi column filtering
+## Multi-column filtering
 
-In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme files, support for multi column can be enabled by adding `e-multi-column` class in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property.
+The AutoComplete component can visually present data across multiple columns. This layout support is enabled by adding the `e-multi-column` class to the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_CssClass) property.
 
 {% highlight cshtml %}
 
@@ -94,9 +95,9 @@ In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme fi
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Multi Column filtering](./images/filtering/blazor_autocomplete_multi-column.png)
+![Blazor AutoComplete with multi-column display](./images/filtering/blazor_autocomplete_multi-column.png)
 
-You can achieve multiple column(field) filtering by passing the List of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
+Achieve filtering across multiple data fields by passing a list of [`predicates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [`And`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [`Or`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [`WhereFilters`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html).
 
 {% highlight cshtml %}
 
@@ -104,25 +105,17 @@ You can achieve multiple column(field) filtering by passing the List of [predica
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Multi Column filtering](./images/filtering/blazor_autocomplete_multi-colum-filtering.gif)
+![Blazor AutoComplete with multi-field filtering](./images/filtering/blazor_autocomplete_multi-colum-filtering.gif)
 
-## Case sensitive filtering
+## Case-sensitive filtering
 
-The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
-
-The following example shows how to perform case-sensitive filter.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/filtering/case-sentitive.razor %}
-
-{% endhighlight %}
+Data items can be filtered with or without case sensitivity using the [`DataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This is done by setting the optional `IgnoreCase` parameter within a [`Where` clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_). Set `IgnoreCase` to `false` for case-sensitive filtering.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDVACVWJhzFwRqep?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Custom filtering
 
-The AutoComplete component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source.
+The AutoComplete component's filter queries can be customized using the [`Filtering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Filtering) event. This event allows to implement custom logic, such as filtering text across multiple columns in the data source.
 
 {% highlight cshtml %}
 
@@ -134,9 +127,9 @@ The AutoComplete component filter queries can be customized using [Filtering](ht
 
 ## Suggestion item count
 
-You can specify the filter suggestion item count using the [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_SuggestionCount) property of AutoComplete.
+Specify the maximum number of filter suggestion items displayed in the dropdown list using the [`SuggestionCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_SuggestionCount) property of the AutoComplete.
 
-Refer to the following example to restrict the suggestion list item counts as 3.
+Refer to the following example to restrict the suggestion list to 3 items.
 
 {% highlight cshtml %}
 
@@ -146,9 +139,9 @@ Refer to the following example to restrict the suggestion list item counts as 3.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Count](./images/blazor-autocomplete-filter-item-count.png)" %}
 
-## AutoComplete with google search result
+## AutoComplete with Google search results
 
-The Blazor AutoComplete component offers Google-like search suggestions. This functionality simulates the behavior of conducting a Google search with each keypress, displaying relevant results in the suggestion list.
+The Blazor AutoComplete component offers functionality for displaying Google-like search suggestions. This simulates the behavior of generating relevant results in the suggestion list with each keypress, often by querying an external service.
 
 {% highlight Razor %}
 
@@ -156,28 +149,22 @@ The Blazor AutoComplete component offers Google-like search suggestions. This fu
 
 {% endhighlight %} 
 
-![Blazor AutoComplete with google search result](./images/filtering/blazor_autocomplete_google-search-result.gif)
-
-### Highlighting Search character using property
-
-You can highlight the search text in the suggested list items of the autocomplete component by using the `Highlight` property. When set to true, it will highlight the characters that match the search query in the list items.
+![Blazor AutoComplete with Google search results](./images/filtering/blazor_autocomplete_google-search-result.gif)
 
-{% highlight Razor %}
-
-{% include_relative code-snippet/filtering/high-light-property.razor %}
+### Highlighting search characters using the Highlight property
 
-{% endhighlight %} 
+Highlight the search text within the suggested list items of the AutoComplete component by setting the [`Highlight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Highlight) property to `true`. When enabled, characters that match the search query in the list items will be visually emphasized.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %}
 
-### Highlighting Search character using method
+### Highlighting search characters using a method
 
-You can highlight the search text in the suggested list items of the autocomplete component by using the `HighLightSearch` method. It accepts several arguments, including `textValue`, `ignoreCase`, `filtertype` and `highLighText`. When called, it will highlight the characters that match the search query in the list items."
+Programmatically highlight the search text in the suggested list items of the AutoComplete component by using the `HighLightSearch` method. This method accepts several arguments, allowing for granular control over the highlighting process:
 
-* `textValue` - The text to be highlighted in the list item.
-* `ignoreCase` - A boolean value which when set to true performs the search text based on casing.
-* `filterType` - Determines on which filter type the highlight text is updated on the text.
-* `highlightText` - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text."
+*   `textValue`: The text content of the list item where highlighting needs to occur.
+*   `ignoreCase`: A boolean value which, when set to `true`, performs the search text comparison without considering casing.
+*   `filterType`: Determines which filter type (`StartsWith`, `EndsWith`, `Contains`, etc.) dictates how the highlight text is matched within the `textValue`.
+*   `highlightText`: (Optional) The specific text string to be highlighted. If not provided, the method typically uses the current filter value as the `highlightText`.
 
 {% highlight Razor %}
 
diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md
index 8b72ada1a3..6eca854df2 100644
--- a/blazor/autocomplete/getting-started-with-web-app.md
+++ b/blazor/autocomplete/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor AutoComplete in Blazor Web App
 
-This section briefly explains about how to include [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor AutoComplete](https:/
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor AutoComplete**   component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor AutoComplete** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in the [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor AutoComplete** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.DropDowns --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -240,7 +269,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.png)" %}
 
@@ -295,7 +324,7 @@ After initialization, populate the AutoComplete with data using the [DataSource]
 
 ## Configure the suggestion list
 
-By default, suggestion list width automatically adjusts according to the AutoComplete input element's width, and the height of the suggestion list has `300px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the suggestion list width automatically matches the AutoComplete input element, and the suggestion list height is `300px`. Customize the popup size using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/autocomplete/getting-started.md b/blazor/autocomplete/getting-started.md
index 18f2aafb77..03dba139de 100644
--- a/blazor/autocomplete/getting-started.md
+++ b/blazor/autocomplete/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor AutoComplete Component
 
-This section briefly explains about how to include [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with Blazor AutoComplete component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete)
+To get started quickly with the Blazor AutoComplete component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AutoComplete).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=DbVs6UPjQ-U"%}
@@ -26,11 +26,11 @@ To get started quickly with Blazor AutoComplete component, you can check on this
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio)
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor AutoComplete**   component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor AutoComplete** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,8 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are restored.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight c# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in  Blazor application.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Autocomplete component
 
@@ -171,7 +171,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete com
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application.This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component in default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtBJZMreLmNLRbiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor AutoComplete Component](./images/blazor-autocomplete-component.png)" %}
 
@@ -224,7 +224,7 @@ After initialization, populate the AutoComplete with data using the [DataSource]
 
 ## Configure the suggestion list
 
-By default, suggestion list width automatically adjusts according to the AutoComplete input element's width, and the height of the suggestion list has `300px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the suggestion list width automatically adjusts to the AutoComplete input element, and the suggestion list height is `300px`. Customize the popup size using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/autocomplete/grouping.md b/blazor/autocomplete/grouping.md
index b175604741..f7ecaedf93 100644
--- a/blazor/autocomplete/grouping.md
+++ b/blazor/autocomplete/grouping.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Grouping in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Grouping in Syncfusion Blazor AutoComplete component and much more.
+description: Learn how to group items in the Syncfusion Blazor AutoComplete component using the GroupBy field, fixed group headers, and group header templates.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
 
 # Grouping in Blazor AutoComplete Component
 
-The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports wrapping nested elements into a group based on different categories. The category of each list item can be mapped through the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data table. The group header is displayed as both inline and fixed headers. The fixed group header content is updated dynamically on scrolling the suggestion list with its category value.
+The [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) supports grouping list items by category. Map the category field using [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy). Group headers are shown both inline and as fixed headers. The fixed header updates dynamically while scrolling the suggestion list to reflect the current group.
 
-To get started quickly with grouping in the Blazor AutoComplete component, you can check the video below.
+To get started quickly with grouping in the Blazor AutoComplete component, see the following video.
 
 {% youtube "https://www.youtube.com/watch?v=XtqNSV0B3h8" %}
 
-In the following sample, vegetables are grouped according to their category using the `AutoCompleteFieldSettings.GroupBy` field.
+In the following sample, vegetables are grouped by category using the `AutoCompleteFieldSettings.GroupBy` field.
 
 {% highlight cshtml %}
 
@@ -27,14 +27,14 @@ In the following sample, vegetables are grouped according to their category usin
 
 ## Fixed group header
 
-Classify the items based on the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field mapped to the component. The headers of group items will be fixed at the top till their belonging items ends up on scrolling.
+Classify items based on the [AutoCompleteFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field mapped to the component. Group headers remain fixed at the top while scrolling until all items in the current group have scrolled out of view.
 
 ## Group header template
 
-The group header title under which appropriate sub-items are categorized is customize with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
+Customize the group header title using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template applies to both inline and floating group headers. The floating header can also be customized with the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
 
 ## Limitations of grouping
 
-Grouping feature has some limitations. These are:
+The grouping feature has the following limitation:
 
-* The component will support only single level of grouping, and you cannot specify it as like TreeView component.
+* Only a single level of grouping is supported; hierarchical (multi-level) grouping like in the TreeView component is not supported.
\ No newline at end of file
diff --git a/blazor/autocomplete/highlight-search.md b/blazor/autocomplete/highlight-search.md
index 7cd868b836..b3e6272308 100644
--- a/blazor/autocomplete/highlight-search.md
+++ b/blazor/autocomplete/highlight-search.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Highlight searching  in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about highlight searching in Syncfusion Blazor AutoComplete component and much more.
+title: Highlight search in Blazor AutoComplete component | Syncfusion
+description: Check out how to highlight search text in the Syncfusion Blazor AutoComplete component, including template-based highlighting and CSS customization.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Highlight Search Blazor AutoComplete Component
 
-You can highlight the search text in the suggested list items of the autocomplete component by using the `Highlight` property. When set to true, it will highlight the characters that match the search query in the list items.
+Highlight the search text in the suggested list items of the AutoComplete component by using the `Highlight` property. The default value is `false`. When set to `true`, the component highlights the characters that match the current search query in the suggestion list. The rendered markup uses the `e-highlight` CSS class for the matched segments.
 
 {% highlight Razor %}
 
@@ -21,12 +21,12 @@ You can highlight the search text in the suggested list items of the autocomplet
 
 ## Highlight with template
 
-You can highlight the search text in the suggested list items of the autocomplete component by using the `HighLightSearch` method. It accepts several arguments, including `textValue`, `ignoreCase`, `filterType` and `highLightText`. When called, it will highlight the characters that match the search query in the list items."
+Use the `HighLightSearch` method within an item template to highlight matched text in custom-rendered list items. It accepts the following arguments and highlights characters that match the search query based on the specified options.
 
-* `textValue` - The text to be highlighted in the list item.
-* `ignoreCase` - A boolean value which when set to true performs the search text based on casing.
-* `filterType` - Determines on which filter type the highlight text is updated on the text.
-* `highlightText` - The text to be highlighted. This is an optional argument. If not provided, it will use the filter value as the highlight text."
+* `textValue` - The display text from the current list item to evaluate and render with highlights.
+* `ignoreCase` - When `true`, performs case-insensitive matching.
+* `filterType` - Specifies how matches are determined (for example, starts with, contains, or ends with).
+* `highlightText` - Optional. The text to highlight. If not provided, the method uses the current filter value.
 
 {% highlight Razor %}
 
@@ -38,7 +38,7 @@ You can highlight the search text in the suggested list items of the autocomplet
 
 ## Change the highlight style
 
-You can customize the appearance of highlighted text using the `.e-highlight` class. In the example below, we have styled the background color for the highlighted text.
+Customize the appearance of the highlighted text using the `.e-highlight` class. In the following example, the background color for matched text is styled to improve visibility.
 
 {% highlight Razor %}
 
@@ -46,4 +46,4 @@ You can customize the appearance of highlighted text using the `.e-highlight` cl
 
 {% endhighlight %} 
 
-![Blazor AutoComplete with HighLightSearch method](./images/highlight-search/blazor_autocomplete_highlight-style.png)
+![Blazor AutoComplete custom highlight style using the e-highlight class](./images/highlight-search/blazor_autocomplete_highlight-style.png)
\ No newline at end of file
diff --git a/blazor/autocomplete/images/blazor-create-web-app.png b/blazor/autocomplete/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/autocomplete/images/blazor-create-web-app.png differ
diff --git a/blazor/autocomplete/localization.md b/blazor/autocomplete/localization.md
index a173e37865..605c285bc5 100644
--- a/blazor/autocomplete/localization.md
+++ b/blazor/autocomplete/localization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Localization in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Localization in Syncfusion Blazor AutoComplete component and much more.
+description: Check out how to localize the Syncfusion Blazor AutoComplete component, including globalization settings such as right-to-left (RTL) rendering.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,15 +9,15 @@ documentation: ug
 
 # Localization in Blazor AutoComplete Component
 
-[Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+[Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to configure resources and localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components. Localizable texts include built-in UI strings such as “No records found” and “Action failed.” Localization changes the displayed strings, while globalization options (such as RTL) affect layout and reading direction.
 
 ## Globalization
 
 ### Enable RTL mode
 
-The direction can be switched to right to left when specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as `true`. Writing systems like Arabic, Hebrew, and more will require `EnableRtl` property.
+The direction can be switched to right-to-left by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) property to `true`. The default value is `false`. Enable RTL for right-to-left languages such as Arabic and Hebrew; the component layout and icon alignment will mirror automatically based on Syncfusion styles.
 
-Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as a boolean value that indicates to enable or disable rendering component in the right to left direction. Writing systems will require Arabic, Hebrew, and more. The direction can be switched to right-to-left.
+Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_EnableRtl) as a boolean value that enables or disables rendering the component in a right-to-left direction.
 
 {% highlight cshtml %}
 
diff --git a/blazor/autocomplete/multicolumn.md b/blazor/autocomplete/multicolumn.md
index 6a6f8d3b97..4b1d246f90 100644
--- a/blazor/autocomplete/multicolumn.md
+++ b/blazor/autocomplete/multicolumn.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Multicolumn in Blazor AutoComplete List Component | Syncfusion
+title: Multi-column in Blazor AutoComplete component | Syncfusion
 description: Checkout and learn here all about AutoComplete in Syncfusion Blazor AutoComplete component and more.
 platform: Blazor
 control: AutoComplete
@@ -9,15 +9,15 @@ documentation: ug
 
 # Multicolumn in AutoComplete
 
-Provide two or more columns in the popup by using the class name `e-multi-column` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property  and the column will be aligned like grid.
+Provide two or more visual columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_CssClass) property, and render the layout using an item template. This approach uses templates and CSS to display data in multiple columns; it is not a data grid and does not add grid features.
 
-* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Using `ItemTemplate`, add the columns in the popup.
+* [ItemTemplate](https://blazor.syncfusion.com/documentation/autocomplete/templates#item-template) – Use `ItemTemplate` to define the content for each row and arrange fields into multiple visual columns in the popup.
 
-Display the custom text alignment in each column using a built-in class like in the following code example:
+Display custom text alignment within each column using the following built-in utility classes:
 
-* `e-text-center`: Displays the text in the center of the column.
-* `e-text-right`: Displays the text in the right side of the column.
-* `e-text-left`: Displays the text in the left side of the column.
+* `e-text-center`: Aligns text to the center of the column.
+* `e-text-right`: Aligns text to the right side of the column.
+* `e-text-left`: Aligns text to the left side of the column.
 
 {% highlight cshtml %}
 
@@ -25,8 +25,8 @@ Display the custom text alignment in each column using a built-in class like in
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Multicolumn](./images/multicolumn/blazor_autocomplete_multicolumn.png)
+![Blazor AutoComplete popup with multiple columns using ItemTemplate](./images/multicolumn/blazor_autocomplete_multicolumn.png)
 
 ## Limitation of multicolumn autocomplete
 
-The component will not support column filtering and sorting, and the column will be alligned as same as grid.
+The component does not support column-level features such as sorting, filtering, or resizing. The multi-column appearance is template-based and visually aligned similar to a grid; responsive behavior and widths depend on the custom CSS defined in the template.
\ No newline at end of file
diff --git a/blazor/autocomplete/native-events.md b/blazor/autocomplete/native-events.md
index 333f70e1f7..be857e15a8 100644
--- a/blazor/autocomplete/native-events.md
+++ b/blazor/autocomplete/native-events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Native Events in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Native Events in Syncfusion Blazor AutoComplete component and more.
+title: Native events in Blazor AutoComplete component | Syncfusion
+description: Check out how to use native events with the Syncfusion Blazor AutoComplete component, including @on{event} binding and passing event argument data.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
 
 # Native Events in Blazor AutoComplete Component
 
-The following section explains the steps to include native events and pass data to event handler in the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) component.
+The following section explains how to include native DOM events and pass data to an event handler in the [Blazor AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete) component. Native events are bound using the `@on{event}` attribute syntax, and the attribute value is the event handler.
 
 ## Bind native events to AutoComplete
 
-You can access any native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Bind any native event by adding the corresponding `@on{event}` attribute to the component. The event is attached to the component’s input element, and the attribute’s value is treated as an event handler.
 
-In the following example, the keyPressed method is called every time the key is pressed on input.
+In the following example, the `KeyPressed` method is called each time a key is pressed in the input.
 
 ```cshtml
 <SfAutoComplete TValue="string" TItem="Country" @onkeypress="@KeyPressed" DataSource="@LocalData">
@@ -46,24 +46,26 @@ In the following example, the keyPressed method is called every time the key is
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjVUMrifgyJMzUUB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-Also, you can rewrite the above example code as follows using Lambda expressions.
+The same behavior can be written using a lambda expression. The following example prints a message when a key is pressed.
 
 ```cshtml
 <SfAutoComplete TValue="string" DataSource="@LocalData" @onkeypress="@(() => Console.WriteLine("Key Pressed!"))"></SfAutoComplete>
 ```
 
+Note: Handlers can be synchronous or asynchronous. Event modifiers such as `:preventDefault` and `:stopPropagation` can be appended to native events (for example, `@onkeydown:preventDefault`).
+
 ## Pass event data to event handler
 
-Blazor provides set of argument types to map to native events. The list of event types and event arguments are:
+Blazor provides strongly typed event argument classes that map to native events. Common event types and corresponding argument classes include:
 
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+- Focus events – FocusEventArgs
+- Mouse events – MouseEventArgs
+- Keyboard events – KeyboardEventArgs
+- Input/change events – ChangeEventArgs/EventArgs
+- Touch events – TouchEventArgs
+- Pointer events – PointerEventArgs
 
-In the following example, the on keypress method is called every time any key is pressed inside input. But the message will print when you press "a" key.
+In the following example, the keypress handler receives `KeyboardEventArgs`. The message is printed only when the “a” key is pressed.
 
 ```cshtml
 <SfAutoComplete TValue="string" TItem="Country" @onkeypress="@(e => KeyPressed(e))" DataSource="@LocalData">
@@ -94,10 +96,12 @@ In the following example, the on keypress method is called every time any key is
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hXVgCVWTAdxsbIip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-Using Lambda expression also, you can pass the event data to the event handler.
+Lambda expressions can also pass event data to the event handler as shown above. Native events can be used alongside Syncfusion component events (such as `ValueChange`), depending on the use case.
 
 ## List of native events supported
 
+Common native events that can be bound to the component include:
+
 | List of Native events |  |  | |
 | --- | --- | --- | --- |
 | onclick | onblur | onfocus | onfocusout |
diff --git a/blazor/autocomplete/placeholder-and-floatlabel.md b/blazor/autocomplete/placeholder-and-floatlabel.md
index 9a17abe67f..74d128b903 100644
--- a/blazor/autocomplete/placeholder-and-floatlabel.md
+++ b/blazor/autocomplete/placeholder-and-floatlabel.md
@@ -9,72 +9,74 @@ documentation: ug
 
 # Placeholder and Float Label in AutoComplete
 
+This section describes how to configure the placeholder and float label behavior in the Blazor AutoComplete component and how to customize their styles.
+
 ## Placeholder
 
-Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_Placeholder) property to display guidance text for the expected input value. In the following example, setting `Select a game` as the `Placeholder` value applies it to the input element’s placeholder attribute.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/placeholder-and-floatlabel/placeholder.razor %}
 
 {% endhighlight %}
 
-![Blazor AutoComplete with placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder.png)
+![Blazor AutoComplete showing placeholder text in the input](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder.png)
 
 ## Color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the placeholder text color by targeting the `input.e-input::placeholder` selector and setting the desired CSS `color` value.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/placeholder-and-floatlabel/placeholder-with-color.razor %}
 
 {% endhighlight %}
 
-![Blazor AutoComplete with color placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-color.png)
+![Blazor AutoComplete with customized placeholder text color](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-color.png)
 
 ## Add mandatory indicator using placeholder
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+Apply a mandatory indicator (*) to the floating label by targeting the `.e-float-text::after` selector and setting the `content` style. Note that this customizes the floating label element rather than the native placeholder text.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/placeholder-and-floatlabel/placeholder-with-mandatory.razor %}
 
 {% endhighlight %}
 
-![Blazor AutoComplete with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-mandatory.png)
+![Blazor AutoComplete with a mandatory indicator on the floating label](./images/placeholder-and-floatlabel/blazor_autocomplete_placeholder-with-mandatory.png)
 
 ## FloatLabel
 
-Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to specify the floating label behavior of the AutoComplete that the `Placeholder` text floats above the AutoComplete based on the following values. `FloatLabelType` is applicable only when `Placeholder` is used. `FloatLabelType` is depends on `Placeholder`. Default value of `FloatLabelType` is `Never`.
+Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_FloatLabelType) property to control how the `Placeholder` text floats above the AutoComplete. `FloatLabelType` applies only when `Placeholder` is set. The default value is `Never`.
 
-The floating label supports the types of actions as follow.
+The floating label supports the following modes:
 
 Type     | Description
 ------------ | -------------
-  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The floating label will float above the input after focusing, or entering a value in the input.
-  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The floating label will always float above the input.
-  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | By default, never float the label in the input when the placeholder is available.
+  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The label floats above the input on focus or when a value is entered.
+  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The label always floats above the input.
+  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | The label never floats above the input when a placeholder is available.
 
-The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
+The `FloatLabelType` set to `Auto` is demonstrated in the following example.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/placeholder-and-floatlabel/floatlabel.razor %}
 
 {% endhighlight %}
 
-![Blazor AutoComplete with float label](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel.gif)
+![Blazor AutoComplete with floating label moving above on focus and input](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel.gif)
 
 ## Customizing the float label element’s focusing color
 
-You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property.
+Change the floating label text color when focused by targeting the `.e-input-focus .e-float-text.e-label-top` selector and applying the desired `color`.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/placeholder-and-floatlabel/floatlabel-focusing-color.razor %}
 
 {% endhighlight %}
 
-![Blazor AutoComplete with float label focusing color](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel-focusing-color.png)
\ No newline at end of file
+![Blazor AutoComplete with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_autocomplete_floatlabel-focusing-color.png)
\ No newline at end of file
diff --git a/blazor/autocomplete/popup-setting.md b/blazor/autocomplete/popup-setting.md
index e7e4632703..300eb31ee4 100644
--- a/blazor/autocomplete/popup-setting.md
+++ b/blazor/autocomplete/popup-setting.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Popup Setting in Blazor AutoComplete Component | Syncfusion
-description: Checkout and learn here all about Popup Setting in Syncfusion Blazor AutoComplete component and much more.
+title: Popup settings in Blazor AutoComplete component | Syncfusion
+description: Check out popup settings in the Syncfusion Blazor AutoComplete component, including resize, width, height, z-index, initial display, and open/close events.
 platform: Blazor
 control: AutoComplete
 documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Popup resize 
 
-You can dynamically adjust the size of the popup in the Autocomplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
+Can dynamically adjust the size of the popup in the AutoComplete component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_AllowResize) property. When enabled, users can resize the popup by dragging the resize handle to improve visibility and control.
 
 {% highlight Razor %}
 
@@ -24,11 +24,11 @@ You can dynamically adjust the size of the popup in the Autocomplete component b
 
 ## Change the popup width
 
-Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the AutoComplete component.
+Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupWidth) property. The default value of `PopupWidth` is `100%`. When unspecified, the popup width is based on the AutoComplete component’s width. This property accepts standard CSS units (for example, px, %, rem).
 
 In the following sample, the `PopupWidth` is set as `300px`.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/popup-setting/popup-width.razor %}
 
@@ -38,11 +38,11 @@ In the following sample, the `PopupWidth` is set as `300px`.
 
 ## Change the popup height
 
-Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of the `PopupHeight` is `300px`.
+Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_PopupHeight) property. The default value of `PopupHeight` is `300px`. This property accepts standard CSS units (for example, px, %, rem).
 
 In the following sample, the `PopupHeight` is set as `200px`.
 
-{% highlight cshtml %}
+{% highlight Razor %}
 
 {% include_relative code-snippet/popup-setting/popup-height.razor %}
 
@@ -58,7 +58,7 @@ Defaults to `1000`.
 
 ## Show popup on initial loading
 
-You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) Event.
+Display the popup at initial load by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-1.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_1_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Created) event.
 
 {% highlight Razor %}
 
@@ -70,7 +70,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 ## Preventing opening and closing
 
-Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events. 
+Prevent opening or closing the popup by setting [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) or [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) to `true` in the corresponding event handlers. This is achieved using the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnClose) events.
 
 {% highlight Razor %}
 
@@ -78,11 +78,11 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Preventing opening and closing](./images/popup-setting/blazor_autocomplete_preventing-opening-closing.png)
+![Blazor AutoComplete with preventing popup opening and closing](./images/popup-setting/blazor_autocomplete_preventing-opening-closing.png)
 
 ### OnOpen event
 
-The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnOpen) event triggers before the popup is opened. Canceling this event keeps the popup closed.
 
 {% highlight Razor %}
 
@@ -92,7 +92,7 @@ The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ### Opened event
 
-The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers when the popup opens.
+The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Opened) event triggers after the popup is opened.
 
 {% highlight Razor %}
 
@@ -102,7 +102,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ### OnClose event
 
-The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnClose) event triggers before the popup is closed. Canceling this event keeps the popup open.
 
 {% highlight Razor %}
 
@@ -112,7 +112,7 @@ The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.
 
 ### Closed event
 
-The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers after the popup has been closed.
+The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Closed) event triggers after the popup has been closed.
 
 {% highlight Razor %}
 
@@ -122,7 +122,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ## Popup height based on available space
 
-You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
+Set the popup height based on the available viewport space by binding the window `resize` event and updating the popup height dynamically.
 
 {% highlight Razor %}
 
@@ -150,4 +150,4 @@ You can achieve this by binding the `resize` event in window and update the heig
 {% endhighlight %}
 {% endtabs %}
 
-![Popup height based on available space in Blazor DropdownList](./images/popup-setting/blazor_autocomplete_popup_resize.gif)
+![Popup height based on available space in Blazor AutoComplete](./images/popup-setting/blazor_autocomplete_popup_resize.gif)
\ No newline at end of file
diff --git a/blazor/autocomplete/selection.md b/blazor/autocomplete/selection.md
index f5973ff501..92819b239e 100644
--- a/blazor/autocomplete/selection.md
+++ b/blazor/autocomplete/selection.md
@@ -19,7 +19,7 @@ Get the selected value of the AutoComplete component in the [ValueChange](https:
 
 {% endhighlight %}
 
-Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
+Get the complete data object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
 {% highlight cshtml %}
 
@@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https://
 
 ## Preselected value on OnInitializedAsync
 
-Bind the pre-selected value to the AutoComplete component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component.
+Bind a preselected value to the AutoComplete component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following sample shows how to bind the value during initial rendering.
 
 {% highlight cshtml %}
 
@@ -37,11 +37,11 @@ Bind the pre-selected value to the AutoComplete component using the [@bind-Value
 
 {% endhighlight %}
 
-![Blazor AutoComplete with pre-select value](./images/selection/blazor_autocomplete_preselect_value.png)
+![Blazor AutoComplete showing a preselected value on initial render](./images/selection/blazor_autocomplete_preselect_value.png)
 
 ## Programmatically change the selected value
 
-Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component.
+Change the component value programmatically using the component instance obtained via the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample demonstrates changing the value using the button click event.
 
 {% highlight cshtml %}
 
@@ -49,11 +49,11 @@ Change the component value programmatically or externally by the component insta
 
 {% endhighlight %}
 
-![Blazor AutoComplete with pre-select value before](./images/selection/blazor_autocomplete_changing-selected-value.gif)
+![Blazor AutoComplete value changed programmatically using a button](./images/selection/blazor_autocomplete_changing-selected-value.gif)
 
 ### ValueChange event
 
-The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event is triggered when the value of the AutoComplete component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event is triggered when the value of the AutoComplete component is changed. It provides event arguments that include the current and previously selected values.
 
 {% highlight cshtml %}
 
@@ -63,7 +63,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo
 
 ### OnValueSelect event
 
-The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnValueSelect) event is triggered when you select any value in the AutoComplete component. Get the necessary arguments including the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Also,  prevent the selection of items by setting the [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) property as `true` provided by the event arguments. 
+The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_OnValueSelect) event is triggered when a value is selected in the AutoComplete component. It provides event arguments including [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Prevent selection by setting [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) to `true` in the event arguments.
 
 {% highlight cshtml %}
 
@@ -73,11 +73,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ## Preselect value with index
 
-Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource.
+Bind a preselected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This binds the value corresponding to the specified index position in the data source.
 
-N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined.
+N> The behavior depends on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. If sorting is applied, the index binds against the sorted data.
 
-The following sample shows how to bind the index on the initial rendering.
+The following sample shows how to bind the index during initial rendering.
 
 {% highlight cshtml %}
 
@@ -85,11 +85,11 @@ The following sample shows how to bind the index on the initial rendering.
 
 {% endhighlight %}
 
-![Blazor AutoComplete with bind-index](./images/selection/blazor_autocomplete_preselect-value-index.png)
+![Blazor AutoComplete with bind-index selecting an item by position](./images/selection/blazor_autocomplete_preselect-value-index.png)
 
 ## Autofill the selected value
 
-The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Autofill) property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component's data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of `Autofill` is `false`.
+The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Autofill) property specifies whether the input automatically suggests and fills the first matched item as the user types, based on the component’s data source. If no match is found, the input is not filled. The default value of `Autofill` is `false`.
 
 {% highlight Razor %}
 
@@ -97,11 +97,11 @@ The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns
 
 {% endhighlight %} 
 
-![Blazor AutoComplete with Autofill property](./images/selection/blazor_autocomplete_with-autofill-property.gif)
+![Blazor AutoComplete demonstrating the Autofill feature](./images/selection/blazor_autocomplete_with-autofill-property.gif)
 
 ## Get selected item by value
 
-Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method.
+Get the entire data object for the selected value using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method.
 
 {% highlight cshtml %}
 
@@ -111,7 +111,7 @@ Get the entire object belonging to the value selected in the component using the
 
 ## Focus the next component on selection
 
-Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) public method. It will set focus instantly to the AutoComplete component when invoking it. 
+Set focus programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) method. This immediately moves focus to the AutoComplete component when invoked, enabling workflows that shift focus to the next interactive element after selection.
 
 {% highlight cshtml %}
 
@@ -121,7 +121,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus
 
 ## Prevent reload on form submit
 
-To prevent the page from reloading when using the AutoComplete component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked.
+To prevent the page from reloading when the AutoComplete component is used inside a form, set the button type to "button" using the `HTMLAttributes` property. This prevents the default form submit behavior when the button is clicked.
 
 {% highlight cshtml %}
 
@@ -131,7 +131,7 @@ To prevent the page from reloading when using the AutoComplete component inside
 
 ## Programmatically clear the selected value
 
-To clear the Autocomplete value programmatically, use the [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method. This method clears out the selected values from the SfAutocomplete<TValue, TItem> component and sets the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) properties to null.
+To clear the AutoComplete value programmatically, use the [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method. This method clears the selected value from the `SfAutocomplete<TValue, TItem>` component and sets the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_Index) properties to null.
 
 {% highlight cshtml %}
 
@@ -139,11 +139,11 @@ To clear the Autocomplete value programmatically, use the [ClearAsync](https://h
 
 {% endhighlight %}
 
-![Blazor AutoComplete with programatically clear value](./images/selection/blazor_autocomplete_with-programmatically-clear-value.gif)
+![Blazor AutoComplete clearing the selected value programmatically](./images/selection/blazor_autocomplete_with-programmatically-clear-value.gif)
 
 ## Programmatically trigger onChange event
 
-Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [AutoCompleteEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page.
+Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event manually by using the instance (taken from @ref) of the [AutoCompleteEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler, so it triggers once the component is created or rendered.
 
 {% highlight cshtml %}
 
@@ -153,7 +153,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ## Programmatically focus in and focus out the component
 
-In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the autocomplete, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the autocomplete.
+To trigger the `FocusAsync()` and `FocusOutAsync()` methods using the AutoComplete instance, use buttons and bind their click events to these methods. Clicking the corresponding button invokes the focus or blur behavior on the component.
 
 {% highlight Razor %}
 
@@ -161,11 +161,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i
 
 {% endhighlight %}
 
-While focusing and focus out the following event get triggered.
+The following events are triggered on focus and blur.
 
 ### Focus event
 
-The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Focus) event will trigger when the component gets focused. 
+The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Focus) event is triggered when the component receives focus. 
 
 {% highlight cshtml %}
 
@@ -175,7 +175,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Au
 
 ### Blur event
 
-The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Blur) event will trigger when focus moves out from the component. 
+The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_Blur) event is triggered when focus moves out of the component. 
 
 {% highlight cshtml %}
 
diff --git a/blazor/autocomplete/sorting.md b/blazor/autocomplete/sorting.md
index 38d4b6d38c..06351a0cb9 100644
--- a/blazor/autocomplete/sorting.md
+++ b/blazor/autocomplete/sorting.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Sorting in Blazor AutoComplete Component | Syncfusion
+title: Sorting in Blazor AutoComplete component | Syncfusion
 description: Checkout and learn here all about the Sorting feature in Syncfusion Blazor AutoComplete component and more.
 platform: Blazor
 control: AutoComplete
@@ -9,17 +9,19 @@ documentation: ug
 
 # Sorting in AutoComplete
 
-The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
+Sorting orders the displayed items in the AutoComplete popup. The default sort order is `None`.
+
+The Sorting enables to sort data in the `Ascending` or `Descending` order. To enable sorting in the AutoComplete, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
 
 The available type of sort orders are:
 
 SortOrder     | Description
 ------------ | -------------
-  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorting.
-  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | The data source is sorting with ascending order.
-  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | The data source is sorting with descending order.
+  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorted.
+  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | Sorts in ascending order.
+  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | Sorts in descending order.
 
-In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup.
+In the following demonstration sample, the items in the data source are intentionally shuffled; the `SortOrder` determines whether the items are listed in ascending or descending alphanumeric order in the popup. Sorting is applied to the field used for display (as configured in field settings), is client-side only, and does not modify the underlying data. Sorting behavior follows the current culture; combine with filtering as needed (filter reduces the list, then the result is shown in the specified sort order).
 
 {% highlight cshtml %}
 
@@ -27,4 +29,4 @@ In the following demonstration sample, the items in the datasource are shuffled
 
 {% endhighlight %}
 
-![Blazor AutoComplete with sortOrder descending](./images/sorting/blazor_autocomplete_sorting.png)
\ No newline at end of file
+![Blazor AutoComplete sorted in descending order using SortOrder](./images/sorting/blazor_autocomplete_sorting.png)
\ No newline at end of file
diff --git a/blazor/autocomplete/style.md b/blazor/autocomplete/style.md
index 3d7c8475b7..9ba1eb1e10 100644
--- a/blazor/autocomplete/style.md
+++ b/blazor/autocomplete/style.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and Appearance in Blazor AutoComplete Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content explains the CSS structure and options that can be used to modify the component’s appearance based on user preferences and theming requirements.
 
 ## Read-only mode
 
-Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) whether the AutoComplete allows the user to change the value or not.
+Specify a boolean value for the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) property to control whether the AutoComplete allows the user to change the value.
 
 {% highlight cshtml %}
 
@@ -21,11 +21,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Readonly mode](./images/style/blazor_autocomplete_readonly-mode.png)
+![Blazor AutoComplete showing read-only mode](./images/style/blazor_autocomplete_readonly-mode.png)
 
 ## Disabled state
 
-Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not.
+Specify a boolean value for the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to indicate whether the component is enabled.
 
 {% highlight cshtml %}
 
@@ -33,11 +33,11 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Disabled ](./images/style/blazor_autocomplete_disabled-state.png)
+![Blazor AutoComplete in a disabled state](./images/style/blazor_autocomplete_disabled-state.png)
 
 ### Customizing the disabled component’s text color
 
-You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
+Customize the text color of a disabled component by targeting the `.e-input[disabled]` selector (the input element in a disabled state) and setting the desired color using the `-webkit-text-fill-color` property. For broader browser coverage, consider also setting the `color` property.
 
 {% highlight cshtml %}
 
@@ -49,7 +49,7 @@ You can customize the text color of a disabled component by targeting its CSS cl
 
 ## Show the custom icon in dropdown icon
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the autocomplete component, and set the desired icon to the `content` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting the `.e-ddl-icon::before` selector (the icon element in the AutoComplete) and setting the desired glyph via the `content` property.
 
 {% highlight cshtml %}
 
@@ -57,9 +57,9 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 {% endhighlight %}
 
-![Blazor AutoComplete with dropdown icon](./images/style/blazor_autocomplete_dropdown-icon.png)
+![Blazor AutoComplete with a custom dropdown icon](./images/style/blazor_autocomplete_dropdown-icon.png)
 
-You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and add style to the custom class which is mapped to `CssClass`.
+Customize the dropdown icon for a specific component instance using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and apply styles to that custom class.
 
 {% highlight cshtml %}
 
@@ -67,11 +67,11 @@ You can customize the dropdown icon for the particular component using the [CssC
 
 {% endhighlight %}
 
-![Blazor AutoComplete with dropdown icon using CssClass](./images/style/blazor_autocomplete_dropdown-icon.png)
+![Blazor AutoComplete with a custom dropdown icon using CssClass](./images/style/blazor_autocomplete_dropdown-icon.png)
 
 ## Customizing the appearance of container element
 
-You can customize the appearance of the container element within the autocomplete component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
+Customize the container element within the AutoComplete by targeting the `.e-input` selector (the parent element of the input), and apply the desired styles to change the component’s appearance.
 
 {% highlight cshtml %}
 
@@ -83,7 +83,7 @@ You can customize the appearance of the container element within the autocomplet
 
 ## Customizing the dropdown icon’s color
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons/#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the autocomplete component, and setting the desired color to the `color` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons) color by targeting the `.e-ddl-icon.e-icons` selector and setting the desired value for the `color` property.
 
 {% highlight cshtml %}
 
@@ -95,7 +95,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 ## Customizing the focus color
 
-You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
+Customize the component’s color when focused by targeting the `.e-input-focus::after` selector (the input element when focused) and setting the desired `background` value.
 
 {% highlight cshtml %}
 
@@ -107,7 +107,7 @@ You can customize the component color when it is focused by targeting its CSS cl
 
 ## Customizing the outline theme's focus color
 
-You can customize the color of the autocomplete component when it is in a focused state and rendered with an outline theme,  by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
+Customize the focus appearance when using an outline theme by targeting the `e-outline` variant selectors for the input. Adjust the relevant focus styles (such as border or outline color) to achieve the desired effect.
 
 {% highlight cshtml %}
 
@@ -119,7 +119,7 @@ You can customize the color of the autocomplete component when it is in a focuse
 
 ## Customizing the background color of focus, hover, and active items
 
-You can customize the background color and text color of list items within the autocomplete component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties.
+Customize the background and text colors of list items when focused, active, or hovered by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the `background-color` and `color` properties as needed.
 
 {% highlight cshtml %}
 
@@ -131,7 +131,7 @@ You can customize the background color and text color of list items within the a
 
 ## Customizing the appearance of popup element
 
-You can customize the appearance of the popup element within the autocomplete component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.
+Customize the popup element within the AutoComplete by targeting the `.e-list-item.e-item-focus` selector (the list item when focused) and applying the desired styles to adjust the popup’s appearance.
 
 {% highlight cshtml %}
 
@@ -143,7 +143,7 @@ You can customize the appearance of the popup element within the autocomplete co
 
 ## Change the HTML attributes
 
-Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format.
+Add additional HTML attributes, such as styles and classes, to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property, which accepts any number of attributes in key–value pair format.
 
 {% highlight cshtml %}
 
@@ -151,13 +151,13 @@ Add the additional html attributes such as styles, class, and more to the root e
 
 {% endhighlight %}
 
-![Blazor AutoComplete with different font family](./images/style/blazor_autocomplete_html-attributes.png)
+![Blazor AutoComplete with a custom font family via HTMLAttributes](./images/style/blazor_autocomplete_html-attributes.png)
 
 ## Set the various font family for autocomplete elements
 
-The font-family of the autocomplete can be changed by overriding using the following selector. The overridden can be applied to specific component by adding a class name through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property.
+Change the font family by overriding the relevant selectors. To scope the override to a specific component instance, add a class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and target that class.
 
-In the following sample, the font family of the AutoComplete, ListItem text in AutoComplete and filterInput text are changed.
+In the following sample, the font family of the AutoComplete input, list item text, and filter input text is changed.
 
 {% highlight cshtml %}
 
@@ -165,13 +165,13 @@ In the following sample, the font family of the AutoComplete, ListItem text in A
 
 {% endhighlight %}
 
-![Blazor AutoComplete with different font family](./images/style/blazor_autocomplete_font-family.png)
+![Blazor AutoComplete with a different font family](./images/style/blazor_autocomplete_font-family.png)
 
 ## Show tooltip on list item
 
-You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the AutoComplete option, a tooltip appears with information about the hovered list item.
+This behavior can be achieved by integrating the Tooltip component so that when the mouse hovers over an AutoComplete option, a tooltip displays information about the hovered list item. For details, see the Tooltip component documentation.
 
-The following code demonstrates how to display a tooltip when hovering over the AutoComplete option.
+The following code demonstrates how to display a tooltip when hovering over an AutoComplete option.
 
 {% highlight cshtml %}
 
@@ -179,11 +179,11 @@ The following code demonstrates how to display a tooltip when hovering over the
 
 {% endhighlight %}
 
-![Blazor AutoComplete with tooltip](./images/style/blazor-autocomplete-tooltip.png)
+![Blazor AutoComplete showing a tooltip on list items](./images/style/blazor-autocomplete-tooltip.png)
 
 ## Customize selected item opacity
 
-In the following code , the CSS style that targets the `.e-list-item` class within the `.e-dropdownbase` class when it is in an active or active and hovered state. It sets the opacity property , which will make the elements appear transparent. This can be used to change the appearance of the autocomplete list items when they are in a certain state.
+In the following code, CSS targets the `.e-list-item` elements within `.e-dropdownbase` when in an active or active-and-hovered state, setting the `opacity` property to adjust visual prominence. This changes the appearance of AutoComplete list items in those states.
 
 {% highlight cshtml %}
 
@@ -191,7 +191,7 @@ In the following code , the CSS style that targets the `.e-list-item` class with
 
 {% endhighlight %}
 
-![Blazor AutoComplete with opacity style](./images/style/blazor_autocomplete_opacity-style.png)
+![Blazor AutoComplete with customized selected item opacity](./images/style/blazor_autocomplete_opacity-style.png)
 
 ## Customizing the height
 
@@ -205,11 +205,11 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Popup height](./images/style/blazor_autocomplete_height.png)
+![Blazor AutoComplete with a custom popup height](./images/style/blazor_autocomplete_height.png)
 
 ### Width of AutoComplete
 
-To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component's width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the width of the component.
+To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component’s width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_Width) property to change the width of the component.
 
 {% highlight cshtml %}
 
@@ -217,13 +217,13 @@ To customize the width of the popup alone, use the [PopupWidth](https://help.syn
 
 {% endhighlight %}
 
-![Blazor AutoComplete with Popup Width](./images/style/blazor_autocomplete_width-popup-width.png)
+![Blazor AutoComplete with a custom popup width](./images/style/blazor_autocomplete_width-popup-width.png)
 
 ## Disable specific items in AutoComplete
 
-Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific dropdown list component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property.
+Prevent some items in the popup list from being selected by disabling specific items for a particular component instance. This can be achieved by adding a custom class to the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDownList_2_CssClass) property and applying styles for that class.
 
-In the following code, a single list Item is hidden using js interop.
+In the following code, a single list item is disabled using JavaScript interop.
 
 {% tabs %}
 {% highlight razor %}
@@ -247,11 +247,11 @@ In the following code, a single list Item is hidden using js interop.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor AutoComplete with Popup Width](./images/style/blazor_autocomplete_disable-listitem.png)
+![Blazor AutoComplete with a disabled list item](./images/style/blazor_autocomplete_disable-listitem.png)
 
 ## Adding search icon in the Blazor AutoComplete component.
 
-You can add the search icon to the AutoComplete component by overriding the content of the existing icon. The following code demonstrates how to add a search icon to the AutoComplete component.
+Add a search icon to the AutoComplete by overriding the content of the existing icon. The following code demonstrates how to add a search icon.
 
 {% highlight cshtml %}
 
@@ -263,7 +263,7 @@ You can add the search icon to the AutoComplete component by overriding the cont
 
 ## Customizing the float label element's focusing color
 
-You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused and set the desired color using the `color` property.
+Change the text color of the floating label on focus by targeting `.e-input-focus` and `.e-float-text.e-label-top` (the focused floating label text) and setting the desired `color`.
 
 {% highlight cshtml %}
 
@@ -275,7 +275,7 @@ You can change the text color of the floating label when it is focused by target
 
 ## Customizing the color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the color of the placeholder by targeting `input.e-input::placeholder` (the placeholder text) and setting the desired `color`.
 
 {% highlight cshtml %}
 
@@ -287,7 +287,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 ## Customizing the placeholder to add mandatory indicator(*)
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+Apply a mandatory indicator `*` to the placeholder by targeting `.e-float-text::after` and using the `content` style.
 
 {% highlight cshtml %}
 
@@ -299,7 +299,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
 
 ## Customizing the text selection color
 
-The appearance of a selected item within a AutoComplete component can be customized by targeting the CSS class `input.e-input::selection` and set the desired background color and text color. This customization will only be applied when the item is selected manually. To achieve this, use the `background-color` and `color` properties of the CSS class `input.e-input::selection`.
+Customize the text selection appearance within the AutoComplete input by targeting `input.e-input::selection` and setting the desired `background-color` and `color`. This customization applies when text is selected manually.
 
 {% highlight cshtml %}
 
diff --git a/blazor/autocomplete/templates.md b/blazor/autocomplete/templates.md
index 3f8611f461..d813bda0fc 100644
--- a/blazor/autocomplete/templates.md
+++ b/blazor/autocomplete/templates.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Templates in Blazor AutoComplete Component
 
-The AutoComplete has been provided with several options to customize each list items, group title, header, and footer elements.
+The AutoComplete provides multiple template options to customize each list item, group header, header, footer, and empty/error states in the popup.
 
 ## Item template
 
-The content of each list item within the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) can be customized with the help of [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
+The content of each list item within the [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) can be customized using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
 
 In the following sample, each list item is split into two columns to display relevant data.
 
@@ -27,7 +27,7 @@ In the following sample, each list item is split into two columns to display rel
 
 ## Group template
 
-The group header title under which appropriate sub-items are categorized can also be customized with the help of [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group header templates.
+The group header title under which sub-items are categorized can be customized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template applies to both inline and floating group headers.
 
 In the following sample, employees are grouped according to their country.
 
@@ -41,9 +41,9 @@ In the following sample, employees are grouped according to their country.
 
 ## Header template
 
-The header element is shown statically at the top of the suggestion list items within the AutoComplete, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
+The header element remains fixed at the top of the suggestion list and can host any custom content using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
 
-In the following sample, the list items and its headers are designed and displayed as two columns similar to multiple columns of the grid.
+In the following sample, the list items and their headers are designed and displayed as two columns similar to multiple columns in a grid.
 
 {% highlight cshtml %}
 
@@ -55,9 +55,9 @@ In the following sample, the list items and its headers are designed and display
 
 ## Footer template
 
-The AutoComplete has options to show a footer element at the bottom of the list items in the suggestion list. Here, you can place any custom element as a footer element using [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property.
+The AutoComplete can show a footer element at the bottom of the suggestion list. Place any custom content as a footer using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property.
 
-In the following sample, footer element displays the total number of list items present in the AutoComplete.
+In the following sample, the footer displays the total number of list items present in the AutoComplete.
 
 {% highlight cshtml %}
 
@@ -69,9 +69,9 @@ In the following sample, footer element displays the total number of list items
 
 ## No records template
 
-The AutoComplete is provided with support to custom design the suggestion list content when no data is found and no matches found on search with the help of the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
+Customize the popup content shown when no data is available or no matches are found during search using the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
 
-In the following sample, suggestion list content displays the notification of no data available.
+In the following sample, the suggestion list displays a notification when no data is available.
 
 {% highlight cshtml %}
 
@@ -83,9 +83,9 @@ In the following sample, suggestion list content displays the notification of no
 
 ## Action failure template
 
-There is also an option to custom design the suggestion list content when the data fetch request fails at the remote server. This can be achieved using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
+Customize the popup content shown when a data fetch request fails at the remote server using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
 
-In the following sample, when the data fetch request fails, the AutoComplete displays the notification.
+In the following sample, when the data fetch request fails, the AutoComplete displays a notification.
 
 {% highlight cshtml %}
 
diff --git a/blazor/autocomplete/value-binding.md b/blazor/autocomplete/value-binding.md
index 3350eb32a0..4b39565ec4 100644
--- a/blazor/autocomplete/value-binding.md
+++ b/blazor/autocomplete/value-binding.md
@@ -16,7 +16,7 @@ Value binding is the process of passing values between a component and its paren
 
 ## Bind value binding
 
-The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value)
+The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value)
 
 * **TValue** - Specifies the type of each list item on the suggestion list.
 
@@ -30,7 +30,7 @@ The value binding can be achieved by using the [@bind-Value](https://help.syncfu
 
 ## Index value binding
 
-The Index value binding is achieved by using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index.
+Bind the selected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Index) attribute, which supports `int` and nullable `int`. This binds to the zero-based index of the selected item.
 
 {% highlight cshtml %}
 
@@ -42,7 +42,7 @@ The Index value binding is achieved by using the [@bind-Index](https://help.sync
 
 ## Value field
 
-The AutoComplete [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) property point to the corresponding names of the model. The `AutoCompleteFieldSettings.Value` mapped to the component maintains the unique value of the item in the data source, and display the text in the popup list items.
+The [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value) property points to the field in the data model that represents the value of each item. The mapped value identifies the item to select; the display text appears in the popup list.
 
 {% highlight cshtml %}
 
@@ -54,9 +54,9 @@ The AutoComplete [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/c
 
 ## Primitive type binding
 
-The AutoComplete has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the AutoComplete 
+Bind arrays of primitive data (strings or numbers) to the AutoComplete and use [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value) for selection. For primitive lists, field settings can be inferred or set explicitly.
 
-The following code demonstrates array of string as datasource to the AutoComplete component.
+The following code demonstrates an array of strings as the data source.
 
 {% highlight cshtml %}
 
@@ -66,7 +66,7 @@ The following code demonstrates array of string as datasource to the AutoComplet
 
 ![Blazor AutoComplete with Primitive Type as string](./images/value-binding/blazor-autocomplete-primitive-type-string.png)
 
-The following code demonstrates array of int as datasource to the AutoComplete component.
+The following code demonstrates an array of integers as the data source.
 
 {% highlight cshtml %}
 
@@ -78,9 +78,9 @@ The following code demonstrates array of int as datasource to the AutoComplete c
 
 ## Object binding
 
-Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropdownList component, this is, You can map the class name to `TValue`. 
+Bind object data to the AutoComplete’s [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value) and map the class appropriately to `TValue`.
 
-In the following example, the `Name` column has been mapped to the [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value).
+In the following example, the `Name` field is mapped to [AutoCompleteFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_Value).
 
 {% highlight cshtml %}
 
@@ -92,7 +92,7 @@ In the following example, the `Name` column has been mapped to the [AutoComplete
 
 ## Enum binding
 
-Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of AutoComplete component. The following code helps you to get a string value from the enumeration data.
+Bind enum data to the AutoComplete with [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_Value). The following example shows how to obtain a string value from enumeration data.
 
 {% highlight cshtml %}
 
@@ -108,7 +108,7 @@ Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)
 
-The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type.
+The following sample demonstrates the `string` used as `TValue`. So, clear the value using the clear button, it will be set to null as it's the default value of the respective type.
 
 {% highlight cshtml %}
 
@@ -148,14 +148,14 @@ First, create a `AutoComplete.razor` file as a parent component in the `/Pages`
     public EventCallback<TValue> SelectedValueChanged { get; set; }
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ### Usage of generic component with different type
 
-Then, render the Generic AutoComplete component with the required `TValue` and `TItem` in the respective razor components. 
+Render the generic AutoComplete component with the required `TValue` and `TItem` in the corresponding Razor components.
 
-Here, the AutoComplete component is rendered with the TValue as a string type in the `/Index.razor` file and the AutoComplete component with TValue as an int nullable type in the `/Counter.razor` file.
+Here, the AutoComplete component uses `TValue` as `string` in `/Index.razor` and `TValue` as nullable `int` in `/Counter.razor`.
 
 **[Index.razor]**
 
@@ -186,14 +186,13 @@ Here, the AutoComplete component is rendered with the TValue as a string type in
     };
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 **[Counter.razor]**
 
 {% tabs %}
 {% highlight razor %}
-    
 
 <AutoComplete TValue="int?" TItem="ZipCode" @bind-SelectedValue="@value" DataList="@LocalData">
 </AutoComplete>
@@ -213,12 +212,12 @@ Here, the AutoComplete component is rendered with the TValue as a string type in
         };
     }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ## Two way binding
 
-Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component, you can use the @bind-Value directive to bind the value of the AutoComplete
+Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor AutoComplete component, Use the @bind-Value directive to bind the value of the AutoComplete
 
 {% highlight cshtml %}
 
@@ -230,7 +229,7 @@ Two-way is having a bi-directional data flow, i.e., passing the value from the p
 
 ## Programmatically clearing value
 
-You can clear the value programmatically by accessing the [ClearAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ClearAsync) method through an instance of the AutoComplete. You can bind the click event of a button to the `ClearAsync()` method. When the button is clicked, it will trigger the `ClearAsync()` method on the AutoComplete, clearing its value.
+Clear the value programmatically by calling [ClearAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html#Syncfusion_Blazor_DropDowns_SfAutoComplete_2_ClearAsync) on a component instance reference. For example, bind a button click to invoke `ClearAsync()` and reset the control’s value.
 
 {% highlight Razor %}
 
@@ -238,4 +237,4 @@ You can clear the value programmatically by accessing the [ClearAsync()](https:/
 
 {% endhighlight %} 
 
-![Blazor AutoComplete with clear button](./images/value-binding/blazor-autocomplete-clearAsync-method.gif)
+![Blazor AutoComplete with clear button](./images/value-binding/blazor-autocomplete-clearAsync-method.gif)
\ No newline at end of file
diff --git a/blazor/autocomplete/virtualization.md b/blazor/autocomplete/virtualization.md
index 55741d0a91..1adcd9d608 100644
--- a/blazor/autocomplete/virtualization.md
+++ b/blazor/autocomplete/virtualization.md
@@ -9,9 +9,11 @@ documentation: ug
 
 # Virtualization in Blazor AutoComplete Component
 
-The AutoComplete component includes a virtual scrolling feature designed to enhance UI performance, particularly for handling large datasets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization) option, the AutoComplete intelligently manages data rendering, ensuring only a subset of items is initially loaded when the component is rendered. As you interact with the dropdown, additional items are dynamically loaded as you scroll, creating a smooth and efficient user experience.
+The AutoComplete component includes a virtual scrolling feature designed to enhance UI performance when handling large data sets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization) option, the component renders only a window of items initially and loads additional items on demand as scroll, providing a smooth and efficient experience.
 
-This feature is applicable to both local and remote data scenarios, providing flexibility in its implementation. For instance, consider a case where the AutoComplete is bound to a dataset containing 150 items. Upon opening the dropdown, only a few items are loaded initially, based on the height of the popup. As you scroll through the list, additional items are fetched and loaded on-demand, allowing you to effortlessly explore the complete dataset.
+This feature applies to both local and remote data sources. For example, when the AutoComplete is bound to 150 items, only the items that fit within the popup height are rendered when the dropdown opens. As scroll through the list, more items are fetched and rendered incrementally, enabling efficient exploration of the entire data set.
+
+N> Virtualization accuracy depends on consistent item heights. Using templates that significantly change item height may affect the calculation of rendered items. The number of initially rendered items is based on the configured PopupHeight.
 
 ## Local data
 
@@ -31,11 +33,11 @@ This feature is applicable to both local and remote data scenarios, providing fl
 
 {% endhighlight %}
 
-![Blazor AutoComplete with virtualization](./images/blazor_autocomplete_remote-data-virtualization.gif)
+![Blazor AutoComplete demonstrating virtualization with remote data](./images/blazor_autocomplete_remote-data-virtualization.gif)
 
 ## Grouping with Virtualization
 
-The AutoComplete component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
+The AutoComplete component supports grouping with Virtualization. It allows elements to be organized into categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy) field in the data source. After grouping, virtualization behaves similarly to local data binding, providing a seamless user experience. When the data source is remote, an initial request retrieves the data required for grouping. Subsequently, grouped data is handled like local data binding with virtualization, improving performance and responsiveness.
 
 The following sample shows the example for Grouping with Virtualization.
 
@@ -88,11 +90,11 @@ The following sample shows the example for Grouping with Virtualization.
 
 ## Keyboard interaction
 
-Users can navigate through the scrollable content using keyboard keys. This feature loads the next or next set of items based on the key inputs in the popup.
+Users can navigate through the scrollable content using the keyboard. The component loads the next or previous set of items based on the key inputs within the popup.
 
 | Key | Action |
 |-----|-----|
-| `ArrowDown` | Loads the next virtual list item if the focus is present in last item of the current page. |
-| `ArrowUp` | Loads the previous virtual list item if the focus is present in first item of the current page. |
-| `PageDown` | Loads the next page and focus the last item in it. |
-| `PageUp` | Loads the previous page and focus the first item in it. |
+| `ArrowDown` | Loads the next virtual list item when focus is on the last item of the current page. |
+| `ArrowUp` | Loads the previous virtual list item when focus is on the first item of the current page. |
+| `PageDown` | Loads the next page and moves focus to its last item. |
+| `PageUp` | Loads the previous page and moves focus to its first item. |
\ No newline at end of file
diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md
index 21365d1dd1..6c729647d7 100644
--- a/blazor/avatar/getting-started-with-web-app.md
+++ b/blazor/avatar/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Avatar Component in Blazor Web App
 
-This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Avatar](https://blazo
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
 
-To add **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -41,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in the [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -53,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -69,15 +71,13 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) NuGet package and ensure all dependencies are installed.
+* Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet package and ensure all dependencies are installed.
 
 {% tabs %}
 
@@ -90,7 +90,60 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Avatar** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
 
 {% endtabcontent %}
 
@@ -111,16 +164,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -158,7 +210,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Avatar component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Avatar Component](./images/blazor-avatar-component.png)" %}
 
diff --git a/blazor/avatar/images/blazor-create-web-app.png b/blazor/avatar/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/avatar/images/blazor-create-web-app.png differ
diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md
index 5471546568..f18e9de8fc 100644
--- a/blazor/badge/getting-started-with-web-app.md
+++ b/blazor/badge/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Badge Component in Blazor Web App
 
-This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [`Blazor Badge`](https://blaz
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
 
-To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -41,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in the [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -53,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -69,15 +71,13 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) NuGet package and ensure all dependencies are installed.
+* Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet package and ensure all dependencies are installed.
 
 {% tabs %}
 
@@ -90,7 +90,60 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% tabcontent .NET CLI %}
+
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Avatar** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in the [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
 
 {% endtabcontent %}
 
@@ -111,16 +164,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Badge component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Badge component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Badge component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -139,7 +191,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Badge component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Badge component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %}
 
diff --git a/blazor/badge/images/blazor-create-web-app.png b/blazor/badge/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/badge/images/blazor-create-web-app.png differ
diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md
index 50ffd956fa..d249f8071c 100644
--- a/blazor/barcode/getting-started-with-web-app.md
+++ b/blazor/barcode/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Barcode Component in Blazor Web App
 
-This section explains how to include the [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This section explains how to include the [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section explains how to include the [Blazor Barcode](https://www.syncfusion
 
 ## Create a new Blazor Web App in Visual Studio
 
-Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating the Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BarcodeGenerator and Themes NuGet in the App
 
-To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If using the `WebAssembly or Auto` render modes in a Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, use the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in the [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating the Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information about creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BarcodeGenerator and Themes NuGet in the App
 
-If using the `WebAssembly` or `Auto` render modes in a Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure the terminal is opened at the project directory containing the .csproj file.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BarcodeGenerator and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Barcode** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.BarcodeGenerator --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespac
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of the Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Barcode component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Barcode component in a **~Pages/.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Barcode component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/barcode/images/blazor-create-web-app.png b/blazor/barcode/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/barcode/images/blazor-create-web-app.png differ
diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md
index 5a39572e75..197482770f 100644
--- a/blazor/breadcrumb/getting-started-with-web-app.md
+++ b/blazor/breadcrumb/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Breadcrumb in Blazor Web App
 
-This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-breadcrumb) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Breadcrumb](https://w
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-To add **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Breadcrumb** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Breadcrumb** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Navigations --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
diff --git a/blazor/breadcrumb/images/blazor-create-web-app.png b/blazor/breadcrumb/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-create-web-app.png differ
diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md
index 17713a6bc7..422c4955d3 100644
--- a/blazor/bullet-chart/getting-started-with-web-app.md
+++ b/blazor/bullet-chart/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor BulletChart in Blazor Web App
 
-This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Bullet Chart](https:/
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart NuGet in the App
 
-To add **Blazor Bullet Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart).
+To add the **Blazor Bullet Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -41,7 +43,7 @@ Install-Package Syncfusion.Blazor.BulletChart -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -53,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -69,11 +71,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BulletChart and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BulletChart NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -90,20 +90,68 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor BulletChart NuGet in the App
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace.
+Here's an example of how to add the **Blazor Bullet Chart** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.BulletChart --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -114,9 +162,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -150,27 +200,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add script resources
 
 The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference at the end of the `<body>` in the ~/Components/App.razor file as shown below:
@@ -186,16 +215,15 @@ N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documen
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -227,7 +255,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Bullet Chart component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.png)" %}
 
diff --git a/blazor/bullet-chart/images/blazor-create-web-app.png b/blazor/bullet-chart/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/bullet-chart/images/blazor-create-web-app.png differ
diff --git a/blazor/button-group/getting-started-with-web-app.md b/blazor/button-group/getting-started-with-web-app.md
index af1d497730..665dcc439f 100644
--- a/blazor/button-group/getting-started-with-web-app.md
+++ b/blazor/button-group/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ButtonGroup in Blazor Web App
 
-This section briefly explains about how to include `Blazor ButtonGroup` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ButtonGroup](https://www.syncfusion.com/blazor-components/blazor-button-group) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include `Blazor ButtonGroup` componen
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-To add **Blazor ButtonGroup** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ButtonGroup** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor ButtonGroup** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.SplitButtons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ButtonGroup component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ButtonGroup component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ButtonGroup component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -225,7 +254,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ButtonGroup component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ButtonGroup component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVftihITUHgzQAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup Component](./images/blazor-button-group-component.png)" %}
 
diff --git a/blazor/button-group/images/blazor-create-web-app.png b/blazor/button-group/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/button-group/images/blazor-create-web-app.png differ
diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md
index 2bb14059a5..ab969480be 100644
--- a/blazor/button/getting-started-with-web-app.md
+++ b/blazor/button/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Button Component in Blazor Web App
 
-This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Button](https://www.s
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Button** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Button component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Button component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Button component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Button component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Button component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLftsrepgKpagFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component](./images/blazor-button-component.png)" %}
 
diff --git a/blazor/button/images/blazor-create-web-app.png b/blazor/button/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/button/images/blazor-create-web-app.png differ
diff --git a/blazor/calendar/accessibility.md b/blazor/calendar/accessibility.md
index 93fe1f6adb..6ef2f265ec 100644
--- a/blazor/calendar/accessibility.md
+++ b/blazor/calendar/accessibility.md
@@ -9,22 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor Calendar Component
 
-The web accessibility makes web content and web applications more accessible for disabled people. It especially helps in dynamic content change and development of advanced user interface components with AJAX, HTML, JavaScript, and related technologies.
-
-The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor Calendar component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial support"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial support"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
 
 <style>
     .post .post-content img {
@@ -32,11 +30,11 @@ The accessibility compliance for the Blazor Calendar component is outlined below
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial support"> - Some features of the component do not fully meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes 
 
diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md
index 0e808923b0..6cf50cb69f 100644
--- a/blazor/calendar/calendar-views.md
+++ b/blazor/calendar/calendar-views.md
@@ -19,7 +19,7 @@ A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar
 
 ## Set the initial view
 
-When view is defined to the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property of the Calendar, it allows you to set the initial view on rendering.
+Use the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Start) property to set the initial (top) view when the Calendar renders. The Start view also acts as the upper limit for drill-up navigation.
 
 The following example demonstrates how to set the `Year` as the start view of the Calendar.
 
@@ -37,11 +37,11 @@ The following example demonstrates how to set the `Year` as the start view of th
 
 ## View restriction
 
-By defining the Start and Depth property with the different view, drill-down and drill-up views navigation can be limited to the users. Calendar views will be drill-down upto the view which is set in [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill-up upto the view which is set in [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property.
+By defining the Start and Depth property with different views, drill-down and drill-up navigation can be limited. Calendar views will drill down to the view set in the [Depth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Depth) property and drill up to the view set in the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. Start represents a broader view and Depth represents a more detailed view within the hierarchy (Month < Year < Decade).
 
-The following example displays the Calendar in `Decade` view, and allows you to select a date in `Month` view.
+The following example displays the Calendar in `Decade` view and allows selecting a date by drilling down to the `Month` view.
 
-N> Depth view should always be smaller than the Start view. If the `Depth` and `Start` views are the same, then the Calendar view remains unchanged.
+N> The Depth view must be “smaller” (more detailed) than the Start view. If the `Depth` and `Start` views are the same, the Calendar view remains unchanged and navigation between views is disabled.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -54,4 +54,4 @@ N> Depth view should always be smaller than the Start view. If the `Depth` and `
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %}
diff --git a/blazor/calendar/data-binding.md b/blazor/calendar/data-binding.md
index a71ca7be95..7df19308e1 100644
--- a/blazor/calendar/data-binding.md
+++ b/blazor/calendar/data-binding.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Data Binding in Blazor Calendar Component
 
-This section briefly explains how to bind the value to the Calendar component in the below different ways.
+This section explains how to bind a value to the Calendar component in the following ways:
 
 * One-Way Data Binding
 * Two-Way Data Binding
@@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the Calendar component in
 
 ## One-Way Binding
 
-You can bind the value to the Calendar component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue").
+In one-way binding, Bind the value to the Calendar component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue").
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -39,7 +39,7 @@ You can bind the value to the Calendar component directly for `Value` property a
 
 ## Two-Way data binding
 
-Two-way binding can be achieved by using `bind-Value` attribute and it supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all the places where the variable is bound for the **bind-value** attribute.
+Use `@bind-Value` to keep the Calendar and your data source in sync. The bound field should be `DateTime` or `DateTime?`. When the component value changes, the bound variable updates automatically, and when the variable changes, the component reflects the new value.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -56,9 +56,10 @@ public DateTime? DateValue { get; set; } = DateTime.Now;
 
 ## Dynamic value binding
 
-You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor Calendar component** only. This method notifies the component that its state has changed and queues a re-render.
+Change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor Calendar component** only. This method notifies the component that its state has changed and queues a re-render.
 
-There is no need to call this method for native events since it’s called after any lifecycle method has been called. It can also be invoked manually to trigger a re-render. Refer the below mentioned code example.
+
+There is no need to call this method for native events since it is called after any lifecycle method has been called. It can also be invoked manually to trigger a re-render. Refer to the following example.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md
index b8f782c846..bfc93e7ce1 100644
--- a/blazor/calendar/date-range.md
+++ b/blazor/calendar/date-range.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Date Range in Blazor Calendar Component
 
-A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. The Min date should always be lesser than the Max date.
+A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. The range is inclusive (Min and Max are selectable), and Min must be less than or equal to Max. The Calendar is date-based; time components of DateTime are ignored when evaluating the range.
 
 * If the value of `Min` or `Max` properties are changed through code behind, then update the `Value` property to be set within the  specified range.
 
@@ -29,4 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %}
diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md
index e5448fb521..413d5018a2 100644
--- a/blazor/calendar/dateonly-support.md
+++ b/blazor/calendar/dateonly-support.md
@@ -9,9 +9,11 @@ documentation: ug
 
 # DateOnly Support in Blazor Calendar Component
 
-The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type is a new type in .NET 6 that allows you to represent a date without a time component. To use it with the Blazor Calendar component, set the type parameter to `DateOnly`.
+The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-7.0) type represents a date without a time component. To use it with the Blazor Calendar component, set the generic type parameter (TValue) to `DateOnly` or `DateOnly?`. In this mode, selection and binding operate only on the date portion.
 
-> Blazor Calendar Component supports `DateOnly` type in .NET 7 and above version only, even though it introduced in .NET 6 itself due to serialization problem.
+> The Blazor Calendar component supports `DateOnly` starting with .NET 7 and later. Although `DateOnly` was introduced in .NET 6, serialization and interoperability limitations in .NET 6 prevent reliable usage in Blazor scenarios.
+
+The following example demonstrates configuring the Calendar with `TValue=DateOnly` and binding a date-only value.
 
 {% highlight Razor %}
 
@@ -19,4 +21,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %}
diff --git a/blazor/calendar/events.md b/blazor/calendar/events.md
index 85d2cd55ac..65c86bfb28 100644
--- a/blazor/calendar/events.md
+++ b/blazor/calendar/events.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Events in Blazor Calendar Component
 
-This section explains the list of events of the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component which will be triggered for appropriate Calendar actions.
+This section lists the events of the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component and describes when they are triggered during user interaction and rendering.
 
-N> From `v17.2.*` added only the limited number of events for the Calendar component. The event names are different from the previous releases and also removed several events. The following are the event name changes from `v17.1.*` to `v17.2.*`
+N> Starting with `v17.2.*`, only a limited set of events are available for the Calendar component. Event names differ from previous releases, and several events were removed. The following table summarizes event name changes from `v17.1.*` to `v17.2.*`.
 
 Event Name(`v17.1.*`) |Event Name(`v17.2.*`)
 -----|-----
@@ -20,7 +20,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## OnRenderDayCell
 
-`onRenderDayCellHandler` event triggers when each day cell of the Calendar is rendered.
+The `OnRenderDayCell` event is triggered as each day cell is rendered, enabling customization of cell content and state.  
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -40,7 +40,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## ValueChange
 
-`ValueChange` event triggers when the Calendar value is changed.
+The `ValueChange` event is triggered after the selected date value changes in the Calendar.  
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -60,7 +60,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Created
 
-`Created` event triggers when Calendar is created.
+The `Created` event is triggered after the Calendar is initialized and rendered.  
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -80,7 +80,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Destroyed
 
-`OnOpen` event triggers when Calendar is destroyed.
+The `Destroyed` event is triggered when the Calendar is disposed.  
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -100,7 +100,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Navigated
 
-`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view.
+The `Navigated` event is triggered after navigating to another view level or within the same level (for example, changing month, year, or decade).  
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -118,4 +118,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 }
 ```
 
-N> Calendar will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
+N> The Calendar is currently limited to these events. Additional events may be introduced in future versions based on user feedback. If a required event is missing, submit a request on the Syncfusion feedback portal: [Request a feature](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md
index c3dacb843e..ababfebddb 100644
--- a/blazor/calendar/getting-started-with-web-app.md
+++ b/blazor/calendar/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Calendar Component in Web App
 
-This section briefly explains about how to include [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Calendar](https://www
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the Blazor Web App
 
-To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Calendar** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at end of the `<body>` section in **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor Calendar component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.png)" %}
 
@@ -232,6 +261,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar.
+N> Explore the [Blazor Calendar example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) to learn how to render and configure the Calendar.
 
 
diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md
index 503b99c247..42dcc530b8 100644
--- a/blazor/calendar/getting-started.md
+++ b/blazor/calendar/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor Calendar Component
 
-This section briefly explains about how to include [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This guide shows how to add the [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code. It targets modern .NET and Blazor WebAssembly tooling.
 
-To get start quickly with Blazor Calendar component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar) sample.
+To get started quickly with the Blazor Calendar component, refer to the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=PbmIW_tWzVo"%}
@@ -26,11 +26,11 @@ To get start quickly with Blazor Calendar component, you can check on this video
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Calendar** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). Alternatively, run the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>):
 
 {% tabs %}
 
@@ -70,9 +70,9 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure you are in the project root directory where the `.csproj` file is located.
+- Run the following commands to install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies:
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available packages.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **~/Program.cs** for your Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -129,7 +129,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of **~/index.html**:
 
 ```html
 <head>
@@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for available themes and reference methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Blazor Calendar component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component to **~/Pages/Index.razor**:
 
 {% tabs %}
 {% highlight razor %}
@@ -152,15 +152,15 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar compone
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in your default web browser.
+- Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component renders in your default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.png)" %}
 
 ## Setting the Value, Min, and Max dates
 
-Calendar component provides an option to select a date value within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. Also, you can set a date value within specific range using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. For more information, you can refer to the [Date Range](./date-range) section.
+The Calendar component provides an option to select a date within a specified range by defining the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max) properties. You can also set a date value within a specific range using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html) property. For more information, refer to the [Date Range](./date-range) section. Min and Max are inclusive boundaries; out-of-range dates are disabled.
 
-Here, the Calendar allows you to select a date within the range from 5th to 27th of this month. `TValue` specifies the type of the DatePicker component.
+Here, the Calendar allows selecting a date from the 5th to the 27th of the current month. `TValue` specifies the type of the Calendar component.
 
 {% tabs %}
 {% highlight razor %}
@@ -183,4 +183,4 @@ Here, the Calendar allows you to select a date within the range from 5th to 27th
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Calendar.
+N> Explore the [Blazor Calendar Example](https://blazor.syncfusion.com/demos/calendar/default-functionalities?theme=bootstrap5) that shows how to render and configure the Calendar.
\ No newline at end of file
diff --git a/blazor/calendar/globalization.md b/blazor/calendar/globalization.md
index 506504753e..dad67fadf7 100644
--- a/blazor/calendar/globalization.md
+++ b/blazor/calendar/globalization.md
@@ -13,7 +13,7 @@ documentation: ug
 
 ## Right-To-Left
 
-The Calendar supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_EnableRtl) property to set the RTL direction.
+The Calendar supports right-to-left (RTL) layout for languages like Arabic and Hebrew. RTL is not implied by Locale; explicitly set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_EnableRtl) property to true to render the component in RTL.
 
 The following code example initializes the Calendar component in `Arabic` culture.
 
@@ -34,4 +34,4 @@ The following code example initializes the Calendar component in `Arabic` cultur
 ```
 
 
-![Right to Left in Blazor Calendar](./images/blazor-calendar-right-to-left.png)
\ No newline at end of file
+![Right to left in Blazor Calendar](./images/blazor-calendar-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md
index 90a9650277..9ba70b1e4e 100644
--- a/blazor/calendar/how-to/change-the-first-day-of-week.md
+++ b/blazor/calendar/how-to/change-the-first-day-of-week.md
@@ -11,7 +11,7 @@ documentation: ug
 
 The Calendar provides an option to change the first day of the week by using the [FirstDayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_FirstDayOfWeek) property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday).
 
-N> By default, the first day of the week is culture specific.
+N> By default, the first day of the week is based on the current UI culture.
 
 The following code shows the Calendar with `Tuesday` as the first day of the week.
 
diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
index 681b3325c1..4355a116c8 100644
--- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
+++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
@@ -9,6 +9,8 @@ documentation: ug
 
 # Week Number in Blazor Calendar Component
 
+Enable week numbers in the Blazor Calendar to display a leading column with the week number for each row. Week numbering behavior is influenced by the WeekRule setting and the first day of the week (culture-specific by default or overridden via FirstDayOfWeek).
+
 You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property.
 
 ```cshtml
@@ -16,11 +18,13 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he
 
 <SfCalendar TValue="DateTime?" WeekNumber=true></SfCalendar>
 ```
+This example shows the Calendar displaying a week number column at the left.
+
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.png)" %}
 
 ## Week rule
 
-You can enable `WeekRule` in the Calendar by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provides an option to specify the rule for defining the first week of the year. Find the possible values of the `WeekRule` property.
+Configure how the first week of the year is determined by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property (aligned with .NET CalendarWeekRule semantics). The following values are supported:
 
 Types  |Description  
 -----|-----
@@ -29,8 +33,11 @@ FirstFullWeek |Set the first week of the year's week number to be started from 5
 FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53.
 
 
-![Blazor Calendar displays Week Rule of FirstDay](../images/blazor-calendar-first-day.png)
+![Blazor Calendar with WeekRule set to FirstDay](../images/blazor-calendar-first-day.png)
+Week numbers shown when the FirstDay rule is applied.
 
-![Blazor Calendar displays Week Rule of FirstFullWeek](../images/blazor-calendar-first-full-week.png)
+![Blazor Calendar with WeekRule set to FirstFullWeek](../images/blazor-calendar-first-full-week.png)
+Week numbers shown when the FirstFullWeek rule is applied.
 
-![Blazor Calendar displays Week Rule of FirstFourDayWeek](../images/blazor-calendar-first-four-Day-Week.png)
\ No newline at end of file
+![Blazor Calendar with WeekRule set to FirstFourDayWeek](../images/blazor-calendar-first-four-Day-Week.png)
+Week numbers shown when the FirstFourDayWeek rule is applied.
\ No newline at end of file
diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md
index 47892e8d35..ff6f046006 100644
--- a/blazor/calendar/how-to/show-dates-of-other-months.md
+++ b/blazor/calendar/how-to/show-dates-of-other-months.md
@@ -9,6 +9,8 @@ documentation: ug
 
 # Show Dates of Other Months in Blazor Calendar Component
 
+By default, the Blazor Calendar hides dates that belong to adjacent months in month view. The following approach uses a CSS override to make out-of-month dates visible and clickable, enabling users to navigate and select those days directly. Existing rules such as min/max and disabled dates continue to apply.
+
 The following code demonstrates how to show dates of other months. Using the styles below, you can bring the dates of other months to visibility from its hidden state.
 
 ```cshtml
@@ -32,4 +34,4 @@ The following code demonstrates how to show dates of other months. Using the sty
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %}
diff --git a/blazor/calendar/images/blazor-create-web-app.png b/blazor/calendar/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/calendar/images/blazor-create-web-app.png differ
diff --git a/blazor/calendar/islamic-calendar.md b/blazor/calendar/islamic-calendar.md
index 69f42c414d..a2fbbf5d68 100644
--- a/blazor/calendar/islamic-calendar.md
+++ b/blazor/calendar/islamic-calendar.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Islamic Calendar in Blazor Calendar Component
 
-In addition to the Gregorian calendar, the Calendar control supports displaying the Islamic calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can select a date from the Islamic calendar.To display the Islamic calendar, set the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_CalendarMode) property to CalendarType.Islamic. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates.
+In addition to the Gregorian calendar, the Blazor Calendar component supports displaying the Islamic (Hijri) calendar. The Hijri calendar is a lunar calendar with 12 months and 354 or 355 days per year. To render the Islamic calendar, set the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_CalendarMode) property to CalendarType.Islamic. This switches the calendar system used for display and selection.
 
 
 Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.By default, calendar mode is in Gregorian.
 
-The following example demonstrates how to display the Islamic Calendar (Hijri Calendar).
+The following example demonstrates how to display the Islamic calendar (Hijri calendar).
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/Islamic-Calendar.razor %}
 
-{% endhighlight %} 
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md
index cdb767c883..42ab28aba1 100644
--- a/blazor/calendar/multi-select.md
+++ b/blazor/calendar/multi-select.md
@@ -11,7 +11,7 @@ documentation: ug
 
 A [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) provides an option to select **single** or **multiple dates** by using the [IsMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_IsMultiSelection) properties. By default, the IsMultiSelection property will be in disabled state.
 
-The following code demonstrates the functionality of IsMultiSelection and Values properties in the Calendar component.
+The following code demonstrates enabling multi-selection and preselecting multiple dates using the IsMultiSelection and Values properties.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md
index 863331a1a1..cd2b850d72 100644
--- a/blazor/calendar/special-dates.md
+++ b/blazor/calendar/special-dates.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Special Dates in Blazor Calendar Component
 
-You can customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in the calendar. Here, list of dates in the current month are customized with custom styles by adding the personal-appointment and official-appointment class.
+Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) by handling the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) event. This event fires for each day cell as it is created, allowing the addition of CSS classes and, if needed, disabling particular dates. The following example highlights two sets of days in the current month with custom styles using the personal-appointment and official-appointment classes, and updates a label on selection via ValueChange.
 
 ```cshtml
 
diff --git a/blazor/calendar/style-appearance.md b/blazor/calendar/style-appearance.md
index e2b211220e..32be860a53 100644
--- a/blazor/calendar/style-appearance.md
+++ b/blazor/calendar/style-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and appearance in Blazor Calendar Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content shows the Calendar’s CSS structure that can be overridden to change the component’s appearance based on user preferences. These examples are theme-agnostic overrides; depending on the selected theme, additional selector specificity may be required.
 
 ## Customizing the background color for the Calendar
 
-Use the following CSS to customize the background color and border for the Calendar.
+Use the following CSS to customize the Calendar container’s background color and border. This affects the overall widget surface.
 
 ```css
 /* To specify background color and border */
@@ -25,7 +25,7 @@ Use the following CSS to customize the background color and border for the Calen
 
 ## Customizing the Calendar date elements on hovering
 
-Use the following CSS to customize the date elements on hovering in the Calendar.
+Use the following CSS to customize day cells on hover and focus states in the Calendar’s month view. This helps emphasize interactive feedback.
 
 ```css
 /* To specify background color, color, and border */
@@ -38,7 +38,7 @@ Use the following CSS to customize the date elements on hovering in the Calendar
 
 ## Customizing the border of date cell grid
 
-Use the following CSS to add the border to the date cell grid.
+Use the following CSS to add borders around individual day cells in the month grid for clearer separation.
 
 ```css
 /* To specify border */
@@ -49,7 +49,7 @@ Use the following CSS to add the border to the date cell grid.
 
 ## Customizing the Calendar title
 
-Use the following CSS to customize the Calendar title.
+Use the following CSS to style the Calendar title (month/year text) in the header.
 
 ```css
 /* To specify color and font size  */
@@ -61,7 +61,7 @@ Use the following CSS to customize the Calendar title.
 
 ## Customizing the previous and next icon
 
-Use the following CSS to customize the previous and next icon.
+Use the following CSS to customize the appearance of the previous and next navigation icons in the header.
 
 ```css
 /* To specify color and border  */
@@ -73,7 +73,7 @@ Use the following CSS to customize the previous and next icon.
 
 ## Customizing the footer button
 
-Use the following CSS to customize the footer button.
+Use the following CSS to customize the Today footer button’s background, text color, and border color (when the button is visible).
 
 ```css
 /* To specify background color, color, and border-color  */
@@ -86,7 +86,7 @@ Use the following CSS to customize the footer button.
 
 ## Customizing the selected date cell grid
 
-Use the following CSS to customize the selected date cell grid in Calendar.
+Use the following CSS to style the currently selected day cell in the Calendar for stronger visual emphasis.
 
 ```css
 /* To specify background color and color  */
@@ -98,7 +98,7 @@ Use the following CSS to customize the selected date cell grid in Calendar.
 
 ## Customizing the content header in Calendar
 
-Use the following CSS to customize the content header in Calendar.
+Use the following CSS to customize the weekday header row above the month grid.
 
 ```css
 /* To specify background */
diff --git a/blazor/card/getting-started-with-web-app.md b/blazor/card/getting-started-with-web-app.md
index 250699d92d..3f1af2d7e5 100644
--- a/blazor/card/getting-started-with-web-app.md
+++ b/blazor/card/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Card Component in Web App
 
-This section briefly explains about how to include [Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Card](https://www.syncfusion.com/blazor-components/blazor-card) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Card](https://www.syn
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Cards and Themes NuGet in the Blazor Web App
 
-To add **Blazor Card** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Card** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Cards and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Cards and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Card** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Cards](https://www.nuget.org/packages/Syncfusion.Blazor.Cards/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Cards --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Cards` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Card component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Card component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Card component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Card component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Card component in the default web browser.
 
 ## Add header and content
 
diff --git a/blazor/card/images/blazor-create-web-app.png b/blazor/card/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/card/images/blazor-create-web-app.png differ
diff --git a/blazor/carousel/getting-started-with-web-app.md b/blazor/carousel/getting-started-with-web-app.md
index 5f346a3bb0..8a4b836fce 100644
--- a/blazor/carousel/getting-started-with-web-app.md
+++ b/blazor/carousel/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Carousel Component in Web App
 
-This section briefly explains about how to include [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Carousel](https://www
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the Blazor Web App
 
-To add **Blazor Carousel** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). 
+To add the **Blazor Carousel** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). 
 
-If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you can install the NuGet package in the project any where to add component in Web App.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Carousel** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Navigations --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -280,7 +309,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
 
diff --git a/blazor/carousel/images/blazor-create-web-app.png b/blazor/carousel/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/carousel/images/blazor-create-web-app.png differ
diff --git a/blazor/chart/getting-started-with-web-app.md b/blazor/chart/getting-started-with-web-app.md
index 76b81fd15d..cbd7c30275 100644
--- a/blazor/chart/getting-started-with-web-app.md
+++ b/blazor/chart/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Chart Component in Web App
 
-This section briefly explains about how to include [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
+This section briefly explains about how to include [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -23,17 +23,17 @@ This section briefly explains about how to include [Blazor Chart](https://www.sy
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
 
 ![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts NuGet in the Blazor Web App
 
-To add **Blazor Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/).
+To add the **Blazor Chart** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -45,7 +45,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -57,9 +57,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -75,7 +75,7 @@ cd BlazorWebApp.Client
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Charts NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,7 +92,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -112,7 +112,7 @@ dotnet --version
 
 ## Create a Blazor Web App using .NET CLI
 
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
 Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
@@ -134,7 +134,7 @@ This command creates new Blazor Web App and places it in a new directory called
 
 Here's an example of how to add **Blazor Chart** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -145,7 +145,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -168,7 +168,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -249,7 +249,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.png)" %}
 
diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md
index c1f9e927f7..3232999c79 100644
--- a/blazor/chat-ui/getting-started-webapp.md
+++ b/blazor/chat-ui/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Chat UI in a Blazor Web App
 
-This section explains how to add the [Blazor Chat UI](https://www.syncfusion.com/blazor-components/blazor-chat-ui) component to your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This section explains how to add the [Blazor Chat UI](https://www.syncfusion.com/blazor-components/blazor-chat-ui) component to your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 To get started quickly with the Blazor Chat UI component, refer to the following video guide:
 
@@ -26,15 +26,17 @@ To get started quickly with the Blazor Chat UI component, refer to the following
 
 ## Create a New Blazor Web App in Visual Studio
 
-A **Blazor Web App** can be created using Visual Studio 2022 with either the official [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-Ensure you configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InteractiveChat and Themes NuGet in the App
 
-To add the **Blazor Chat UI** component to your app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Chat UI** component to your app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, the required packages can be installed using the Package Manager Console commands.
 
@@ -47,7 +49,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available at [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) documentation for a complete list of available packages.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -59,9 +61,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a New Blazor Web App in Visual Studio Code
 
-A **Blazor Web App** can be created using Visual Studio code with either the official [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-To ensure proper functionality of a Blazor Web App, configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) during application setup.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, to create a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
@@ -75,11 +77,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InteractiveChat and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -97,18 +97,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available at [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) documentation for a complete list of available packages.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
-First, import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace.
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InteractiveChat and Themes NuGet in the App
 
-*   **WebAssembly or Auto Mode**: Open the `~/_Imports.razor` file from the `.Client` project.
-*   **Server Mode**: Open the `~/_Imports.razor` file located in the main project's `Components` folder.
+Here's an example of how to add the **Blazor Chat UI** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.InteractiveChat](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.InteractiveChat --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -119,9 +170,11 @@ First, import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` na
 {% endhighlight %}
 {% endtabs %}
 
-Next, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in your **~/Program.cs** file.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service must be registered in both **~/Program.cs** files of the Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -155,27 +208,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add Stylesheet and Script Resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -196,15 +228,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI Component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity Location | Render Mode | Code Example |
 | --- | --- | --- |
 | Per page/component | Auto | `@rendermode InteractiveAuto` |
 | | WebAssembly | `@rendermode InteractiveWebAssembly` |
-| | Server | `@rendermode InteractiveServer` |
+|  | None | --- |
 
-N> If the **Interactivity Location** is set to `Global`, the **Render Mode** is configured globally in the `App.razor` file and does not need to be specified on each component.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -225,7 +257,7 @@ N> If the **Interactivity Location** is set to `Global`, the **Render Mode** is
 {% endhighlight %}
 {% endtabs %}
 
-Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component will be rendered in your browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chat UI component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.png)" %}
 
diff --git a/blazor/chat-ui/images/blazor-create-web-app.png b/blazor/chat-ui/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/chat-ui/images/blazor-create-web-app.png differ
diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md
index 0bde41dd92..b41bb8f338 100644
--- a/blazor/check-box/getting-started-with-web-app.md
+++ b/blazor/check-box/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor CheckBox Component in Web App
 
-This section explains how to include the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section explains how to include the [Blazor CheckBox](https://www.syncfusion.com/blazor-components/blazor-checkbox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section explains how to include the [Blazor CheckBox](https://www.syncfusio
 
 ## Create a new Blazor Web App in Visual Studio
 
-Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the Blazor Web App
 
 To add the **Blazor CheckBox** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.
+If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.
 
 Alternatively, use the following Package Manager commands:
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For details on creating a **Blazor Web App** with various interactive modes and locations, refer to [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.
+If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the Client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure the terminal is in the project directory containing the `.csproj` file.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the full list and component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor CheckBox** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open Components/_Imports.razor from the Client project. |
-| Server | Open Components/_Imports.razor in the Server project (Components folder). |
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
 
-If the **Interactive Render Mode** is `WebAssembly` or `Auto`, register the service in both **~/Program.cs** files (Server and Client) of the Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is `Server`, the project contains a single **~/Program.cs** file. In this case, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the `<head>` and the script reference at the end of the `<body>` in **~/Components/App.razor** as shown:
@@ -193,16 +223,15 @@ N> Refer to [Blazor themes](https://blazor.syncfusion.com/documentation/appearan
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component in a `.razor` file inside the `Pages` folder. If the interactivity location is `Per page/component`, define a render mode at the top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CheckBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in `App.razor` by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -236,4 +265,4 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
diff --git a/blazor/check-box/images/blazor-create-web-app.png b/blazor/check-box/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/check-box/images/blazor-create-web-app.png differ
diff --git a/blazor/chip/getting-started-with-web-app.md b/blazor/chip/getting-started-with-web-app.md
index 1e7ac8f867..b81cf8644c 100644
--- a/blazor/chip/getting-started-with-web-app.md
+++ b/blazor/chip/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Chip Component in Web App
 
-This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Chip](https://www.syncfusion.com/blazor-components/blazor-chips) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Chip](https://www.syn
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the Blazor Web App
 
-To add **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Chip** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Chip** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chip component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chip component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chip component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -227,7 +256,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chip component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chip component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VXrTNCBaiGVbwHyL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip Component](./images/blazor-chip-component.png)" %}
 
diff --git a/blazor/chip/images/blazor-create-web-app.png b/blazor/chip/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/chip/images/blazor-create-web-app.png differ
diff --git a/blazor/circular-gauge/getting-started-with-web-app.md b/blazor/circular-gauge/getting-started-with-web-app.md
index 16551816e6..3202295f87 100644
--- a/blazor/circular-gauge/getting-started-with-web-app.md
+++ b/blazor/circular-gauge/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor CircularGauge Component in Web App
 
-This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor CircularGauge](https:
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge and Themes NuGet in the Blazor Web App
 
-To add **Blazor CircularGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor CircularGauge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor CircularGauge** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.CircularGauge --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -229,7 +258,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor CircularGauge component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.png)" %}
 
diff --git a/blazor/circular-gauge/images/blazor-create-web-app.png b/blazor/circular-gauge/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/circular-gauge/images/blazor-create-web-app.png differ
diff --git a/blazor/color-picker/accessibility.md b/blazor/color-picker/accessibility.md
index deda7494bc..04c8e69192 100644
--- a/blazor/color-picker/accessibility.md
+++ b/blazor/color-picker/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor Color Picker Component
 
-The Blazor Color Picker component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Color Picker component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor Color Picker component is outlined below.
 
@@ -39,21 +39,21 @@ The accessibility compliance for the Blazor Color Picker component is outlined b
 
 ## WAI-ARIA attributes
 
-The Blazor Color Picker component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ColorPicker component:
+The Blazor Color Picker component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/) practices to support assistive technologies. The following ARIA attributes are used in the Blazor Color Picker component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `role` | Indicates the Color Picker component as `color`and the tiles as `gridcell` in the color palette. |
-| `aria-label` | Indicates the accessible name for the tiles. |
-| `aria-selected` | Indicates the current selected state of the tile. |
-| `aria-haspopup` | Indicates the availability of the popup element. |
-| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. |
-| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
-| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
+| `role` | Identifies interactive elements (for example, `grid` for the palette and `gridcell` for tiles) to convey structure to assistive technologies. |
+| `aria-label` | Provides accessible names for interactive elements such as tiles and buttons. |
+| `aria-selected` | Indicates the current selection state of a tile in the palette. |
+| `aria-haspopup` | Indicates the availability of the popup element when applicable. |
+| `aria-expanded` | Indicates whether the popup is currently expanded or collapsed. |
+| `aria-owns` | Establishes relationships between popup and trigger elements when DOM hierarchy alone is insufficient. |
+| `aria-disabled` | Conveys that the element is disabled and not operable. |
 
 ## Keyboard interaction
 
-The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component.
+The Blazor Color Picker component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ColorPicker component.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
@@ -61,14 +61,14 @@ The Blazor Color Picker component followed the [keyboard interaction](https://ww
 | <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the handler/tile down from the current position. |
 | <kbd>←</kbd> | <kbd>←</kbd> | Moves the handler/tile left from the current position. |
 | <kbd>→</kbd> | <kbd>→</kbd> | Moves the handler/tile right from the current position. |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Apply the selected color value. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | To focus the next focusable element in the ColorPicker popup. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Applies the selected color value. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next focusable element in the Color Picker popup. |
 
 ## Ensuring accessibility
 
-The Blazor Color Picker component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Color Picker component's accessibility levels are validated with [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) using Playwright-based tests.
 
-The accessibility compliance of the Blazor Color Picker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the accessibility of the Color Picker Blazor component with accessibility tools.
+The accessibility compliance of the Blazor Color Picker component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/color-picker) in a new window to evaluate the component with accessibility tools.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/color-picker.html" %}
 
diff --git a/blazor/color-picker/events.md b/blazor/color-picker/events.md
index f36921078f..2fa75cc280 100644
--- a/blazor/color-picker/events.md
+++ b/blazor/color-picker/events.md
@@ -7,13 +7,13 @@ control: Colorpicker
 documentation: ug
 ---
 
-# Events in Blazor ColorPicker Component
+# Events in Blazor Color Picker Component
 
-This section explains the list of events of the Colorpicker component which will be triggered for appropriate Colorpicker actions.
+This section lists the events in the Color Picker component and when they are triggered during user interaction.
 
 ## Closed
 
-`Closed` event triggers after the popup has been closed.
+`Closed` triggers after the popup has been closed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -31,7 +31,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## Opened
 
-`Opened` event triggers when the popup Open.
+`Opened` triggers when the popup Open.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -49,7 +49,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## OnClose
 
-`OnClose` event triggers before the popup closed.
+`OnClose` triggers before the popup closed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -67,7 +67,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## OnOpen
 
-`OnOpen` event triggers when the popup is Opened.
+`OnOpen` triggers when the popup is Opened.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -85,7 +85,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## ValueChange
 
-`ValueChange` event triggers when changing the colors.
+`ValueChange` triggers when changing the colors.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -103,7 +103,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## Created
 
-`Created` event triggers when the component is created.
+`Created` triggers when the component is created.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -121,7 +121,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## OnModeSwitch
 
-`OnModeSwitch` event triggered before the mode switching is performed in the component.
+`OnModeSwitch` triggers before the mode is switched in the component.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -139,7 +139,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## ModeSwitched
 
-`ModeSwitched` event triggered after the mode switching is performed in the component.
+`ModeSwitched` triggers after the mode switching is completed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -157,7 +157,7 @@ This section explains the list of events of the Colorpicker component which will
 
 ## OnTileRender
 
-`OnTileRender` event triggered after the rendering of each color tile in the component is completed.
+`OnTileRender` triggers after rendering of each color tile is completed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md
index 069722a935..71d321c71f 100644
--- a/blazor/color-picker/getting-started-with-web-app.md
+++ b/blazor/color-picker/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ColorPicker Component in Web App
 
-This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor ColorPicker](https://
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the Blazor Web App
 
-To add **Blazor ColorPicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ColorPicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Color Picker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %}
 
diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md
index 43219e0581..ead1c246e2 100644
--- a/blazor/color-picker/getting-started.md
+++ b/blazor/color-picker/getting-started.md
@@ -3,15 +3,15 @@ layout: post
 title: Getting Started with Blazor ColorPicker Component | Syncfusion
 description: Checkout and learn about getting started with Blazor ColorPicker component in and Blazor WebAssembly Application.
 platform: Blazor
-control: ColorPicker
+control: Color Picker
 documentation: ug
 ---
 
 # Getting Started with Blazor ColorPicker Component
 
-This section briefly explains about how to include [Blazor ColorPicker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the [Blazor Color Picker](https://www.syncfusion.com/blazor-components/blazor-color-picker) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with ColorPicker Component using Blazor, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker) sample:
+To get started quickly with the Color Picker in Blazor, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker):
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=lI_5h-ZUSHw"%}
@@ -26,11 +26,11 @@ To get started quickly with ColorPicker Component using Blazor, you can check ou
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor ColorPicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Color Picker** component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly app using the following commands in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,9 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
-
+* Ensure the terminal is in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 {% tabs %}
 
 {% highlight c# tabtitle="Package Manager" %}
@@ -86,7 +85,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -94,7 +93,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +104,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -138,11 +137,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application.
 
 ## Add Blazor ColorPicker component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Color Picker component to the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight razor %}
@@ -152,12 +151,12 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker comp
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ColorPicker component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Color Picker component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md
index 35c50d2413..85fb8bda02 100644
--- a/blazor/color-picker/how-to/customize-color-picker.md
+++ b/blazor/color-picker/how-to/customize-color-picker.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Custom palette
 
-By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To customize the color palette, add a custom class to palette tiles using [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event.
+By default, the palette renders with a set of predefined colors. To load custom colors, set the [PresetColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_PresetColors) property. To further customize palette tiles (for example, to add a class for styling), use the [OnTileRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_OnTileRender) event.
 
 ```cshtml
 
@@ -76,13 +76,14 @@ By default, the Palette will be rendered with default colors. To load custom col
 </style>
 
 ```
+
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)" %}
 
 ## Hide input area from picker
 
-By default, the input area will be rendered in Color Picker. To hide the input area from it, add `e-hide-value` class to Color Picker using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property.
+By default, the input area is rendered in the Color Picker. To hide the input area, add the built-in class `e-hide-value` via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_CssClass) property. This hides the input field visually while retaining core picker functionality.
 
-In the following sample, the Color Picker is rendered without input area.
+In the following sample, the Color Picker is rendered without the input area.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -94,7 +95,7 @@ In the following sample, the Color Picker is rendered without input area.
 
 ## Custom handle
 
-Color Picker handle shape and UI can be customized. Here, we have customized the handle as svg icon. Similarly, you can customize the handle based on your requirement.
+Customize the Color Picker handle shape and UI with CSS. In this example, the handle is replaced with an SVG icon encoded as a data URL. Similar techniques can be used to style the handle to match application branding. For broad compatibility, verify styles across themes and consider contrast and focus visibility.
 
 The following sample shows the customized Color Picker handle.
 
@@ -122,4 +123,4 @@ The following sample shows the customized Color Picker handle.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %}
diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md
index bef5800132..b6256fe99f 100644
--- a/blazor/color-picker/how-to/disable-color-picker.md
+++ b/blazor/color-picker/how-to/disable-color-picker.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Disable Color Picker in Blazor Color Picker Component
 
-To achieve disabled state in Color Picker, set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true`. The Color Picker pop-up cannot be accessed in disabled state.
+Set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Disabled) property to `true` to disable the Color Picker. In the disabled state, the input and popup cannot receive focus or user interaction.
 
-The following example shows the `Disabled` state of Color Picker component.
+The following example shows the `Disabled` state of the Color Picker component.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -19,4 +19,4 @@ The following example shows the `Disabled` state of Color Picker component.
 <h4>Choose a color</h4>
 <SfColorPicker Disabled="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %}
diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md
index 6ae424d0dd..1cb83ec07e 100644
--- a/blazor/color-picker/how-to/hide-control-buttons.md
+++ b/blazor/color-picker/how-to/hide-control-buttons.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Hide control buttons in Blazor Color Picker Component
 
-Color Picker can be rendered without control buttons (Apply/Cancel). In this case, while selecting a color, the Color Picker pop-up is closed and selected color can be applied directly. To hide control buttons, set the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`.
+Render the Color Picker without control buttons (Apply/Cancel) by setting the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property to `false`.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -17,4 +17,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas
 <h4>Choose a color</h4>
 <SfColorPicker ShowButtons="false"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %}
diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md
index eaab09d506..700b067a15 100644
--- a/blazor/color-picker/how-to/no-color-support.md
+++ b/blazor/color-picker/how-to/no-color-support.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Handle No Color Support in Blazor Color Picker Component
 
-The Color Picker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes `empty` and considered as no color has been selected from Color Picker.
+The Color Picker supports a no color option. When the No color tile in the palette is selected, the chosen color is cleared (treated as no color/empty).
 
 ## Default no color
 
-To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property as true. In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile, you can achieve the above functionalities.
+Enable the built-in no color tile by setting the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property to `true`. In the following example, the first palette tile is the No color tile. Selecting it clears the selection and applies no color.
 
 ```cshtml
 
@@ -42,11 +42,11 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)" %}
 
->If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
+> If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
 
 ## Custom no color
 
-The following sample shows the color palette with custom no color option.
+The following example demonstrates a custom no color option alongside a palette rendered inside a SplitButton. Selecting No color applies a transparent background.
 
 ```cshtml
 
diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md
index aaff123198..22ed4d5320 100644
--- a/blazor/color-picker/how-to/render-palette-alone.md
+++ b/blazor/color-picker/how-to/render-palette-alone.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Render palette alone in Blazor Color Picker Component
 
-To render the `Palette` alone in Color Picker, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`, and set the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property to `false`.
+Render only the palette in the Color Picker by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette` and disabling the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) to prevent switching to the picker view.
 
-In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons and it renders only the `Palette` area.
+In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons) property is set to `false` to hide the control buttons, so only the palette area is displayed and color selection applies immediately.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -21,4 +21,4 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)" %}
 
-N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
+N> To display the palette embedded in the page instead of in a popup, set `Inline="true"`. To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
\ No newline at end of file
diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md
index 595e3c2b5b..e277dd9829 100644
--- a/blazor/color-picker/how-to/show-recent-color.md
+++ b/blazor/color-picker/how-to/show-recent-color.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Show Recent color in Blazor Color Picker Component
 
-The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property enables the display of recently selected colors in the ColorPicker when in palette mode. This feature helps users quickly access their most frequently used colors.
+The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property displays recently selected colors in the Color Picker when using palette mode. This feature helps users quickly reuse frequently chosen colors.
 
->Note: The [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature displays up to 10 recent colors as tiles and is available only in `palette` mode.
+> Note: The [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) feature shows up to 10 recent colors as tiles and is available only in palette mode.
 
-In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the `palette` area.
+In the following sample, the [ShowRecentColors](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowRecentColors) property is enabled to display recent colors in the palette area.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -21,4 +21,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr
 <h4>Choose a color</h4>
 <SfColorPicker ShowRecentColors="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %}
diff --git a/blazor/color-picker/images/blazor-create-web-app.png b/blazor/color-picker/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/color-picker/images/blazor-create-web-app.png differ
diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md
index 21cd3e68e6..1c96a7452b 100644
--- a/blazor/color-picker/inline-rendering.md
+++ b/blazor/color-picker/inline-rendering.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Inline Rendering in Blazor Color Picker Component
 
-By default, the ColorPicker will be rendered using SplitButton and open the pop-up to access the ColorPicker. To render the ColorPicker container alone and to access it directly, render it as inline. It can be achieved by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`.
+By default, the Color Picker renders with a button that opens a popup to access the selector. To display the Color Picker directly on the page (without a popup), render it inline by setting the [Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Inline) property to `true`.
 
-The following sample shows the inline type rendering of ColorPicker.
+The following sample shows inline rendering of the Color Picker.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -22,4 +22,4 @@ The following sample shows the inline type rendering of ColorPicker.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)" %}
 
-N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
+N> The `ShowButtons` property is disabled in this sample because control buttons are not needed for inline rendering. For details about control buttons functionality, see [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
\ No newline at end of file
diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md
index ac9f6c95b2..30008e6057 100644
--- a/blazor/color-picker/localization.md
+++ b/blazor/color-picker/localization.md
@@ -7,19 +7,18 @@ control: Color Picker
 documentation: ug
 ---
 
-
 # Localization and RTL in Blazor Color Picker Component
 
 ## Localization
 
-The `Localization` library allows you to localize default text content of the Color Picker. The Color Picker component has static text for control buttons (apply / cancel) and mode switcher that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. You can refer [How to enable Localization in Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application) page for the introduction and configuring the localization.
+Use the localization framework to translate the default text in the Color Picker. The component includes static text for control buttons (Apply/Cancel) and the mode switcher that can be localized for cultures such as Arabic, German, French, and more by setting the app’s locale and providing translated resources. For setup guidance, see [How to enable localization in a Blazor application](https://blazor.syncfusion.com/documentation/common/localization#how-to-enable-localization-in-blazor-application).
 
-You can modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker.
+Modify the default value in `.res` file added to Resource folder. Enter the key value (Locale Keywords) in the `Name` column and the translated string in the `Value` column. The following list of keys and their values are used in the Color Picker.
 
-| **Locale key** | **en-US (default culture)** | **de (Deutsch culture)** |
-| ------------ | ----------------------- | --------------------|
-| `ColorPicker_Apply`  | `Apply` | `Anwenden` |
-| `ColorPicker_Cancel`  | `Cancel` | `Abbrechen` |
+| Locale key | en-US (default culture) | de (Deutsch culture) |
+| ---------- | ------------------------ | -------------------- |
+| `ColorPicker_Apply` | `Apply` | `Anwenden` |
+| `ColorPicker_Cancel` | `Cancel` | `Abbrechen` |
 | `ColorPicker_ModeSwitcher` | `Switch Mode` | `Modus wechseln` |
 
 ```cshtml
@@ -33,9 +32,9 @@ You can modify the default value in `.res` file added to Resource folder. Enter
 
 ## RTL
 
-Color Picker component has `RTL` support. It helps to render the Color Picker from right-to-left direction. It improves the user experiences and accessibility for users who use right-to-left languages(Arabic, Farsi, Urdu, etc). This can be achieved by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to true.
+The Color Picker supports right-to-left (RTL) layout to improve usability for languages such as Arabic, Farsi, and Urdu. Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to `true`. RTL affects layout direction but does not translate text; use localization to provide translated strings.
 
-In the following example, Color Picker component is rendered in RTL mode with `arabic` locale.
+In the following example, the Color Picker is rendered in RTL mode with an Arabic locale configured at the app level.
 
 ```cshtml
 
@@ -44,4 +43,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a
 <SfColorPicker EnableRtl="true"></SfColorPicker>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %}
diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md
index df826521e9..83aaf14d00 100644
--- a/blazor/color-picker/mode-and-value.md
+++ b/blazor/color-picker/mode-and-value.md
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Rendering palette at initial load
 
-By default, the `Picker` area will be rendered at initial load. To render the Palette area while opening the Color Picker pop-up, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as `Palette`.
+By default, the `Picker` view is shown initially. To display the palette view when opening the Color Picker popup, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property to `Palette`.
 
-In the following sample, it will render the `Palette` at initial load.
+In the following example, the palette is displayed at initial load.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -28,7 +28,7 @@ In the following sample, it will render the `Palette` at initial load.
 
 The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property can be used to specify the color value to the Color Picker. It supports either `three` or `six` digit hex codes. To include `opacity`, set the color value as `four` or `eight` digit hex code.
 
-In the following sample, the color value is set as `four` digit hex code, the last digit represents the `opacity` value.
+In the following example, a 4-digit hex value is used, where the last digit represents the opacity.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -39,4 +39,4 @@ In the following sample, the color value is set as `four` digit hex code, the la
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)" %}
 
-N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix.
+N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex codes with or without the `#` prefix.
\ No newline at end of file
diff --git a/blazor/color-picker/style-and-appearance.md b/blazor/color-picker/style-and-appearance.md
index a0e44c8649..447e5f95ef 100644
--- a/blazor/color-picker/style-and-appearance.md
+++ b/blazor/color-picker/style-and-appearance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Styles and Appearances in Blazor Color Picker Component
 
-To modify the ColorPicker appearance, you need to override the default CSS of ColorPicker component. Find the list of CSS classes and its corresponding section in ColorPicker component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+Customize the Color Picker appearance by overriding its default CSS. The following table lists key CSS classes and the corresponding UI sections in the Color Picker. For broader, theme-level changes, create a custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 |CSS Class | Purpose of Class|
 |-----|-----|
diff --git a/blazor/combobox/accessibility.md b/blazor/combobox/accessibility.md
index 6909a5b347..33a03ac8dc 100644
--- a/blazor/combobox/accessibility.md
+++ b/blazor/combobox/accessibility.md
@@ -12,20 +12,20 @@ documentation: ug
 The [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component has been designed with the `WAI-ARIA` specifications in mind, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized
 by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
 
-The Blazor ComboBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor ComboBox component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and it implements appropriate [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor ComboBox component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Right-to-left support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
 
 <style>
     .post .post-content img {
@@ -33,11 +33,11 @@ The accessibility compliance for the Blazor ComboBox component is outlined below
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
@@ -45,40 +45,40 @@ The Blazor ComboBox component uses the `combobox` role, and each list item has a
 
 | **Properties** | **Functionalities** |
 | --- | --- |
-| `aria-haspopup` | Indicates whether the ComboBox input element has a popup list or not. |
-| `aria-expanded` | Indicates whether the popup list has expanded or not. |
+| `aria-haspopup` | Indicates that the ComboBox input has a popup (listbox). |
+| `aria-expanded` | Indicates the expanded or collapsed state of the popup list. |
 | `aria-selected` | Indicates the selected option. |
-| `aria-readonly` | Indicates the readonly state of the ComboBox element. |
-| `aria-disabled` | Indicates whether the ComboBox component is in a disabled state or not. |
-| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
-| `aria-owns` | This attribute contains the ID of the popup list to indicate popup as a child element. |
-| `aria-autocomplete`  | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
+| `aria-readonly` | Indicates that the ComboBox is read-only. |
+| `aria-disabled` | Indicates that the ComboBox is disabled. |
+| `aria-activedescendant` | References the ID of the active option in the listbox to indicate focus for assistive technologies. |
+| `aria-owns` | References the ID of the popup list to associate it as a controlled element. |
+| `aria-autocomplete`  | Indicates the autocomplete behavior (for example, `list` or `both`) depending on whether the list and inline suggestion are shown. |
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor ComboBox without interruptions:
+Use the following key shortcuts to access and operate the Blazor ComboBox:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
 |**Focus**| | |
-|<kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample. |
+|<kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses the first component in the sample (sample-specific shortcut for demonstration). |
 |**Input Navigation**| | |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Cursor moves before the first character in the input. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Cursor moves before the last character in the input. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves the cursor to the beginning of the input. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Moves the cursor to the end of the input. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 |**Selection**| | |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item. If open, the popup closes; otherwise, toggles the popup. |
 |**Popup Navigation**| | |
-| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Selects the first item in the ComboBox when no item is selected. Otherwise, selects the item next to the currently selected item. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Selects the item previous to the currently selected one. |
-| <kbd>Page down</kbd> | <kbd>Page down</kbd> | Scrolls down to the next page and selects the first item when the popup list opens. |
-| <kbd>Page up</kbd> | <kbd>Page up</kbd> | Scrolls up to the previous page and selects the first item when the popup list opens. |
+| <kbd>Esc</kbd> | <kbd>Escape</kbd> | Closes the popup when open and keeps the current selection. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Selects the first item when none is selected; otherwise, moves to the next item. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves to the previous item. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down one page in the list and selects the first visible item. |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up one page in the list and selects the first visible item. |
 
-N> In the following sample, disable the ComboBox component using <kbd>t</kbd> keys.
+N> In the following sample, pressing the <kbd>t</kbd> key disables the ComboBox for demonstration purposes.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -124,9 +124,9 @@ N> In the following sample, disable the ComboBox component using <kbd>t</kbd> ke
 
 ## Ensuring accessibility
 
-The Blazor ComboBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor ComboBox component’s accessibility levels are validated using [axe-core](https://www.npmjs.com/package/axe-core) during automated testing.
 
-The accessibility compliance of the ComboBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the accessibility of the ComboBox component with accessibility tools.
+The accessibility compliance of the ComboBox component is demonstrated in the following sample. Open the [ComboBox accessibility sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md
index 85b939ce9c..bd741b9c18 100644
--- a/blazor/combobox/cascading.md
+++ b/blazor/combobox/cascading.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Cascading in ComboBox
 
-A cascading ComboBox allows you to select an item from a list of options, and the options in the second ComboBox are filtered based on the selection made in the first ComboBox. This allows you to create a hierarchy of comboBox options, where the options in the child ComboBox are dependent on the selection made in the parent ComboBox.
+A cascading ComboBox filters the options of a child ComboBox based on the selection made in the parent ComboBox. This enables a hierarchy of ComboBox options, where child options depend on the parent’s selected value.
 
-In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event handler of the first ComboBox, you can load the data for the second ComboBox based on the selected value of the first ComboBox. This process can be repeated between the second and third ComboBoxes to create a cascading effect.
+Use the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event of the parent ComboBox to load and bind data for the child ComboBox based on the selected value. This pattern can be repeated (parent → child → grandchild) to create multi-level cascading.
 
-To quickly get started with Cascading in the Blazor ComboBox component, you can watch the video below.
+To quickly get started with cascading in the Blazor ComboBox component, watch the following video.
 
 {% youtube "https://www.youtube.com/watch?v=zGGntfBPQNI" %}
 
-In the following example, when a country is selected in the first ComboBox, the list of states for that country is loaded in the second ComboBox. Similarly, when a state is selected in the second ComboBox, the list of cities for that state is loaded in the third ComboBox.
+In the following example, selecting a country in the first ComboBox loads its states in the second ComboBox. Selecting a state then loads the corresponding cities in the third ComboBox.
 
 {% highlight cshtml %}
 
@@ -29,9 +29,9 @@ In the following example, when a country is selected in the first ComboBox, the
 
 ## Cascading with other form field 
 
-To populate other form fields (such as textboxes) based on the value selected in the ComboBox, you can use the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event of the ComboBox. In the `ValueChange` event handler, you can retrieve the relevant data from your data source and use it to populate the other form fields.
+To populate other form fields (such as textboxes) based on the selected value in a ComboBox, handle the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event. In the handler, retrieve the related data from the source and assign it to the target fields.
 
-In the following example, the ComboBox displays a list of countries, and the textboxes display the state ID, country ID, and capital of the selected country. When the user selects a different country in the ComboBox, the `ValueChange` event handler is triggered, and the data for the selected country is retrieved from the data source
+In the following example, the ComboBox lists countries, and textboxes display the state ID, country ID, and capital for the selected country. When a different country is chosen, the `ValueChange` event triggers and updates the related fields.
 
 {% highlight cshtml %}
 
@@ -41,4 +41,4 @@ In the following example, the ComboBox displays a list of countries, and the tex
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)" %}
 
-N> [View Sample in Demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
\ No newline at end of file
+N> [View the cascading ComboBox demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
\ No newline at end of file
diff --git a/blazor/combobox/custom-value.md b/blazor/combobox/custom-value.md
index 5b4aeac34d..156316c4f8 100644
--- a/blazor/combobox/custom-value.md
+++ b/blazor/combobox/custom-value.md
@@ -7,8 +7,10 @@ control: ComboBox
 documentation: ug
 ---
 
-# Adding Custom Value to Blazor ComboBox Component
+# Add a custom value to Blazor ComboBox component
 
-You can add custom value to the ComboBox component. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character(s) get added to the existing list as a new item. Default value of [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) is `true`.
+Enable users to enter values that are not present in the data by using the [AllowCustom property on SfComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom). When the typed text does not match any items, an “Add” option appears in the popup. Selecting this option commits the custom value. The default value of AllowCustom is `true`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)" %}
\ No newline at end of file
+To persist the new entry to the underlying data source, handle application logic (for example, in value change handling) to add the custom value to the collection. Users can also commit a custom value with the keyboard (such as pressing Enter) when appropriate.
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)" %}
diff --git a/blazor/combobox/customization.md b/blazor/combobox/customization.md
index 6c14d6b8e9..24ae034f8a 100644
--- a/blazor/combobox/customization.md
+++ b/blazor/combobox/customization.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Customization in Blazor ComboBox
 
-## Open combobox dropdown on focus
+## Open ComboBox dropdown on focus
 
-You can automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/combobox/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items.
+Automatically open the ComboBox dropdown when the input receives focus by handling the [Focus event](https://blazor.syncfusion.com/documentation/combobox/events#focus) and calling the [ShowPopupAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) (inherited from the base DropDownList). ShowPopupAsync programmatically opens the popup displaying the list of items.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -43,5 +43,4 @@ You can automatically open the dropdown by using [ShowPopupAsync()](https://help
 }
 ```
 
-
-![Blazor ComboBox Customization](./images/blazor-combobox-customization.png)
\ No newline at end of file
+![Blazor ComboBox opening dropdown on focus](./images/blazor-combobox-customization.png)
\ No newline at end of file
diff --git a/blazor/combobox/data-binding.md b/blazor/combobox/data-binding.md
index 59c23e5192..0a3656e351 100644
--- a/blazor/combobox/data-binding.md
+++ b/blazor/combobox/data-binding.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Data Binding in Blazor ComboBox Component
 
-The ComboBox loads the data either from the local data sources or remote data services. Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property,  bind the local data or using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), bind the remote data.
+The ComboBox supports binding data from local sources or remote services. Use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property to bind local data. For remote data, use the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) to configure endpoints and adaptors.
 
-* **TItem** - Specifies the type of the datasource of the combobox component.
+* **TItem** - Specifies the type of the data source items for the ComboBox component.
 
 ## Binding local data
 
@@ -27,7 +27,7 @@ The ComboBox loads the data from local data sources through the [DataSource](htt
 
 ## Index value binding
 
-Index value binding can be achieved by using `bind-Index` attribute and it supports int and int nullable types. By using this attribute you can bind the values respective to its index.
+Bind by index using the `bind-Index` attribute (supports int and nullable int). This binds the selected item based on its index in the data.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -60,7 +60,7 @@ Index value binding can be achieved by using `bind-Index` attribute and it suppo
 
 ### DataBound event
 
-The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_DataBound) event triggers when the data source is populated in the popup list.
+The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_DataBound) event fires after the data source is populated in the popup list.
 
 {% highlight cshtml %}
 
@@ -70,9 +70,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown
 
 ### Primitive type
 
-Bind the data to the ComboBox as an array or list of the `string`, `int`, `double` and `bool` type items.
+Bind arrays or lists of primitive types such as `string`, `int`, `double`, and `bool`.
 
-The following code demonstrates array of string values to the ComboBox component.
+The following code demonstrates binding an array of strings to the ComboBox.
 
 {% highlight cshtml %}
 
@@ -82,7 +82,7 @@ The following code demonstrates array of string values to the ComboBox component
 
 ![Blazor ComboBox with Primitive string type](./images/data-binding/blazor_combobox_primitive-type-string.png)
 
-The following code demonstrates array of integer values to the ComboBox component.
+The following code demonstrates binding an array of integers to the ComboBox.
 
 {% highlight cshtml %}
 
@@ -94,9 +94,9 @@ The following code demonstrates array of integer values to the ComboBox componen
 
 ### Complex data type
 
-The ComboBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxModel.html) property.
+Bind arrays or lists of complex objects. Map the appropriate fields using the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxModel.html) property (via ComboBoxFieldSettings).
 
-In the following example, the `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) and  [ComboBoxFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Text) respectively.
+In the following example, `Code.ID` is mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) and `Country.CountryID` is mapped to [ComboBoxFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Text).
 
 {% highlight cshtml %}
 
@@ -108,7 +108,7 @@ In the following example, the `Code.ID` column and `Country.CountryID` column fr
 
 ### Expando object binding
 
-Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox. The following example binds a collection of vehicle objects.
 
 {% highlight cshtml %}
 
@@ -120,7 +120,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Observable collection binding
 
-Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the ComboBox component. In the following example, the `Observable Data` is bound to a collection of colors data.
+Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) so UI updates reflect changes to the collection (add, remove, update).
 
 {% highlight cshtml %}
 
@@ -132,7 +132,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm
 
 ### Dynamic object binding
 
-Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. In the following example, the `DynamicObject` is bound to the collection of customer data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) instances to the ComboBox. The following example binds a collection of customers.
 
 {% highlight cshtml %}
 
@@ -144,7 +144,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Enum data binding
 
-Bind the enum data to the ComboBox component. The following code helps you to get a description value from the enumeration data.
+Bind enum data and display description values from enumeration members.
 
 {% highlight cshtml %}
 
@@ -156,7 +156,7 @@ Bind the enum data to the ComboBox component. The following code helps you to ge
 
 ### ValueTuple data binding
 
-Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using `ValueTuple`
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data. The following example shows how to extract and display a string value using `ValueTuple`.
 
 {% highlight cshtml %}
 
@@ -168,17 +168,15 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 ## Binding remote data 
 
-The ComboBox loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. 
+Load data from remote services using [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) in combination with [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started). Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape requests.
 
-The ComboBox supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the ComboBox.
-
-* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint. 
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
+* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) – Specifies the service endpoint to fetch data.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) – Selects the adaptor. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. Adaptors handle request/response processing for the endpoint.
+* The [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides predefined adaptors for common service endpoints.
 
 ### OnActionBegin event
 
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionBegin) event triggers before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionBegin) event fires before data is requested from the server.
 
 {% highlight cshtml %}
 
@@ -188,7 +186,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ### OnActionComplete event
 
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
+The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionComplete) event fires after data is successfully fetched from the server.
 
 {% highlight cshtml %}
 
@@ -198,7 +196,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
 
 ### OnActionFailure event
 
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnActionFailure) event fires when a remote data request fails.
 
 {% highlight cshtml %}
 
@@ -208,7 +206,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ### OData v4 services
 
-The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
+The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) enables consuming and manipulating data from OData v4 services. The following example displays the first six customer records from the `Customers` table of the Northwind service.
 
 {% highlight cshtml %}
 
@@ -220,7 +218,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 ### Web API adaptor
 
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request. 
+Use the [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) to interact with Web API endpoints that follow OData conventions. `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), so endpoints should understand OData-formatted queries.
 
 {% highlight cshtml %}
 
@@ -253,9 +251,7 @@ public abstract class DataAdaptor
 }
 ```
 
-In custom Adaptor, the data binding operation can be performed in the ComboBox component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
-
-The following sample code demonstrates implementing custom data binding using custom adaptor.
+Bind the ComboBox using your custom adaptor by providing the custom class to DataManager and implementing `Read` or `ReadAsync`.
 
 {% highlight cshtml %}
 
@@ -265,9 +261,7 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the ComboBox to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
-
-The following example is for remote data binding and enabled offline mode.
+To avoid a server request for every action, preloaded all data at initialization and perform actions on the client. Enable this behavior by setting the DataManager’s `Offline` property.
 
 {% highlight cshtml %}
 
@@ -279,11 +273,11 @@ The following example is for remote data binding and enabled offline mode.
 
 ### Entity Framework
 
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the ComboBox component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the ComboBox component.
 
 #### Create DBContext class
 
-The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database.
+Create a `DbContext` (for example, `OrderContext`) to connect to the database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -312,7 +306,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Create data access layer to perform data operation
 
-Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table.
+Create a data access class (for example, `OrderDataAccessLayer`) to retrieve records from the database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -346,7 +340,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Creating web API controller
 
- A Web API Controller has to be created, which allows the ComboBox to directly consume data from the Entity Framework.
+Create a Web API controller so the ComboBox can consume data directly from Entity Framework.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -393,7 +387,7 @@ namespace EFDropDown.Controllers
 
 ### Configure ComboBox component using Web API adaptor
 
-Now, configure the ComboBox using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
+Configure the ComboBox with [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the Web API using the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
 
 {% highlight cshtml %}
 
@@ -403,7 +397,7 @@ Now, configure the ComboBox using the [SfDataManager](https://blazor.syncfusion.
 
 ## Adding new items
 
-Add the new item in the popup with the help of [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) public method. This method will add a mentioned item in the ComboBox popup without affecting the data source items.
+Add items directly to the popup (without altering the bound data source) using [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__). This method inserts the specified items into the ComboBox popup at the given index (or at the end if not specified) while leaving the original data source unchanged.
 
 {% highlight cshtml %}
 
@@ -411,4 +405,4 @@ Add the new item in the popup with the help of [AddItemsAsync](https://help.sync
 
 {% endhighlight %}
 
-![Blazor ComboBox with adding new Item](./images/data-binding/blazor_combobox_add-new-item.gif)
+![Blazor ComboBox with adding new Item](./images/data-binding/blazor_combobox_add-new-item.gif)
\ No newline at end of file
diff --git a/blazor/combobox/data-source.md b/blazor/combobox/data-source.md
index 8f8ae07f93..735929b3a9 100644
--- a/blazor/combobox/data-source.md
+++ b/blazor/combobox/data-source.md
@@ -16,11 +16,11 @@ The ComboBox also supports different kinds of data services such as OData, OData
 | Fields | Type | Description |
 |------|------|-------------|
 | Text |  `string` | Specifies the display text of each list item. |
-| Value |  `int or string` | Specifies the hidden data value mapped to each list item that should contain a unique value. |
-| GroupBy |  `string` | Specifies the category under which the list item has to be grouped. |
-| IconCss |  `string` | Specifies the icon class of each list item. |
+| Value |  `int or string` | Specifies the hidden data value mapped to each list item; the type is determined by the component’s TValue and should be unique. |
+| GroupBy |  `string` | Specifies the category under which the list item is grouped. |
+| IconCss |  `string` | Specifies the icon CSS class for each list item. |
 
-N> When binding complex data to the ComboBox, fields should be mapped correctly. Otherwise, the selected item remains undefined.
+N> When binding complex data to the ComboBox, fields must be mapped correctly. Otherwise, the selected item remains undefined.
 
 ## Binding local data
 
@@ -28,9 +28,9 @@ Local data can be represented in two ways as described below.
 
 ### Array of JSON data
 
-The ComboBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+The ComboBox can generate its list items from an array or list of objects. Map the appropriate properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
 
-In the following example, `Name` column from complex data has been mapped to the `Value` field.
+In the following example, the Name property is mapped to the Text field and the Code property is mapped to the Value field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -76,9 +76,9 @@ In the following example, `Name` column from complex data has been mapped to the
 
 ### Array of complex data
 
-The ComboBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+The ComboBox can generate its list items from complex objects. Map nested properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) by using dot notation.
 
-In the following example, `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the `Value` field and `Text` field, respectively.
+In the following example, Code.ID is mapped to the Value field and Country.CountryID is mapped to the Text field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -125,7 +125,7 @@ public IEnumerable<Complex> LocalData { get; set; } = new Complex().GetData();
 
 The ComboBox supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property, which is used to fetch data from the database and bind it to the ComboBox.
 
-In the following sample, First 6 contacts are displayed from the **Customers** table of `Northwind` Data Service.
+In the following sample, the first six records are retrieved from the Orders entity of the Northwind OData V4 service and display CustomerID as text and OrderID as value.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -159,7 +159,7 @@ In the following sample, First 6 contacts are displayed from the **Customers** t
 
 ### Web API Adaptor
 
-Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData.
+Use the WebApiAdaptor to bind the ComboBox to a Web API endpoint (including services built with OData).
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -186,11 +186,11 @@ Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData.
 
 ### Custom adaptor
 
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the ComboBox component.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) supports custom adaptors, which allow performing manual operations on the data. This is useful for implementing custom data binding and editing operations in the ComboBox component.
 
-For implementing custom data binding in ComboBox, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+For custom data binding in the ComboBox, the DataAdaptor class is used as the base class for a custom adaptor.
 
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor. Following are the method signatures present in this class,
+The DataAdaptor abstract class provides synchronous and asynchronous methods that can be overridden in the custom adaptor. The following methods are available:
 
 ```csharp
 public abstract class DataAdaptor
@@ -207,9 +207,9 @@ public abstract class DataAdaptor
 }
 ```
 
-The custom data binding can be performed in the ComboBox component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
+Custom data binding can be performed by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
 
-The following sample code demonstrates implementing custom data binding using custom adaptor,
+The following sample demonstrates implementing custom data binding using a custom adaptor:
 
 ```cshtml
 <SfComboBox TValue="string" TItem="Orders">
@@ -268,9 +268,9 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the ComboBox to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+To avoid a server round trip for every action, load all data during initialization and process subsequent actions on the client. Enable this behavior by setting the Offline property on the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-The following example for remote data binding and enabled offline mode,
+The following example demonstrates remote data binding with offline mode enabled:
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -298,7 +298,7 @@ The following example for remote data binding and enabled offline mode,
 
 ### ValueTuple data binding
 
-You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the ComboBox component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
 
 ```csharp
 
@@ -314,7 +314,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
 
 ## Binding ExpandoObject
 
-You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. The following example `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the ComboBox component. The following example `ExpandoObject` is bound to the collection of vehicles data.
 
 ```csharp
 
@@ -341,13 +341,11 @@ You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ```
 
-
-
 ![Blazor ComboBox with expando object data binding](./images/blazor_combobox_expando-object.png)
 
 ## Binding DynamicObject
 
-You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. The following example `DynamicObject` is bound to the collection of customers data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the ComboBox component. The following example `DynamicObject` is bound to the collection of customers data.
 
 ```csharp
 
@@ -393,12 +391,11 @@ You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ```
 
-
-![Blazor ComboBox with dynamic object data binding](./images/blazor_combobox_dynamic-object.png)
+![Blazor ComboBox bound to DynamicObject data](./images/blazor_combobox_dynamic-object.png)
 
 ## Binding ObservableCollection
 
-You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the ComboBox component. The following example `Observable Data` is bound to a collection of colors data.
+Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the ComboBox component. The following example `Observable Data` is bound to a collection of colors data.
 
 ```csharp
 
@@ -444,7 +441,7 @@ You need to follow the below steps to consume data from the **Entity Framework**
 
 ### Create DBContext class
 
-The first step is to create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database.
+The first step is to create a DbContext class called **OrderContext** to connect to a Microsoft SQL Server database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -473,7 +470,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Create data access layer to perform data operation
 
-Now, you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table.
+Now, create a class named **OrderDataAccessLayer**, which acts as the data access layer for retrieving records from the database table.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -507,7 +504,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Creating Web API Controller
 
- A Web API Controller has to be created which allows ComboBox directly to consume data from the Entity framework.
+Create a Web API controller to allow the ComboBox to consume data from Entity Framework directly.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -554,7 +551,7 @@ namespace EFDropDown.Controllers
 
 ### Configure ComboBox component using Web API adaptor
 
-Now, you can configure the ComboBox using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
+Now, configure the ComboBox using the **SfDataManager** to interact with the created Web API and consume data. To interact with a Web API, use WebApiAdaptor.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
diff --git a/blazor/combobox/disabled-items.md b/blazor/combobox/disabled-items.md
index b714b247a7..974471d61b 100644
--- a/blazor/combobox/disabled-items.md
+++ b/blazor/combobox/disabled-items.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Disabled Items in Blazor ComboBox Component
 
-The [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `ComboBoxFieldSettings.Disabled` property.
+The [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) allows individual items to be enabled or disabled based on application logic. Map a boolean field from the data source to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Disabled) property in field settings to mark specific items as disabled. Disabled items remain visible but cannot be selected as the value of the component.
 
-In the following sample, State are grouped according on its category using `Disabled` field.
+In the following sample, items are disabled based on a data field mapped to Disabled.
 
 {% highlight cshtml %}
 
@@ -27,11 +27,11 @@ The disableItem method can be used to handle dynamic changing in disable state o
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
-| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | Not applicable for Blazor ComboBox; update the data-bound Disabled field instead. |
+| itemIndex | <code>number</code> | Not applicable for Blazor ComboBox; update the data-bound Disabled field instead. |
 
 ## Enabled
 
-If you want to disabled the overall component to set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false.
+To disable the entire component, set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false.
 
-![Disabled ComboBox Component](./images/combobox-disable.png)
+![Disabled ComboBox Component](./images/combobox-disable.png)
\ No newline at end of file
diff --git a/blazor/combobox/events.md b/blazor/combobox/events.md
index 675420b308..00ff6baf31 100644
--- a/blazor/combobox/events.md
+++ b/blazor/combobox/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor ComboBox Component
 
-This section explains the list of events of the ComboBox component which will be triggered for appropriate ComboBox actions.
+This section lists the events available in the ComboBox component and when they are triggered during typical interactions.
 
 ## Blur
 
-`Blur` event triggers when the input loses focus.
+The `Blur` event triggers when the input loses focus. Use it to validate, format, or commit values when users leave the control.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -46,8 +46,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## ValueChange
 
-`ValueChange` event triggers when the ComboBox value is changed.
-
+The `ValueChange` event triggers when the ComboBox value is changed and committed.
 ```cshtml
 
 @using Syncfusion.Blazor.DropDowns
@@ -81,7 +80,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Closed
 
-`Closed` event triggers after the popup has been closed.
+The `Closed` event triggers after the popup has been closed and the UI has updated. Use it to perform actions that depend on the popup being fully hidden.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -114,7 +113,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Created
 
-`Created` event triggers when the component is created.
+The `Created` event triggers when the component is created and its initial rendering is complete. Use it for one-time initialization logic.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -147,7 +146,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Destroyed
 
-`Destroyed` event triggers when the component is destroyed.
+The `Destroyed` event triggers when the component is disposed. Use it to release resources and unsubscribe from external services.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -180,7 +179,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Focus
 
-`Focus` event triggers when the input gets focus.
+The `Focus` event triggers when the input gains focus. Use it to show context hints or to adjust UI state when the control is focused.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -213,7 +212,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnOpen
 
-`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The `OnOpen` event triggers before the popup opens. This event is cancelable; prevent opening by setting the event argument’s cancel option when available. Use it to customize popup content or apply conditions before showing the list.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -246,7 +245,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnClose
 
-`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The `OnClose` event triggers before the popup closes. This event is cancelable; prevent closing by setting the event argument’s cancel option when available. Use it to validate the current value or maintain popup state.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -279,7 +278,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## DataBound
 
-`DataBound` event triggers when the data source is populated in the popup list.
+The `DataBound` event triggers when the data source is bound and the popup list is populated. Use it to perform post-binding tasks such as selecting a default item or measuring list size.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -312,7 +311,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Filtering
 
-`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled.
+The `Filtering` event triggers while typing in the input when `AllowFiltering` is enabled. Use it to customize the filtering logic, modify the query, or provide remote filtering based on the typed text.
 
 ```cshtml
 
@@ -348,7 +347,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnActionBegin
 
-`OnActionBegin` event triggers before fetching data from the remote server.
+The `OnActionBegin` event triggers before fetching data from a remote server when using `SfDataManager`. Use it to modify the query or show a loading indicator.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -386,7 +385,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnActionComplete
 
-`OnActionComplete` event triggers after data is fetched successfully from the remote server.
+The `OnActionComplete` event triggers after data is fetched successfully from a remote server.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -424,7 +423,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnActionFailure
 
-`OnActionFailure` event triggers when the data fetch request from the remote server fails.
+The `OnActionFailure` event triggers when a remote data fetch fails.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -462,7 +461,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## OnValueSelect
 
-`OnValueSelect` event triggers when a user selects an item in the popup using the mouse/tap or keyboard navigation.
+The `OnValueSelect` event triggers when a user selects an item from the popup using the mouse, touch, or keyboard navigation. 
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -495,7 +494,7 @@ This section explains the list of events of the ComboBox component which will be
 
 ## Opened
 
-`Opened` event triggers when the popup opens.
+The `Opened` event triggers when the popup opens and is visible. 
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -530,5 +529,4 @@ This section explains the list of events of the ComboBox component which will be
 ## See also
 * [How to pass an extra parameter to Blazor ComboBox ValueChange handler?](https://www.syncfusion.com/kb/13138/how-to-pass-an-extra-parameter-to-blazor-combobox-valuechange-handler)
 
-N> ComboBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
-
+N> ComboBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/combobox/filtering.md b/blazor/combobox/filtering.md
index 9fa01b8fdf..f027038241 100644
--- a/blazor/combobox/filtering.md
+++ b/blazor/combobox/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filtering in Blazor ComboBox Component
 
-The ComboBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) is enabled. The filter operation starts as soon as you start typing characters in the search box. Default value of AllowFiltering is `false`.
+The ComboBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowFiltering) is enabled. The filter operation starts as soon as characters are typed in the input. The default value of AllowFiltering is `false`.
 
 ## Local data
 
@@ -21,11 +21,11 @@ The following code demonstrates the filtering functionality with local data in t
 
 {% endhighlight %}
 
-![Blazor ComboBox with local data filtering.](images/filtering/blazor-combobox-with-local-data-filtering.png)
+![Blazor ComboBox with local data filtering](images/filtering/blazor-combobox-with-local-data-filtering.png)
 
 ## Remote data
 
-For Remote data, each key press, filter action request is made at the server end.
+For remote data, each key press sends a filter request to the server when using DataManager with filtering enabled.
 
 The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the ComboBox component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
 
@@ -37,7 +37,7 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http
 
 ## Debounce delay
 
-You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
+Use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
 
 {% highlight cshtml %}
 
@@ -49,13 +49,13 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify the string matching mode used during search. The available `FilterType` options and their descriptions are:
 
 FilterType     | Description
 ------------ | -------------
   [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contained with specified value.
+  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with the specified value.
+  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contains the specified value.
 
 In the following example, `EndsWith` filter type has been mapped to the `FilterType` property.
 
@@ -65,7 +65,7 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 {% endhighlight %}
 
-![Blazor ComboBox with Filter Type.](images/filtering/blazor-combobox-filter-type.png)
+![Blazor ComboBox with Filter Type](images/filtering/blazor-combobox-filter-type.png)
 
 ## Minimum filter length
 
@@ -83,7 +83,7 @@ In the following example, the remote request does not fetch the search data unti
 
 ## Multi column filtering 
 
-In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme files, support for multi column can be enabled by adding `e-multi-column` class in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property.
+In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme files, support for multi column layout can be enabled by adding the `e-multi-column` class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_CssClass) property.
 
 {% highlight cshtml %}
 
@@ -93,7 +93,7 @@ In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme fi
 
 ![Blazor ComboBox with Multi Column filtering.](images/filtering/blazor-combobox-multi-column.png)
 
-You can achieve multiple column(field) filtering by passing the List of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
+Achieve multiple column(field) filtering by passing the list of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
 
 {% highlight cshtml %}
 
@@ -101,13 +101,13 @@ You can achieve multiple column(field) filtering by passing the List of [predica
 
 {% endhighlight %}
 
-![Blazor ComboBox with Multi Column filtering.](images/filtering/blazor-combobox-multi-colum-filtering.gif)
+![Blazor ComboBox with Multi Column filtering](images/filtering/blazor-combobox-multi-colum-filtering.gif)
 
 ## Case sensitive filtering
 
-The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
+The data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
 
-The following example shows how to perform case-sensitive filter.
+The following example shows how to perform case-sensitive filtering.
 
 {% highlight cshtml %}
 
@@ -117,11 +117,11 @@ The following example shows how to perform case-sensitive filter.
 
 ## Custom filtering
 
-ComboBox component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source.
+ComboBox component filter queries can be customized using the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Filtering) event. You can also filter text across multiple columns in the data source by composing predicates.
 
-In the below sample demonstration, filter the data using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both the fields. 
+In the below sample demonstration, the data is filtered using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both fields. 
 
-For instance , the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. But you can filter the data by typing the `N` or `D` character and it will showcase the `Nancy`(FirstName field) in the popup.
+For instance, the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. You can filter the data by typing `N` or `D`, and it will display `Nancy` (FirstName field) in the popup.
 
 {% highlight cshtml %}
 
@@ -133,14 +133,14 @@ For instance , the data source item consists of `FirstName` as `Nancy` and `Last
 
 ## Prevent popup opening when filtering
 
-To prevent the ComboBox dropdown from opening when filtering is applied, you can use the [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) argument in the [BeforeOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html). The `BeforeOpenEventArgs.Cancel` argument is a boolean value that can be set to true to cancel the dropdown opening, or false to allow the dropdown to open.
+To prevent the ComboBox dropdown from opening when filtering is applied, use the [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) argument in the [BeforeOpenEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html). Set it to true to cancel the dropdown opening, or false to allow the dropdown to open.
 
-In the following example, the isTyped flag is used to track whether the filtering action is taking place. The `OnFiltering` method sets the flag to true when the filtering action starts, and the `OnBeforeOpen` method cancels the dropdown opening if the flag is set to true. Finally, the `OnBeforeOpen` method resets the flag to false to prepare for the next filtering action.
+In the following example, the `isTyped` flag is used to track whether the filtering action is taking place. The `OnFiltering` method sets the flag to true when the filtering action starts, and the `OnBeforeOpen` method cancels the dropdown opening if the flag is set to true. Finally, the `OnBeforeOpen` method resets the flag to false to prepare for the next filtering action.
 
-> This will prevent the ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the ComboBox.
+> This prevents the ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the ComboBox.
 
 {% highlight cshtml %}
 
 {% include_relative code-snippet/filtering/prevent-popupopen-in-filtering.razor %}
 
-{% endhighlight %}
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/combobox/form-validation.md b/blazor/combobox/form-validation.md
index b82824ab2d..66d15f46bb 100644
--- a/blazor/combobox/form-validation.md
+++ b/blazor/combobox/form-validation.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Form Validation in ComboBox
 
-This demonstrates the creation of a form that includes a dropdown list, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted.
+This article demonstrates how to use the Syncfusion ComboBox within a Blazor EditForm to validate user input with data annotations. The example shows a form where the user selects an item from the ComboBox, and validation ensures required fields are completed before submission.
 
 ## ComboBox inside edit form
 
@@ -17,11 +17,11 @@ The ComboBox component can be used inside an EditForm to create a form that incl
 
 When the ComboBox input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.
 
-* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type Countries, and triggers the handleSubmit() method when the form is submitted.
-* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties.
-* The ValidationSummary component displays a summary of all validation errors on the form.
-* The ValidationMessage component displays a validation error message for the Name property of the model variable.
-* The submit button submits the form and triggers the handleSubmit() method when clicked.
+- The EditForm component wraps the entire form, sets the Model to a view model (for example, Countries), and invokes a submit handler when the form is submitted.
+- The DataAnnotationsValidator component enables validation based on data annotation attributes (such as [Required]) applied to model properties.
+- The ValidationSummary component displays a summary of all validation errors in the form.
+- The ValidationMessage component displays a validation error message for the specific model property bound to the ComboBox (for example, the Name property).
+- The submit button submits the form and invokes the submit handler when clicked.
 
 {% highlight cshtml %}
 
@@ -29,4 +29,4 @@ When the ComboBox input is valid, the form is ready to be submitted. If the inpu
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png)" %}
diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md
index 1c0e15f557..bd5e985a46 100644
--- a/blazor/combobox/getting-started-with-web-app.md
+++ b/blazor/combobox/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ComboBox Component in Web App
 
-This section briefly explains about how to include [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor ComboBox](https://www
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the Blazor Web App
 
-To add **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor ComboBox** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.DropDowns --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBpNiBuBWhiNjHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox Component](./images/blazor-combobox-component.png)" %}
 
@@ -263,7 +292,7 @@ After initializing, populate the ComboBox with data using the [DataSource](https
 
 ## Custom values
 
-The ComboBox allows the users to give input as custom value, which is not required to present in predefined set of values. By default, this support is enabled by [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted.
+The ComboBox allows users to input custom values that are not present in the predefined list. This support is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, the text and value are treated the same, and the custom value is posted with the form on submit.
 
 {% tabs %}
 {% highlight razor %}
@@ -279,7 +308,7 @@ The ComboBox allows the users to give input as custom value, which is not requir
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the ComboBox input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties respectively.
+By default, the popup list width automatically matches the ComboBox input width, and the popup height is `350px`. The height and width can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties, respectively.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/combobox/getting-started.md b/blazor/combobox/getting-started.md
index 2e3a26e078..916470485e 100644
--- a/blazor/combobox/getting-started.md
+++ b/blazor/combobox/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor ComboBox Component
 
-This section briefly explains about how to include [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with Blazor ComboBox component, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox) sample.
+To get started quickly with the Blazor ComboBox component, review the following video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=VYK2xHC_Lrg"%}
@@ -26,11 +26,11 @@ To get started quickly with Blazor ComboBox component, you can check out this vi
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor ComboBox** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -70,9 +70,9 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure you are in the project root directory where the `.csproj` file is located.
+- Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -129,7 +129,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet and script references to the `<head>` section of **~/index.html**.
 
 ```html
 <head>
@@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for ways to add script references in a Blazor application.
 
 ## Add Blazor ComboBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox component in the **~/Pages/Index.razor** file.
+Add the Syncfusion Blazor ComboBox component in **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -158,7 +158,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ComboBox compone
 
 ## Binding data source
 
-After initializing, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the ComboBox component.
+After initialization, populate the ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects (with ID and Text fields) is bound to the ComboBox.
 
 {% tabs %}
 {% highlight razor %}
@@ -194,7 +194,7 @@ After initializing, populate the ComboBox with data using the [DataSource](https
 
 ## Custom values
 
-The ComboBox allows the users to give input as custom value, which is not required to present in predefined set of values. By default, this support is enabled by [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted.
+The ComboBox supports custom values that are not present in the predefined list. This behavior is enabled by the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this mode, the typed text is treated as both the display text and the value, and the custom value is posted with the form on submit.
 
 {% tabs %}
 {% highlight razor %}
@@ -210,7 +210,7 @@ The ComboBox allows the users to give input as custom value, which is not requir
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the ComboBox input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties respectively.
+By default, the popup list width automatically adjusts to the ComboBox input width, and the popup height is `350px`. The height and width of the popup list can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html) properties.
 
 {% tabs %}
 {% highlight razor %}
@@ -222,10 +222,10 @@ By default, the width of the popup list automatically adjusts according to the C
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Popup Height and Width in Blazor ComboBox](./images/blazor-combobox-popup-customization.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing popup height and width in Blazor ComboBox](./images/blazor-combobox-popup-customization.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/combobox/grouping.md b/blazor/combobox/grouping.md
index 5101ed8d24..2ead87649a 100644
--- a/blazor/combobox/grouping.md
+++ b/blazor/combobox/grouping.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Grouping in Blazor ComboBox Component
 
-The ComboBox supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field in the data table. The group header is displayed both as inline and fixed headers. The fixed group header content is updated dynamically on scrolling the popup list with its category value.
+The ComboBox supports grouping items by a category field in the data source. Map the category of each list item using the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. Group headers are shown inline and as a fixed (floating) header. The fixed group header updates dynamically while scrolling the popup list to reflect the current group in view.
 
 To get started quickly with grouping in the Blazor ComboBox component, you can check the video below.
 
@@ -27,13 +27,12 @@ In the following sample, vegetables are grouped according to their category usin
 
 ## Fixed group header
 
-Classify the items based on the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field mapped to the control. The headers of group items will be fixed at the top till their belonging items ends up on scrolling.
-
-The group header title under which appropriate sub-items are categorized is customize with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
+Classify items by mapping the [ComboBoxFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. The headers for grouped items remain fixed at the top of the popup while scrolling, until the last item in that group passes out of view.
 
+The group header text, under which the corresponding sub-items are categorized, can be customized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template applies to both the inline group headers and the floating (fixed) group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
 ## Limitations of grouping
 
-Grouping feature has some limitations. These are:
-
-* The component will support only single level of grouping, and you cannot specify it as like TreeView component.
+Grouping has the following limitations:
 
+* Only a single level of grouping is supported; hierarchical grouping (as in a TreeView) is not available.
+* Group headers are non-selectable and used for visual categorization only.
\ No newline at end of file
diff --git a/blazor/combobox/how-to/tooltip.md b/blazor/combobox/how-to/tooltip.md
index 70245ebd57..42e5a772fb 100644
--- a/blazor/combobox/how-to/tooltip.md
+++ b/blazor/combobox/how-to/tooltip.md
@@ -7,11 +7,11 @@ control: ComboBox
 documentation: ug
 ---
 
-# DropDownList options with tooltip in Blazor ComboBox Component
+# Show tooltip for ComboBox items in Blazor
 
-You can achieve this behavior by using tooltip component. When the mouse is hovered over the DropDownList option, a tooltip appears with information about the hovered list item.
+Display a tooltip for ComboBox list items by using the SfTooltip component. When the user hovers over an item in the ComboBox popup, a tooltip appears with information about the hovered item.
 
-The following code demonstrates how to display a tooltip when hovering over the DropDownList option.
+The following example shows how to display a tooltip when hovering over ComboBox list items.
 
 ```cshtml
 <SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-list-item .name[title]">
@@ -64,4 +64,4 @@ The following code demonstrates how to display a tooltip when hovering over the
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png)" %}
diff --git a/blazor/combobox/images/blazor-create-web-app.png b/blazor/combobox/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/combobox/images/blazor-create-web-app.png differ
diff --git a/blazor/combobox/localization.md b/blazor/combobox/localization.md
index dfa5e5ee3f..1630e6f0d0 100644
--- a/blazor/combobox/localization.md
+++ b/blazor/combobox/localization.md
@@ -7,11 +7,11 @@ control: ComboBox
 documentation: ug
 ---
 
-# Globalization and Localization in Blazor ComboBox Component
+# Localization and Globalization in Blazor ComboBox Component
 
 ## Localization
 
-[Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) supports localization of built-in text such as “No records found” and “Action failure.” To localize component texts, add the required culture resources as described in the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic. Ensure the application culture (CurrentCulture/CurrentUICulture) is set appropriately so localized strings are displayed.
 
 ## Globalization
 
@@ -27,4 +27,4 @@ Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 {% endhighlight %}
 
-![Blazor ComboBox with EnableRtl](./images/localization/blazor_combobox_enableRtl.png)
\ No newline at end of file
+![Blazor ComboBox with RTL enabled](./images/localization/blazor_combobox_enableRtl.png)
\ No newline at end of file
diff --git a/blazor/combobox/native-events.md b/blazor/combobox/native-events.md
index 90ee153247..2dcf88e851 100644
--- a/blazor/combobox/native-events.md
+++ b/blazor/combobox/native-events.md
@@ -13,9 +13,9 @@ The following section explains the steps to include native events and pass data
 
 ## Bind native events to ComboBox
 
-You can access any native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Bind any native event by adding the corresponding `@on<event>` attribute to the component and assigning an event handler. The attribute’s value is treated as the handler to invoke when the event occurs.
 
-In the following example, the keyPressed method is called every time the key is pressed on input.
+In the following example, the `KeyPressed` method is invoked whenever a key is pressed inside the ComboBox input.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -48,7 +48,7 @@ In the following example, the keyPressed method is called every time the key is
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLrGUlddXtaX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-Also, you can rewrite the previous code example as follows using Lambda expressions.
+Also, rewrite the previous code example as follows using Lambda expressions.
 
 ```cshtml
 <SfComboBox TValue="string" @onkeypress="@(() => Console.WriteLine("Key Pressed!"))"></SfComboBox>
@@ -56,16 +56,16 @@ Also, you can rewrite the previous code example as follows using Lambda expressi
 
 ## Pass event data to event handler
 
-Blazor provides set of argument types to map to native events. The list of event types and event arguments are:
+Blazor maps native events to strongly typed argument classes. Choose the handler parameter type that matches the event being handled:
 
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+- Focus events: FocusEventArgs
+- Mouse events: MouseEventArgs
+- Keyboard events: KeyboardEventArgs
+- Input/change events: ChangeEventArgs or EventArgs
+- Touch events: TouchEventArgs
+- Pointer events: PointerEventArgs
 
-In the following example, the keyPressed method is called every time any key is pressed inside input. But the message will print when you press "c" key.
+In the following example, the `KeyPressed` method receives `KeyboardEventArgs` and conditionally processes only when the “c” key is pressed.
 
 ```cshtml
 <SfComboBox TValue="string" TItem="Country" @onkeypress="@(e => KeyPressed(e))" DataSource="@Countries">
diff --git a/blazor/combobox/placeholder-and-floatlabel.md b/blazor/combobox/placeholder-and-floatlabel.md
index 92954becf2..76bcf67bae 100644
--- a/blazor/combobox/placeholder-and-floatlabel.md
+++ b/blazor/combobox/placeholder-and-floatlabel.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Placeholder
 
-Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Placeholder) property to display a hint describing the expected value in the input. In the following example, “Select a game” is set as the placeholder, which applies the corresponding attribute to the input element in the DOM.
 
 {% highlight cshtml %}
 
@@ -23,7 +23,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ## Color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
 
 {% highlight cshtml %}
 
@@ -53,11 +53,11 @@ The floating label supports the types of actions as follow.
 
 Type     | Description
 ------------ | -------------
-  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The floating label will float above the input after focusing, or entering a value in the input.
-  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The floating label will always float above the input.
-  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | By default, never float the label in the input when the placeholder is available.
+  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The label floats above the input when it is focused or a value is entered.
+  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The label always floats above the input.
+  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | The label never floats above the input when the placeholder is available.
 
-The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
+The FloatLabelType set to Auto is demonstrated in the following example.
 
 {% highlight cshtml %}
 
@@ -69,7 +69,7 @@ The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
 
 ## Customizing the float label element’s focusing color
 
-You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property.
+Change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property.
 
 {% highlight cshtml %}
 
diff --git a/blazor/combobox/popup-setting.md b/blazor/combobox/popup-setting.md
index 1703d4fbc8..e8f1938a57 100644
--- a/blazor/combobox/popup-setting.md
+++ b/blazor/combobox/popup-setting.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Popup resize
 
-You can dynamically adjust the size of the popup in the ComboBox component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
+Dynamically adjust the size of the popup by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup to improve visibility and control. The resized dimensions are preserved while the component instance remains active.
 
 {% highlight Razor %}
 
@@ -25,7 +25,7 @@ You can dynamically adjust the size of the popup in the ComboBox component by us
 
 Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the ComboBox component.
 
-In the following sample, the `PopupWidth` is set as `300px`.
+In the following sample, `PopupWidth` is set to `300px`.
 
 {% highlight cshtml %}
 
@@ -39,7 +39,7 @@ In the following sample, the `PopupWidth` is set as `300px`.
 
 Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of the `PopupHeight` is `300px`.
 
-In the following sample, the `PopupHeight` is set as `500px`.
+In the following sample, `PopupHeight` is set to `500px`.
 
 {% highlight cshtml %}
 
@@ -51,13 +51,13 @@ In the following sample, the `PopupHeight` is set as `500px`.
 
 ## Change the popup z-index
 
-Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component popup element.
+Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component’s popup element to control stacking order.
 
-Defaults to `1000`
+Defaults to `1000`.
 
 ## Show popup on initial loading
 
-You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) Event.
+Show the popup when the component is initialized by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) event.
 
 {% highlight Razor %}
 
@@ -69,7 +69,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 ## Preventing opening and closing
 
-Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) events. 
+Prevent the popup from opening or closing by setting [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) or [PopupEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) to `true` in the corresponding [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) events.
 
 {% highlight Razor %}
 
@@ -77,13 +77,13 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs
 
 {% endhighlight %}
 
-![Blazor ComboBox with Preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png)
+![Blazor ComboBox with preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png)
 
-The following events are used to trigger when opening and closing popup.
+The following events are used when opening and closing the popup.
 
 ### OnOpen event
 
-The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnOpen) event triggers before the popup opens. If this event is canceled, the popup remains closed.
 
 {% highlight Razor %}
 
@@ -97,7 +97,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ### OnClose event
 
-The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnClose) event triggers before the popup closes. If this event is canceled, the popup remains open.
 
 {% highlight Razor %}
 
@@ -117,7 +117,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.C
 
 ## Popup height based on available space
 
-You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
+Adjust the popup height based on the available viewport space by handling the window `resize` event and updating the popup element’s height at runtime.
 
 {% highlight Razor %}
 
@@ -145,4 +145,4 @@ You can achieve this by binding the `resize` event in window and update the heig
 {% endhighlight %}
 {% endtabs %}
 
-![Popup height based on available space in Blazor ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif)
+![Popup height based on available space in Blazor ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif)
\ No newline at end of file
diff --git a/blazor/combobox/selection.md b/blazor/combobox/selection.md
index f5c5f700f4..6889420052 100644
--- a/blazor/combobox/selection.md
+++ b/blazor/combobox/selection.md
@@ -19,7 +19,7 @@ Get the selected value of the ComboBox component in the [ValueChange](https://he
 
 {% endhighlight %}
 
-Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
+Get the complete data item for the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
 {% highlight cshtml %}
 
@@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https://
 
 ## Preselected value on OnInitializedAsync
 
-Bind the pre-selected value to the ComboBox component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component.
+Bind the preselected value to the ComboBox component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Value) attribute. Assign the bound value in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle so the component renders with the initial selection.
 
 {% highlight cshtml %}
 
@@ -37,11 +37,11 @@ Bind the pre-selected value to the ComboBox component using the [@bind-Value](ht
 
 {% endhighlight %}
 
-![Blazor ComboBox with pre-select value](./images/selection/blazor_combobox_preselect-value.png)
+![Blazor ComboBox with preselect value](./images/selection/blazor_combobox_preselect-value.png)
 
 ## Programmatically change the selected value
 
-Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component.
+Change the component value programmatically or externally by using the component instance with the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample shows how to set the value in a button click handler.
 
 {% highlight cshtml %}
 
@@ -49,11 +49,11 @@ Change the component value programmatically or externally by the component insta
 
 {% endhighlight %}
 
-![Blazor ComboBox with pre-select value before](./images/selection/blazor_combobox_changing-selected-value.gif)
+![Blazor ComboBox changing selected value](./images/selection/blazor_combobox_changing-selected-value.gif)
 
 ### ValueChange event
 
-The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event is triggered when the value of the ComboBox component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event triggers when the value of the ComboBox is changed. The event provides arguments that include the current and previous values.
 
 {% highlight cshtml %}
 
@@ -63,7 +63,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo
 
 ### OnValueSelect event
 
-The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnValueSelect) event is triggered when you select any value in the ComboBox component. Get the necessary arguments including the [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_ItemData). Also,  prevent the selection of items by setting the [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) property as `true` provided by the event arguments. 
+The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_OnValueSelect) event triggers when a value is selected from the popup. Access the selected item via [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_ItemData). To prevent selection, set [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) to `true`.
 
 {% highlight cshtml %}
 
@@ -73,11 +73,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ## Preselect value with index
 
-Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource.
+Bind the preselected item by index using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Index) attribute. The item at the specified index in the data source will be selected.
 
-N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined.
+N> The selection depends on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) setting. If sorting is applied, the index refers to the sorted data.
 
-The following sample shows how to bind the index on the initial rendering.
+The following sample shows how to bind the index on initial rendering.
 
 {% highlight cshtml %}
 
@@ -89,7 +89,7 @@ The following sample shows how to bind the index on the initial rendering.
 
 ## Autofill the selected value
 
-The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) property specifies whether the input field of the component automatically suggests and fills in the first matched item as the user types, based on the items in the component's data source. If no matches are found, the input field will not be filled, and no action will occur. The default value of `Autofill` is `false`.
+The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) property enables the input to suggest and fill the first matched item as the user types, based on the data source. If no matches are found, the input remains unchanged. The default value is `false`.
 
 {% highlight Razor %}
 
@@ -101,7 +101,7 @@ The [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns
 
 ## Get selected item by value
 
-Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method.
+Retrieve the full data item corresponding to a selected value by using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_GetDataByValue__0_) method.
 
 {% highlight cshtml %}
 
@@ -129,11 +129,11 @@ To clear the ComboBox value programmatically, use the [ClearAsync](https://help.
 
 {% endhighlight %}
 
-![Blazor ComboBox with programatically clear value](./images/selection/blazor_combobox_with-programmatically-clear-value.gif)
+![Blazor ComboBox with programmatically clear value](./images/selection/blazor_combobox_with-programmatically-clear-value.gif)
 
 ## Prevent reload on form submit
 
-To prevent the page from reloading when using the ComboBox component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked.
+To prevent page reload when using the ComboBox inside a form, specify the button type as "button" via the `HTMLAttributes` property so the button does not submit the form.
 
 {% highlight cshtml %}
 
@@ -143,7 +143,7 @@ To prevent the page from reloading when using the ComboBox component inside a fo
 
 ## Programmatically trigger onChange event
 
-Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [ComboBoxEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page.
+Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_ValueChange) event manually using the instance (from the @ref attribute) of [ComboBoxEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html). In the following example, `ValueChange` is invoked inside the `Created` event handler and runs when the component is rendered.
 
 {% highlight cshtml %}
 
@@ -153,7 +153,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ## Programmatically focus in and focus out the component
 
-In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the combobox, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the combobox.
+Use buttons to invoke the `FocusAsync()` and `FocusOutAsync()` methods on the ComboBox instance for programmatic focus management.
 
 {% highlight Razor %}
 
@@ -161,11 +161,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i
 
 {% endhighlight %}
 
-While focusing and focus out the following event get triggered.
+While focusing in and out, the following events are triggered.
 
 ### Focus event
 
-The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Focus) event will trigger when the component gets focused. 
+The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Focus) event triggers when the component receives focus. 
 
 {% highlight cshtml %}
 
@@ -175,7 +175,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Co
 
 ### Blur event
 
-The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Blur) event will trigger when focus moves out from the component. 
+The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Blur) event triggers when focus moves out from the component. 
 
 {% highlight cshtml %}
 
diff --git a/blazor/combobox/sorting.md b/blazor/combobox/sorting.md
index 11be2754f2..69047b1b71 100644
--- a/blazor/combobox/sorting.md
+++ b/blazor/combobox/sorting.md
@@ -9,17 +9,17 @@ documentation: ug
 
 # Sorting in Blazor ComboBox Component
 
-The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
+Sorting enables displaying items in ascending or descending order. To enable sorting in the ComboBox, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value.
 
-The available type of sort orders are:
+The available sort orders are:
 
 SortOrder     | Description
 ------------ | -------------
-  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorting.
-  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | The data source is sorting with ascending order.
-  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | The data source is sorting with descending order.
+  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorted.
+  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | The data source is sorted in ascending order.
+  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | The data source is sorted in descending order.
 
-In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup.
+In the following sample, items in the data source are initially in random order. Use SortOrder to display them alphanumerically in ascending or descending order in the popup.
 
 {% highlight cshtml %}
 
@@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled
 
 {% endhighlight %}
 
-![Blazor ComboBox with sortOrder descending](./images/sorting/blazor_combobox_sorting.png)
\ No newline at end of file
+![Blazor ComboBox with SortOrder descending](./images/sorting/blazor_combobox_sorting.png)
\ No newline at end of file
diff --git a/blazor/combobox/style.md b/blazor/combobox/style.md
index 04131eee28..3d7f4a5b90 100644
--- a/blazor/combobox/style.md
+++ b/blazor/combobox/style.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Style and appearance in Blazor ComboBox Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content provides the CSS structure and options that can be used to modify the component’s appearance based on user preference.
 
 ## Read-only mode
 
@@ -25,7 +25,7 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
 
 ## Disabled state
 
-Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not.
+Specify a boolean value for the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to indicate whether the component is enabled.
 
 {% highlight cshtml %}
 
@@ -33,7 +33,7 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor
 
 {% endhighlight %}
 
-![Blazor ComboBox with Disabled ](./images/style/blazor_ComboBox_disabled-state.png)
+![Blazor ComboBox in disabled state](./images/style/blazor_ComboBox_disabled-state.png)
 
 ## CssClass  
 
@@ -41,11 +41,11 @@ Specifies the CSS class name that can be appended to the root element of the Com
 
 Some of the possible values are:
 
-* `e-success`: Denotes the component in a success state, adding a green color to the ComboBox input field.
-* `e-warning`: Denotes the component in a warning state, adding an orange color to the ComboBox input field.
-* `e-error`: Denotes the component in an error state, adding a red color to the ComboBox input field.
-* `e-outline`: Supports only the material theme.
-* `e-multi-column`: Provides two or more columns in the popup, aligning the columns like a grid.
+-`e-success`: Denotes a success state, applying a green style to the input.
+- `e-warning`: Denotes a warning state, applying an orange style to the input.
+- `e-error`: Denotes an error state, applying a red style to the input.
+- `e-outline`:  Applies outline styles (supported in Material theme).
+- `e-multi-column`: Lays out two or more columns in the popup.
 
 {% highlight Razor %}
 
@@ -57,7 +57,7 @@ Some of the possible values are:
 
 ## Customizing the disabled component’s text color
 
-You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
+Customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
 
 {% highlight cshtml %}
 
@@ -67,9 +67,9 @@ You can customize the text color of a disabled component by targeting its CSS cl
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Disabled component text color](./images/style/blazor_combobox_disabled-text-color.png)" %}
 
-## Customizing the appearance of container element
+## Customizing the appearance of the container element
 
-You can customize the appearance of the container element within the ComboBox component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
+Customize the ComboBox container by targeting the `.e-input` selector (the parent of the input), and apply the desired styles.
 
 {% highlight cshtml %}
 
@@ -81,7 +81,7 @@ You can customize the appearance of the container element within the ComboBox co
 
 ## Customizing the dropdown icon’s color
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the combobox component, and setting the desired color to the `color` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting the `.e-ddl-icon.e-icons` selector and setting the desired `color`.
 
 {% highlight cshtml %}
 
@@ -93,7 +93,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 ## Customizing the focus color
 
-You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
+Customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
 
 {% highlight cshtml %}
 
@@ -103,9 +103,9 @@ You can customize the component color when it is focused by targeting its CSS cl
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtLUsVhGUFizesmJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox focus color](./images/style/blazor_combobox_focus-color.png)" %}
 
-## Customizing the outline theme's focus color
+## Customizing the outline theme’s focus color
 
-You can customize the color of the combobox component when it is in a focused state and rendered with an outline theme,  by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
+Customize the color of the combobox component when it is in a focused state and rendered with an outline theme,  by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
 
 {% highlight cshtml %}
 
@@ -115,9 +115,9 @@ You can customize the color of the combobox component when it is in a focused st
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhqsVBQKFiQpUgc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox focusing color outline theme](./images/style/blazor_combobox_outline-focus-color.png)" %}
 
-## Customizing the background color of focus, hover, and active items
+## Customizing the background color of focused, hovered, and active items
 
-You can customize the background color and text color of list items within the combobox component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties.
+Customize background and text colors of list items in focused, hovered, or active states by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and setting `background-color` and `color`.
 
 {% highlight cshtml %}
 
@@ -127,9 +127,9 @@ You can customize the background color and text color of list items within the c
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhKWhLwgPKXzzDZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_combobox_background-color.png)" %}
 
-## Customizing the appearance of pop-up element
+## Customizing the appearance of the popup element
 
-You can customize the appearance of the popup element within the combobox component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.
+Customize the popup’s appearance by targeting list item selectors within the popup and applying the desired styles. For example, use `.e-list-item.e-item-focus` to style a focused list item.
 
 {% highlight cshtml %}
 
@@ -141,7 +141,7 @@ You can customize the appearance of the popup element within the combobox compon
 
 ## Change the HTML attributes
 
-Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format.
+Add additional HTML attributes such as styles and class to the root element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_HtmlAttributes) property, which accepts any number of key–value pairs.
 
 {% highlight cshtml %}
 
@@ -149,13 +149,11 @@ Add the additional html attributes such as styles, class, and more to the root e
 
 {% endhighlight %}
 
-![Blazor ComboBox with different font family](./images/style/blazor_ComboBox_html-attributes.png)
+![Blazor ComboBox with custom HTML attributes](./images/style/blazor_ComboBox_html-attributes.png)
 
 ## Show tooltip on list item
 
-You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the ComboBox option, a tooltip appears with information about the hovered list item.
-
-The following code demonstrates how to display a tooltip when hovering over the ComboBox option.
+Display a tooltip when hovering over ComboBox options by integrating the Tooltip component and binding it to list items.
 
 {% highlight cshtml %}
 
@@ -171,11 +169,9 @@ In the following code , the CSS style that targets the `.e-list-item` class with
 
 ![Blazor ComboBox with opacity style](./images/style/blazor_combobox_opacity-style.png)
 
-## Disable specific items in DropDownList
-
-Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific combobox component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property.
+## Disable specific items in ComboBox
 
-In the following code, a single list Item is hidden using js interop.
+Prevent certain items from being selected by marking them disabled via a custom class on the popup using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_CssClass) property, and then applying styles or script logic. In the following example, a single list item is disabled using JavaScript interop.
 
 {% tabs %}
 {% highlight razor %}
@@ -199,9 +195,9 @@ In the following code, a single list Item is hidden using js interop.
 {% endhighlight %}
 {% endtabs %}
 
-## Customizing the float label element's focusing color
+## Customizing the float label element’s focusing color
 
-You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused and set the desired color using the `color` property.
+Change the floating label text color when focused by targeting `.e-input-focus` and `.e-float-text.e-label-top`. These selectors represent the floating label in a focused state; set the desired `color`.
 
 {% highlight cshtml %}
 
@@ -213,7 +209,7 @@ You can change the text color of the floating label when it is focused by target
 
 ## Customizing the color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the placeholder color by targeting `input.e-input::placeholder` (scope within the ComboBox as needed) and setting the desired `color`.
 
 {% highlight cshtml %}
 
@@ -223,9 +219,9 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKMrVQqbhTKwJQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with color placeholder](./images/style/blazor_combobox_placeholder-color.png)" %}
 
-## Customizing the placeholder to add mandatory indicator(*)
+## Customizing the placeholder to add a mandatory indicator (*)
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+Append a visual mandatory indicator to the floating placeholder by targeting `.e-float-text::after` and setting the `content` style. This affects appearance only; use form validation to enforce required input.
 
 {% highlight cshtml %}
 
@@ -245,4 +241,4 @@ The appearance of a selected item within a combobox component can be customized
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKCVBGgPVvrliw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_combobox_text-selection-color.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKCVBGgPVvrliw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_combobox_text-selection-color.png)" %}
diff --git a/blazor/combobox/templates.md b/blazor/combobox/templates.md
index a892086086..e1f2ed76d5 100644
--- a/blazor/combobox/templates.md
+++ b/blazor/combobox/templates.md
@@ -9,17 +9,17 @@ documentation: ug
 
 # Templates in Blazor ComboBox Component
 
-The ComboBox has been provided with several options to customize each list item, group title, selected value, header, and footer elements.
+The ComboBox provides several options to customize the appearance and content of list items, group headers, the selected value, and the popup’s header and footer elements.
 
-To quickly get started with Templates in the Blazor ComboBox component, you can watch the video below.
+To quickly get started with templates in the Blazor ComboBox component, watch the following video.
 
 {% youtube "https://www.youtube.com/watch?v=Powq8aAGeAA" %}
 
 ## Item template
 
-The content of each list item within the ComboBox can be customized with the help of [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
+Customize the content of each list item using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
 
-In the following sample, each list item is split into two columns to display relevant data.
+In the following example, each list item is split into two columns to display relevant data.
 
 {% highlight cshtml %}
 
@@ -31,9 +31,9 @@ In the following sample, each list item is split into two columns to display rel
 
 ## Group template
 
-The group header title under which appropriate sub-items are categorized can also be customized with the help of [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group header template.
+Customize the group header text under which sub-items are categorized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is applied to both inline and floating group headers.
 
-In the following sample, employees are grouped according to their country.
+In the following example, employees are grouped by country.
 
 {% highlight cshtml %}
 
diff --git a/blazor/combobox/value-binding.md b/blazor/combobox/value-binding.md
index 1d4d44ba42..d9a8e16ac7 100644
--- a/blazor/combobox/value-binding.md
+++ b/blazor/combobox/value-binding.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title:  Data Binding in Blazor ComboBox Component | Syncfusion
-description: Checkout and learn here all about value binding in Syncfusion Blazor ComboBox component and more.
+description: Discover how to configure value, index, and primitive bindings in the Syncfusion Blazor ComboBox component.
 platform: Blazor
 control: ComboBox
 documentation: ug
@@ -9,16 +9,16 @@ documentation: ug
 
 # Value Binding in ComboBox
 
-Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are.
-
-* bind-Value Binding 
-* bind-Index Binding
+Value binding is the process of passing values between a component and its parent. There are two methods for binding values:
+- bind-Value binding
+- bind-Index binding
 
 ## Bind value binding
 
 The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value)
 
-* **TValue** - Specifies the type of each list item on the suggestion list.
+- TValue: Specifies the value type of the component.
+- TItem: Specifies the type of each item in the data source.
 
 {% highlight cshtml %}
 
@@ -54,7 +54,7 @@ The following code demonstrates array of string as datasource to the ComboBox co
 
 ![Blazor ComboBox with Primitive Type as string](./images/value-binding/blazor_combobox_primitive-type-string.png)
 
-The following code demonstrates array of int as datasource to the ComboBox component.
+The following code demonstrates an array of int as the data source for the ComboBox component.
 
 {% highlight cshtml %}
 
@@ -66,9 +66,9 @@ The following code demonstrates array of int as datasource to the ComboBox compo
 
 ## Object binding
 
-Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the ComboBox component, this is, You can map the class name to `TValue`. 
+Bind object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Value) attribute by setting TValue to the appropriate type. Ensure the field mapped to [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value) corresponds to the bound value.
 
-In the following example, the `Name` column has been mapped to the [ComboBoxFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_Value).
+In the following example, the Name column is mapped to the Value field.
 
 {% highlight cshtml %}
 
@@ -94,9 +94,9 @@ Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Sy
 
 Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to specify whether to show or hide the clear button. When the clear button is clicked, the `Value`, `Text`, and `Index` properties are reset to null.
 
-N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)
+N> If TValue is non-nullable, clearing sets the default value for the type. If TValue is nullable, clearing sets null. For example, if TValue is int, clearing sets 0; if TValue is int?, clearing sets null.
 
-The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type.
+The following sample demonstrates using string as TValue. Clearing the value sets it to null, which is the default for that type.
 
 {% highlight cshtml %}
 
@@ -108,11 +108,11 @@ The following sample demonstrates the `string` used as `TValue`. So, if you clea
 
 ## Dynamically change TItem
 
-The `TItem` property can be changed dynamically by defining the datasource type of the ComboBox component with the help of the `@typeparam` directive. The following sample demonstration explains how to change  the TItem dynamically with different type of datasource.
+The TItem type can be changed dynamically by defining the ComboBox data source type with the `@typeparam` directive. The following example demonstrates changing TItem dynamically with different data sources.
 
 ### Creating generic combobox component
 
-First, create a `ComboBox.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `<TItem>` and `TValue`.
+First, create a ComboBox.razor file as a parent component in the /Pages folder. Add parameter properties for a List<TItem> and TValue.
 
 {% tabs %}
 {% highlight razor %}
@@ -135,14 +135,14 @@ First, create a `ComboBox.razor` file as a parent component in the `/Pages` fold
     public EventCallback<TValue> ComboBoxValueChanged { get; set; }
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ### Usage of generic component with different type
 
-Then, render the Generic ComboBox component with the required `TValue` and `TItem` in the respective razor components. 
+Render the generic ComboBox component with the required TValue and TItem in the respective Razor components.
 
-Here, the ComboBox component is rendered with the TValue as a string type in the `/Index.razor` file and the ComboBox component with TValue as an int nullable type in the `/Counter.razor` file.
+Here, the ComboBox component is rendered with TValue as string in /Index.razor and with TValue as nullable int in /Counter.razor.
 
 **[Index.razor]**
 
@@ -173,7 +173,7 @@ Here, the ComboBox component is rendered with the TValue as a string type in the
     };
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 **[Counter.razor]**
@@ -204,5 +204,5 @@ Here, the ComboBox component is rendered with the TValue as a string type in the
     };
 }
 
-{% endhighlight razor %}
-{% endtabs %}
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/combobox/virtualization.md b/blazor/combobox/virtualization.md
index 669d677bfd..ca122f5a5d 100644
--- a/blazor/combobox/virtualization.md
+++ b/blazor/combobox/virtualization.md
@@ -35,9 +35,9 @@ This feature is applicable to both local and remote data scenarios, providing fl
 
 ## Grouping with Virtualization
 
-The Combobox component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding virtualization, enhancing performance and responsiveness.
+The ComboBox supports grouping with virtualization. Items can be organized into categories by mapping the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ComboBoxFieldSettings_GroupBy) field. After grouping, virtualization behaves like local data binding for a seamless experience. When the data source is remote, an initial request retrieves all data required for grouping; afterward, the grouped data is virtualized similarly to local data.
 
-The following sample shows the example for Grouping with Virtualization.
+The following sample shows grouping with virtualization.
 
 {% highlight cshtml %}
 
@@ -47,11 +47,11 @@ The following sample shows the example for Grouping with Virtualization.
 
 ## Keyboard interaction
 
-Users can navigate through the scrollable content using keyboard keys. This feature loads the next or next set of items based on the key inputs in the popup.The ComboBox supports the following keyboard shortcuts.
+Users can navigate through the virtualized list using the keyboard. Based on key inputs, the next or previous set of items is loaded within the popup. The ComboBox supports the following keyboard shortcuts.
 
 | Key | Action |
 |-----|-----|
-| `ArrowDown` | Loads the next virtual list item if the selection is present in last item of the current page. |
-| `ArrowUp` | Loads the previous virtual list item if the selection is present in first item of the current page. |
+| `ArrowDown` | Loads the next virtual list item if the selection is on the last item of the current page. |
+| `ArrowUp` | Loads the previous virtual list item if the selection is on the first item of the current page. |
 | `PageDown` | Loads the next page and selects the last item in it. |
-| `PageUp` | Loads the previous page and selects the first item in it. |
+| `PageUp` | Loads the previous page and selects the first item in it. |
\ No newline at end of file
diff --git a/blazor/common/images/browse-publish-folder.png b/blazor/common/images/browse-publish-folder.png
new file mode 100644
index 0000000000..5aa1546a1b
Binary files /dev/null and b/blazor/common/images/browse-publish-folder.png differ
diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md
index 518459e5c5..1d8a1a7e20 100644
--- a/blazor/context-menu/getting-started-with-web-app.md
+++ b/blazor/context-menu/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ContextMenu Component in Web App
 
-This section briefly explains about how to include [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ContextMenu](https://www.syncfusion.com/blazor-components/blazor-context-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor ContextMenu](https://
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the Blazor Web App
 
-To add **Blazor ContextMenu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ContextMenu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Navigations and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor ContextMenu** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Navigations --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -240,7 +269,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ContextMenu component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftMLEBgCMeGpg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu Component](./images/blazor-contextmenu-component.png)" %}
 
diff --git a/blazor/context-menu/images/blazor-create-web-app.png b/blazor/context-menu/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/context-menu/images/blazor-create-web-app.png differ
diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md
index 8bfecc1a92..24989f8638 100644
--- a/blazor/dashboard-layout/getting-started-with-web-app.md
+++ b/blazor/dashboard-layout/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Dashboard Layout Component in a Blazor Web App
 
-This section describes how to include the Syncfusion  [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code.
+This section describes how to include the Syncfusion  [Blazor Dashboard Layout](https://www.syncfusion.com/blazor-components/blazor-dashboard) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section describes how to include the Syncfusion  [Blazor Dashboard Layout](
 
 ## Create a New Blazor Web App in Visual Studio
 
-Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) during the creation of your Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the Blazor Web App
 
-To add **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Dashboard Layout** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages are installed in the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, the Package Manager Console can be used to install the required NuGet package
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a New Blazor Web App in Visual Studio Code
 
-Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) during the creation of your Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
 
-If the Blazor Web App uses the `WebAssembly or Auto` render modes, ensure the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages are installed in the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Layouts and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Dashboard Layout** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Layouts](https://www.nuget.org/packages/Syncfusion.Blazor.Layouts/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Layouts --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Layouts` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, Need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files (Server and Client projects).
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, project will contain a single **~/Program.cs** file. So, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add Stylesheet and Script Resources
 
 Reference the theme stylesheet within the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file. These resources are accessed from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dashboard Layout Component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dashboard Layout component in `.razor` file inside the `Pages` folder. If the interactivity location for your web app is set to `Per page/component`, define a render mode at the top of your component, as shown below:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dashboard Layout component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If the **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto`, `WebAssembly`, or `Server`, the render mode will be configured in the `App.razor` file by default and does not need to be added to individual components.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -228,7 +257,7 @@ N> If the **Interactivity Location** is set to `Global` and the **Render Mode**
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dashboard Layout component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dashboard Layout component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %}
 
diff --git a/blazor/dashboard-layout/images/blazor-create-web-app.png b/blazor/dashboard-layout/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/dashboard-layout/images/blazor-create-web-app.png differ
diff --git a/blazor/data-form/autogeneration.md b/blazor/data-form/autogeneration.md
index 0b8cedc2a7..6442b534df 100644
--- a/blazor/data-form/autogeneration.md
+++ b/blazor/data-form/autogeneration.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Configuring auto generation 
 
-Blazor DataForm component generates the editors automatically based on the primitive property types if we use [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) inside it.The types with its corresponding default editor components listed below for reference.
+Blazor DataForm can create editor fields automatically based on the primitive property types when the [FormAutoGenerateItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormAutoGenerateItems.html) tag is used inside the DataForm. The following table lists each supported type with its corresponding default editor component.
 
 | Type | Component |
 | ------------ | ----------------------- |
@@ -21,7 +21,7 @@ Blazor DataForm component generates the editors automatically based on the primi
 | `bool` | [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) |
 | `enum` | [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) |
 
-The below example demonstrates the auto generated items with possible types 
+The following example demonstrates auto-generated items for the supported types.
 
 {% tabs %}
 {% highlight razor tabtitle="FormAutoGenerateItems"  %}
@@ -35,7 +35,7 @@ The below example demonstrates the auto generated items with possible types
 
 ## Combined auto generated and custom fields
 
-The `FormAutoGenerateItems` can be utilized independently, as demonstrated in the previous example, or it can be placed in-between, above, or below multiple `FormItem` tags. This will create editors for all types except those explicitly defined using `FormItem`.
+The `FormAutoGenerateItems` can be utilized independently, as demonstrated in the previous example, or it can be placed in-between, above, or below multiple `FormItem` tags. This creates editors for all supported types except those explicitly defined using `FormItem`, preventing duplicate editors.
 
 {% tabs %}
 {% highlight razor tabtitle="FormAutoGenerateItems"  %}
@@ -45,13 +45,15 @@ The `FormAutoGenerateItems` can be utilized independently, as demonstrated in th
 {% endhighlight %}
 {% endtabs %}
 
-In the given example, apart from `StringField`, `DateTimeField`, and `BoolField`, the remaining elements will be generated and placed automatically within the specified `FormItem` along with their corresponding editor types.
+In the given example, `StringField`, `DateTimeField`, and `BoolField` are explicitly defined with `FormItem`. All remaining eligible properties are auto-generated with their corresponding editor types and positioned relative to the `FormAutoGenerateItems` tag.
 
-![Blazor DataForm Form Item](images/blazor_dataform_partially_autogenerated_items.png)
+![Blazor DataForm showing a mix of custom-defined FormItem fields and auto-generated fields](images/blazor_dataform_partially_autogenerated_items.png)
 
 ## Cancel the auto generate fields 
 
-We can prevent the auto generation of fields by explicitly defining the `FormItem` for required fields in model , which will render the editors based on the specified editors.
+Auto-generation can be controlled in two ways:
+- To disable auto-generation entirely, omit the `FormAutoGenerateItems` tag. Only the explicitly declared `FormItem` elements will render.
+- To exclude specific fields while keeping auto-generation for the rest, declare those fields explicitly using `FormItem`. When both `FormItem` and `FormAutoGenerateItems` are present, the explicitly defined fields are not auto-generated.
 
 {% tabs %}
 {% highlight razor tabtitle="AutoGenerate"  %}
diff --git a/blazor/data-form/column-layout.md b/blazor/data-form/column-layout.md
index a746b83d4b..773e00ab50 100644
--- a/blazor/data-form/column-layout.md
+++ b/blazor/data-form/column-layout.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Column layout in DataForm component
 
-This segment provides guidance on dividing the form field editors inside the DataForm component into a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. 
+This section explains how to arrange DataForm editors in a column-based layout. The [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property allows us to specify the number of columns into which the DataForm should be divided. 
 
 {% tabs %}
 {% highlight razor tabtitle="razor" %}
@@ -19,7 +19,7 @@ This segment provides guidance on dividing the form field editors inside the Dat
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Column Layout](images/blazor_dataform_change_form_width.png)
+![Blazor DataForm column layout](images/blazor_dataform_change_form_width.png)
 
 ## Configure the column span 
 
@@ -33,9 +33,9 @@ Additionally, by utilizing the [ColumnSpan](https://help.syncfusion.com/cr/blazo
 {% endhighlight %}
 {% endtabs %}
 
-In the provided example, the layout of the DataForm is segmented into six equal columns, with the editor fields distributed accordingly, depending on the column span allocated to each one.
+In the following example, the DataForm is divided into six equal columns. Each editor consumes space based on its configured column span, resulting in rows where items align cleanly and wrap to the next row when the remaining columns are insufficient.
 
-![Blazor DataForm Column Layout](images/blazor_dataform_column_span.png)
+![Blazor DataForm demonstrating ColumnSpan across a six-column grid](images/blazor_dataform_column_span.png)
 
 
 ## See Also
diff --git a/blazor/data-form/data-annotation-attributes.md b/blazor/data-form/data-annotation-attributes.md
index c2cdfda6c6..97d2ebc65d 100644
--- a/blazor/data-form/data-annotation-attributes.md
+++ b/blazor/data-form/data-annotation-attributes.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Form Binding in Blazor DataForm Component | Syncfusion
+title: Data annotation attributes in Blazor DataForm | Syncfusion
 description: Checkout and learn here about Model ,EditContext and Custom Validation attributes binding with Blazor DataForm component.
 platform: Blazor
 control: DataForm
@@ -9,15 +9,15 @@ documentation: ug
 
 # Data annotation attributes
 
-The DataForm component enables users to define the data annotation attributes available from the instance of [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0). 
+The DataForm component supports .NET data annotation attributes from [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) to control labels, placeholders, auto-generation, editable, and validation behavior.
 
 ## Display attribute
 
-The [DisplayAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) class is used to specify the display name for a property. The display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. 
+The [DisplayAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) class specifies display-related metadata for a property. If a form item does not set a label explicitly, the DataForm uses the display name as the label for the corresponding editor. 
 
 ### Name property
 
-The [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property is used to specify the display name for a property. The display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. 
+The [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property sets the display name used as the editor label when a form item does not define label text.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -30,7 +30,7 @@ public string FirstName { get; set; }
 
 ### Short name property
 
-The [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property is used to specify the short display name for a property. The short display name is used as the label for the corresponding editor in the DataForm component if label text is not specified for the form item. 
+The [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property sets a shorter display name that can be used as the editor label when label text is not specified for the form item.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -41,11 +41,11 @@ public string FirstName { get; set; }
 {% endhighlight %}
 {% endtabs %}
 
-N> DataForm gives priority to the [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property over the [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name)  property of `DisplayAttribute` and [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property of the `FormItem`.
+N> DataForm gives priority to the [ShortName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.shortname?view=net-8.0#system-componentmodel-dataannotations-displayattribute-shortname) property over the [Name](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.name?view=net-8.0#system-componentmodel-dataannotations-displayattribute-name) property of `DisplayAttribute` and the [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property of the `FormItem`.
 
 ### Prompt property
 
-The [Prompt](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.prompt?view=net-8.0#system-componentmodel-dataannotations-displayattribute-prompt) property is used to specify the prompt for a property. The prompt is used as the placeholder for the corresponding editor in the DataForm component. 
+The [Prompt](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.prompt?view=net-8.0#system-componentmodel-dataannotations-displayattribute-prompt) property specifies placeholder text for the corresponding editor.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -58,7 +58,7 @@ public string FirstName { get; set; }
 
 ### Auto generate field property
 
-The [AutoGenerateField](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.autogeneratefield?view=net-8.0#system-componentmodel-dataannotations-displayattribute-autogeneratefield) property is used to specify whether the property should be automatically generated as a field in the DataForm component. 
+The [AutoGenerateField](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.autogeneratefield?view=net-8.0#system-componentmodel-dataannotations-displayattribute-autogeneratefield) property indicates whether the property should be automatically generated as a field in the DataForm.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -71,11 +71,11 @@ public string ID { get; set; }
 
 ## Validation attributes
 
-The DataForm component supports the following validation attributes from the [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) namespace.
+The DataForm component supports the following validation attributes from the [System.ComponentModel.DataAnnotations](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations?view=net-8.0) namespace. When validation fails, the DataForm displays the associated error message.
 
 ### Required attribute
 
-The [RequiredAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) class is used to specify that a property is required. The DataForm component displays an error message if the property is empty. 
+The [RequiredAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) class specifies that a property value is mandatory.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -88,7 +88,7 @@ public string Name { get; set; }
 
 ### Range attribute
 
-The [RangeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.rangeattribute?view=net-8.0) class is used to specify the numeric range constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified range. 
+The [RangeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.rangeattribute?view=net-8.0) class defines numeric range constraints for a property.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -101,7 +101,7 @@ public int Age { get; set; }
 
 ### Regular expression attribute
 
-The [RegularExpressionAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.regularexpressionattribute?view=net-8.0) class is used to specify that a property value must match a specified regular expression. The DataForm component displays an error message if the property value does not match the specified regular expression. 
+The [RegularExpressionAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.regularexpressionattribute?view=net-8.0) class enforces that a property value matches a specified regular expression pattern.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -114,7 +114,7 @@ public string Name { get; set; }
 
 ### String length Attribute
 
-The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class is used to specify the minimum and maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. 
+The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class specifies minimum and maximum length constraints for a property value.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -127,7 +127,7 @@ The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.
 
 ### Minimum length Attribute
 
-The [MinLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.minlengthattribute?view=net-8.0) class is used to specify the minimum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. 
+The [MinLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.minlengthattribute?view=net-8.0) class defines the minimum length constraint for a property value.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -140,7 +140,7 @@ public string Name { get; set; }
 
 ### Maximum length Attribute
 
-The [MaxLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.maxlengthattribute?view=net-8.0) class is used to specify the maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints. 
+The [MaxLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.maxlengthattribute?view=net-8.0) class defines the maximum length constraint for a property value.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -153,7 +153,7 @@ public string Name { get; set; }
 
 ### Phone number attribute
 
-The [PhoneAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.phoneattribute?view=net-8.0) class is used to specify that a property value must match a specified phone number pattern. The DataForm component displays an error message if the property value does not match the specified phone number pattern. 
+The [PhoneAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.phoneattribute?view=net-8.0) class validates a property value against a phone number pattern.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -166,7 +166,7 @@ public string PhoneNumber { get; set; }
 
 ### Email address attribute
 
-The [EmailAddressAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.emailaddressattribute?view=net-8.0) class is used to specify that a property value must match a specified email address pattern. The DataForm component displays an error message if the property value does not match the specified email address pattern. 
+The [EmailAddressAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.emailaddressattribute?view=net-8.0) class validates that a property value matches an email address pattern.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -179,7 +179,7 @@ public string Email { get; set; }
 
 ### URL attribute
 
-The [UrlAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.urlattribute?view=net-8.0) class is used to specify that a property value must match a specified URL pattern. The DataForm component displays an error message if the property value does not match the specified URL pattern. 
+The [UrlAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.urlattribute?view=net-8.0) class validates that a property value matches a URL pattern.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -192,7 +192,7 @@ public string Url { get; set; }
 
 ### Enum data type attribute
 
-The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.enumdatatypeattribute?view=net-8.0) class is used to specify that a property value must be a member of the specified enumeration. The DataForm component displays an error message if the property value is not a member of the specified enumeration. 
+The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.enumdatatypeattribute?view=net-8.0) class enforces that a property value is a member of the specified enumeration.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -205,7 +205,7 @@ The [EnumDataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.
 
 ### Compare attribute
 
-The [CompareAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.compareattribute?view=net-8.0) class is used to specify that a property value must match the value of another property in the same class. The DataForm component displays an error message if the property value does not match the value of the other property. 
+The [CompareAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.compareattribute?view=net-8.0) class validates that a property value matches another property’s value (for example, confirming a password). 
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -219,7 +219,7 @@ public string ConfirmPassword { get; set; }
 
 ### String length attribute
 
-The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class is used to specify the minimum and maximum length constraints for the value of a property. The DataForm component displays an error message if the property value is not within the specified length constraints.Additionally editor component will not allow to enter more than the specified length.
+The [StringLengthAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) class limits the length of input values and can display a validation message when limits are exceeded. Additionally, the editor component prevents entering characters beyond the specified maximum length. Note that the error message shown in the example is user-defined and may not mirror the exact minimum/maximum values configured in the attribute.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -232,21 +232,21 @@ public string Name { get; set; }
 
 ## Data type attribute
 
-The [DataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.datatypeattribute?view=net-8.0) class is used to specify the data type of a property. The DataForm component uses this attribute to determine the editor type for the property.The below table explains the supported data types and the corresponding editor types.
+The [DataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.datatypeattribute?view=net-8.0) class specifies the semantic data type of a property. The DataForm uses this attribute to determine the editor type for the property. The following table lists supported data types and their corresponding editors.
 
 | Data type | Editor type | Image |
 | ------------ | ----------------------- | ------ |
-| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date](images/blazor_dataform_data_type_date.png) |
-| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time](images/blazor_dataform_data_type_time.png) |
-| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime](images/blazor_dataform_data_type_date_time.png) |
-| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency](images/blazor_dataform_data_type_currency.png) |
-| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber](images/blazor_dataform_data_type_phone.png) |
-| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard](images/blazor_dataform_data_type_credit_card.png) |
-| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText](images/blazor_dataform_data_type_multiline_text.png) |
-| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password](images/blazor_dataform_data_type_password.png) |
-| <ul><li>`DataType.EmailAddress`</li><li>`DataType.Url`</li><li>`DataType.Text`</li><li> `DataType.ImageUrl`</li><li> `DataType.Html`</li></ul> | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.EmailAddress](images/blazor_dataform_data_type_text.png) |
-
-If any other data type is specified other than the above table, the DataForm component uses the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) editor by default.
+| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date editor example](images/blazor_dataform_data_type_date.png) |
+| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time editor example](images/blazor_dataform_data_type_time.png) |
+| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime editor example](images/blazor_dataform_data_type_date_time.png) |
+| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency editor example](images/blazor_dataform_data_type_currency.png) |
+| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber editor example](images/blazor_dataform_data_type_phone.png) |
+| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard editor example](images/blazor_dataform_data_type_credit_card.png) |
+| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText editor example](images/blazor_dataform_data_type_multiline_text.png) |
+| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password editor example](images/blazor_dataform_data_type_password.png) |
+| <ul><li>`DataType.EmailAddress`</li><li>`DataType.Url`</li><li>`DataType.Text`</li><li> `DataType.ImageUrl`</li><li> `DataType.Html`</li></ul> | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.Text-like editors example](images/blazor_dataform_data_type_text.png) |
+
+If a different data type is specified that is not listed above, the DataForm uses the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) editor by default.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -260,7 +260,7 @@ public DateTime? DateOfBirth { get; set; }
 
 ## Editable attribute
 
-The [EditableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.editableattribute?view=net-8.0) class is used to specify that a property can be edited in the DataForm component. 
+The [EditableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.editableattribute?view=net-8.0) class specifies whether a property is editable in the DataForm.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -274,7 +274,7 @@ public string ID { get; set; }
 
 ## Bindable attribute
 
-The [BindableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.bindableattribute?view=net-8.0) class is used to specify whether the property should be automatically generated as a field in the DataForm component similar to the AutoGenerateField property in the Display attribute. If set to false the property will not be generated as a field in the DataForm component.
+The [BindableAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.bindableattribute?view=net-8.0) class controls automatic field generation, similar to the `AutoGenerateField` setting in the Display attribute. When set to `false`, the property is not generated as a field in the DataForm.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}  
@@ -288,7 +288,7 @@ public string ID { get; set; }
 
 ## Read only attribute
 
-The [ReadOnlyAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.readonlyattribute?view=net-8.0) class is used to specify whether the property should be read-only in the DataForm component. 
+The [ReadOnlyAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.readonlyattribute?view=net-8.0) class specifies whether the property should be read-only in the DataForm.
 
 {% tabs %}
 {% highlight C# tabtitle="C#"  %}
@@ -304,7 +304,7 @@ public string ID { get; set; }
 
 ### Data form display options attribute
 
-The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute is used to specify the display options for a property in the DataForm component. The DataForm component uses this attribute to determine the [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.ColumnSpan.html)for the property.
+The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.html) attribute configures display options for a property in the DataForm. The DataForm uses this attribute to determine [ColumnSpan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.DataFormDisplayOptionsAttribute.ColumnSpan.html) for the property.
 
 {% tabs %}
 
@@ -328,7 +328,7 @@ The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Sync
 
 A [custom validation attribute](https://learn.microsoft.com/en-us/previous-versions/aspnet/cc668224(v=vs.100)#creating-a-custom-validation-attribute) in .NET is a class that inherits from the [ValidationAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute?view=net-8.0&redirectedfrom=MSDN) abstract class and overrides the [IsValid](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.isvalid?view=net-8.0#system-componentmodel-dataannotations-validationattribute-isvalid(system-object)) method. This method is called when the attribute is applied to a property and the property's value is being validated.
 
-In the `IsValid` method, you can define your custom validation logic. If the validation fails, you return a [ValidationResult](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationresult?view=net-8.0) object with an error message. If the validation passes, you return `ValidationResult.Success`.
+In the `IsValid` method, implement the validation logic. When validation fails, return a [ValidationResult](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationresult?view=net-8.0) with an error message; when it succeeds, return `ValidationResult.Success`.
 
 {% tabs %}
 {% highlight razor tabtitle="Custom Validation Attributes"  %}
@@ -338,6 +338,6 @@ In the `IsValid` method, you can define your custom validation logic. If the val
 {% endhighlight %}
 {% endtabs %}
 
- In the above example, In the `PasswordValidationAttribute` class, the `IsValid` method checks if the password meets certain criteria (length, contains uppercase letter, contains lowercase letter, contains special character). If it doesn't, it returns a `ValidationResult` with an appropriate error message.In the `EmailValidationAttribute` class, the IsValid method checks if the email is in a valid format. If it's not, it returns a `ValidationResult` with an error message. 
+In the example, the `PasswordValidationAttribute` checks whether the password meets the required criteria (length, uppercase, lowercase, and special character). If not, it returns a `ValidationResult` with an appropriate message. The `EmailValidationAttribute` validates the email format and returns a `ValidationResult` with an error message when invalid.
 
-![Blazor DataForm Custom Validation](images/blazor_dataform_customvalidation.png)
\ No newline at end of file
+![Blazor DataForm custom validation showing error messages for password and email](images/blazor_dataform_customvalidation.png)
\ No newline at end of file
diff --git a/blazor/data-form/events.md b/blazor/data-form/events.md
index 6406ac5378..d405a7ccc6 100644
--- a/blazor/data-form/events.md
+++ b/blazor/data-form/events.md
@@ -9,12 +9,11 @@ documentation: ug
 
 # Event handlers in DataForm component
 
-This segment briefly explains about the event handlers in DataForm component.
+This section describes the available DataForm events and when to use them. The form-level submit events mirror the Blazor EditForm pipeline, and a field-level update event helps react to per-field edits.
 
 ## On submit event
 
-The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event is activated whenever the form is submitted, regardless of whether the submission is valid or invalid.
-
+The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event is raised whenever the form is submitted, regardless of validation success or failure. Use this event to run logic that must occur on every submit (for example, logging or generic pre-processing). The callback receives the current EditContext in its event args. Handlers can be synchronous or async.
 
 {% tabs %}
 {% highlight razor tabtitle="Model" %}
@@ -31,7 +30,7 @@ The [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.
 
 ## On valid submit event
 
-he [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnValidSubmit) event is triggered when the form is submitted and all the form validation rules are satisfied.
+The [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnValidSubmit) event is triggered when the form is submitted and all validation rules are satisfied. Use this event to persist data, call APIs, or navigate on success. The callback provides the current EditContext so the validated model can be accessed. Async handlers are supported.
 
 `OnValidSubmit` is typically used to handle the form submission logic, such as saving the form data to a database, when the form data is valid.
 
@@ -50,7 +49,7 @@ he [OnValidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataF
 
 ## On invalid submit event
 
-The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnInvalidSubmit) event is triggered when the form is submitted but the form validation rules are not satisfied. It's typically used to handle scenarios when the form data is invalid.
+The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnInvalidSubmit) event is triggered when the form is submitted and one or more validation rules fail. Use this event to show a message, focus the first invalid field, or log validation issues. The handler receives the current EditContext, which contains validation messages.
 
 {% tabs %}
 {% highlight razor tabtitle="Model" %}
@@ -67,7 +66,7 @@ The [OnInvalidSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Da
 
 ## On update event
 
-The [OnUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnUpdate) event will be invoked upon editing a field in the DataForm component. The changed field name and newly updated model are available through the [FormUpdateEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormUpdateEventArgs.html) event context. 
+The [OnUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnUpdate) event is invoked when a field value changes in the DataForm. The event provides the changed field name and the updated model through [FormUpdateEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormUpdateEventArgs.html), enabling scenarios such as dependent field updates or incremental validation.
 
 {% tabs %}
 {% highlight razor tabtitle="Model" %}
diff --git a/blazor/data-form/form-binding.md b/blazor/data-form/form-binding.md
index eb23c6e609..635c6331cc 100644
--- a/blazor/data-form/form-binding.md
+++ b/blazor/data-form/form-binding.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Form binding in DataForm component
 
-This segment provides a concise overview of the concepts involved in associating a [Model](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.model?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-model) or [EditContext](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.editcontext?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-editcontext) with a Data Form.
+This section provides an overview of associating a [Model](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.model?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-model) or [EditContext](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform.editcontext?view=aspnetcore-7.0#microsoft-aspnetcore-components-forms-editform-editcontext) with a Data Form.
 
 ## Model binding 
 
-The following example illustrates how the `Model` is bound to the DataForm component using the user-defined `EventRegistration` model class.
+The following example illustrates how the `Model` is bound to the DataForm component using the user-defined `EventRegistration` model class. Choose Model binding for straightforward scenarios where the form manages its own validation context internally.
 
 {% tabs %}
 {% highlight razor tabtitle="Model"  %}
@@ -27,7 +27,7 @@ The following example illustrates how the `Model` is bound to the DataForm compo
 
 ## Edit context binding 
 
-The following example illustrates how the `EditContext` is bound to the DataForm component using the user-defined `EventRegistration` model class.
+The following example illustrates how the `EditContext` is bound to the DataForm component using the user-defined `EventRegistration` model class. Choose EditContext binding when advanced control over validation state, messages, or custom validation logic is required, or when sharing an EditContext across components.
 
 {% tabs %}
 {% highlight razor tabtitle="EditContext"  %}
@@ -41,7 +41,7 @@ The following example illustrates how the `EditContext` is bound to the DataForm
 
 The `FormName` property to the DataForm component, will assign a specified value to the underlying EditForm.FormName. This allows unique identification of the form for processing or validation, especially in applications with multiple forms
 
-The following example illustrates how add the `FormName` for DataForm component.
+The following example illustrates how to add the `FormName` for the DataForm component.
 
 {% tabs %}
 {% highlight Razor %}
@@ -49,9 +49,4 @@ The following example illustrates how add the `FormName` for DataForm component.
 {% include_relative code-snippet/form-binding/form-name.razor %}
 
 {% endhighlight %} 
-{% endtabs %}
-
-
-
-
-
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/data-form/form-group.md b/blazor/data-form/form-group.md
index 3cc4293dff..a42a36a929 100644
--- a/blazor/data-form/form-group.md
+++ b/blazor/data-form/form-group.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Form group in DataForm component
 
-In DataForm , [FormGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) feature provides a way to organize the `FormItem` and `FormAutoGenerateItems` with descriptive label text and a layout organized into columns.
+In the DataForm, the [FormGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) feature organizes `FormItem` and `FormAutoGenerateItems` under a descriptive group label with an optional identifier, and supports a column-based layout within each group.
 
 ## Configure the group name and ID 
 
-The below example showcases how to configure `FormGroup` within  DataForm component with [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_LabelText) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ID) properties.
+The following example shows how to configure a `FormGroup` within the DataForm using the [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_LabelText) and [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ID) properties. The group name labels the group section, and the ID uniquely identifies the group in the form.
 
 {% tabs %}
 {% highlight razor tabtitle="Form group" %}
@@ -23,11 +23,11 @@ The below example showcases how to configure `FormGroup` within  DataForm compon
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Group](images/blazor_dataform_single_formgroup.png)
+![Blazor DataForm showing a single form group with label and items](images/blazor_dataform_single_formgroup.png)
 
 ## Column layout for the group
 
-The DataForm component provides the functionality to organize various form groups within a layout based on columns. You can define the number of columns to split the DataForm into by setting the [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property.
+The DataForm can arrange multiple form groups across columns using the form-level [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ColumnCount) property. Set this value to split the overall layout into the specified number of columns and place groups accordingly.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor" %}
@@ -46,7 +46,7 @@ The DataForm component provides the functionality to organize various form group
 
 ## Configure the column spacing 
 
-This section explains how to configure the DataForm component on dividing the collection of [FormGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) and organizing the subdivisions within the `FormGroup` with thw help of [ColumnsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnCount) and [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnSpacing).
+This section explains how to divide the collection of [FormGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html) and organize subdivisions within a `FormGroup` using [ColumnsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnCount) and [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_ColumnSpacing). Use a suitable column count within each group and adjust spacing to achieve a clear, balanced layout.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor" %}
@@ -61,13 +61,13 @@ This section explains how to configure the DataForm component on dividing the co
 {% endhighlight %}
 {% endtabs %}
 
-In the provided example, the DataForm is divided into two sections, with each section populating its respective `FormGroup`. The first group is further segmented into six subsections, with the elements within it distributed according to their assigned column span. In a similar manner, the second group is split into two columns, with its elements being divided accordingly.
+In the example, the DataForm contains two groups. The first group uses six internal columns and distributes its fields by their column spans. The second group uses two internal columns and arranges its fields accordingly.
 
-![Blazor DataForm Form Group Column Layout](images/blazor_dataform_formgroup_column_layout.png)
+![Blazor DataForm form group column layout with per-group column counts and spacing](images/blazor_dataform_formgroup_column_layout.png)
 
 ## Change the appearance of the form group
 
-You can customize the appearance of the form group by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_CssClass) property `FormGroup` component. The following example demonstrates how to change the background color and set padding of the form group wrapper .
+Customize the appearance of a form group using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormGroup.html#Syncfusion_Blazor_DataForm_FormGroup_CssClass) property of the `FormGroup`. The following example demonstrates changing the background color and adding padding to the form group wrapper.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -83,5 +83,4 @@ You can customize the appearance of the form group by using the [CssClass](https
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Group Customization](images/blazor_dataform_formgroup_customization.png)
-
+![Blazor DataForm form group customized with background color and padding](images/blazor_dataform_formgroup_customization.png)
\ No newline at end of file
diff --git a/blazor/data-form/form-items.md b/blazor/data-form/form-items.md
index 7843f4ef6e..8a6914d48a 100644
--- a/blazor/data-form/form-items.md
+++ b/blazor/data-form/form-items.md
@@ -9,12 +9,18 @@ documentation: ug
 
 # Form items in DataForm component
 
-The [FormItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html)  can be utilized to set up various configuration for the editor component, including the unique identifier (id), the type of editor component used, any additional CSS classes to be applied to the editor, and whether the field is to be active (enabled) or inactive (disabled) upon being rendered.The below example showcases the different property usages.
-
+The [FormItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html) configures the editor for a specific model field. It supports setting a unique identifier (ID), selecting the editor type, applying CSS classes, specifying placeholder and label text, and enabling or disabling the field. The following sections demonstrate common property usage:
+- Field: map the model property to an editor
+- ID: assign a unique identifier
+- Placeholder: set hint text inside the editor
+- EditorType: choose the editor control
+- IsEnabled: enable or disable the form item
+- Label/LabelText: set the editor’s label text
+- CssClass: apply custom styles to the editor wrapper
 
 ## Configuring the model field and ID
 
-The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Field) property is used to map the model field to the corresponding editor component. The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_ID) property is used to set the unique identifier for the editor component.
+The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Field) property maps the model field to the corresponding editor. The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_ID) property sets a unique identifier for the editor component.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -30,11 +36,12 @@ The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.For
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_configure_model_ID.png)
+![Blazor DataForm form item showing mapped field and custom ID](images/blazor_dataform_configure_model_ID.png)
 
 ## Set the placeholder
 
-The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Placeholder) property is used to set the placeholder text for the editor component. 
+The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Placeholder) property sets the placeholder text for the editor.
+
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
 
@@ -49,19 +56,19 @@ The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFo
 {% endhighlight %}
 {% endtabs %}
 
-![DataForm Placeholder](./images/blazor_dataform_placeholder.png)
+![Blazor DataForm form item with placeholder text in the editor](./images/blazor_dataform_placeholder.png)
 
 ## Change the editor type
 
-The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_EditorType) property is used to set the editor type for the corresponding field.We can assign the editor type using the [FormEditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html) enumeration.
+The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_EditorType) property selects the editor used for the field. Set the value from the [FormEditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html) enumeration to override the default editor inferred from the field type.
 
-| Field Type | Supported Editor types |
+| Field Type | Supported editor types |
 | ------------ | ----------------------- |
-| `string` | [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextBox),[TextArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextArea),[Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Password)|
-| `int` , `float`, `decimal`,`double`,`long` | [NumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_NumericTextBox) |
-| `bool` | [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_CheckBox),[Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Switch) |
-| `DateTime` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker),[DateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DateTimePicker),[TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) |
-| `enum` | [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DropDownList),[ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_ComboBox),[AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_AutoComplete) |
+| `string` | [TextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextBox), [TextArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TextArea), [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Password) |
+| `int`, `float`, `decimal`, `double`, `long` | [NumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_NumericTextBox) |
+| `bool` | [CheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_CheckBox), [Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_Switch) |
+| `DateTime` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker), [DateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DateTimePicker), [TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) |
+| `enum` | [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DropDownList), [ComboBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_ComboBox), [AutoComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_AutoComplete) |
 | `DateOnly` | [DatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_DatePicker) |
 | `TimeOnly` | [TimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormEditorType.html#Syncfusion_Blazor_DataForm_FormEditorType_TimePicker) |
 
@@ -79,12 +86,11 @@ The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFor
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_formitem.png)
-
+![Blazor DataForm form items rendered with different editor types](images/blazor_dataform_formitem.png)
 
-## Disable the editor
+## Disable a form item
 
-The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_IsEnabled) property is used to disable the specific form item.
+The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_IsEnabled) property disables a specific form item.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -100,11 +106,11 @@ The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_formitem_disabled.png)
+![Blazor DataForm form item in a disabled state](images/blazor_dataform_formitem_disabled.png)
 
-## Change the label name 
+## Change the label text 
 
-The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_Label) property is used to set the label text for the editor component , At default `Name` property of the `Display` attribute will be used as label text.
+Set the label using the [LabelText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_LabelText) property. When not set, the label is derived from data annotations on the bound model property, giving priority to DisplayAttribute.ShortName and then DisplayAttribute.Name.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -122,12 +128,12 @@ The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.For
 {% endhighlight %}
 {% endtabs %}
 
-![DataForm Placeholder](./images/blazor_dataform_label_text.png)
+![Blazor DataForm form item with customized label text](./images/blazor_dataform_label_text.png)
 
 
 ## Change the appearance of the field editor
 
-The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_CssClass) property is used to change the appearance of the form item.The added css class will get added to the editor's wrapper component , using that we can customize the appearance of the editor.
+Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormItem.html#Syncfusion_Blazor_DataForm_FormItem_CssClass) property to apply a custom CSS class to the editor wrapper and customize the appearance.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -142,8 +148,8 @@ The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_formitem_cssclass.png)
+![Blazor DataForm form item styled using a custom CSS class](images/blazor_dataform_formitem_cssclass.png)
 
 ## See also
 
-[Customization of specific field editor](https://blazor.syncfusion.com/documentation/data-form/templates#customization-of-specific-field-editor)
\ No newline at end of file
+- [Customization of specific field editor](https://blazor.syncfusion.com/documentation/data-form/templates#customization-of-specific-field-editor)
\ No newline at end of file
diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md
index c03b87de5b..6e8a9adf16 100644
--- a/blazor/data-form/getting-started-with-web-app.md
+++ b/blazor/data-form/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataForm Component in Web App
 
-This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor DataForm](https://www
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm and Themes NuGet in the Blazor Web App
 
-To add **Blazor DataForm** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DataForm** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor DataForm** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.DataForm --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DataForm` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor DataForm component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm component in `.razor` file inside the `Pages` folder. If an interactivity location as Per `page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -260,6 +289,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm component in the default web browser.
+
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). 
\ No newline at end of file
diff --git a/blazor/data-form/getting-started.md b/blazor/data-form/getting-started.md
index 60d0c846ce..17999a9e73 100644
--- a/blazor/data-form/getting-started.md
+++ b/blazor/data-form/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataForm Component
 
-This section briefly explains about how to include [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the [Blazor DataForm](https://www.syncfusion.com/blazor-components/blazor-data-form) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -21,11 +21,11 @@ This section briefly explains about how to include [Blazor DataForm](https://www
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm and Themes NuGet in the App
 
-To add **Blazor DataForm** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor DataForm** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following Package Manager commands to achieve the same.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details.
 
 {% endtabcontent %}
 
@@ -48,9 +48,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, you can create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,7 +67,7 @@ cd BlazorApp
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Run the following commands to install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
 
 {% tabs %}
 
@@ -81,8 +81,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details.
 {% endtabcontent %}
 
 {% endtabcontents %}
@@ -186,6 +185,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataForm compone
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm).
\ No newline at end of file
diff --git a/blazor/data-form/images/blazor-create-web-app.png b/blazor/data-form/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/data-form/images/blazor-create-web-app.png differ
diff --git a/blazor/data-form/layout-customization.md b/blazor/data-form/layout-customization.md
index 70dde8719e..503c463d06 100644
--- a/blazor/data-form/layout-customization.md
+++ b/blazor/data-form/layout-customization.md
@@ -9,20 +9,25 @@ documentation: ug
 
 # Layout customization
 
-This segment provides a concise overview of how to position buttons and labels correctly within the DataForm component. It also covers how to customize the button elements and the various ways to present validation messages.
+This section explains how to position buttons and labels in the DataForm component, customize button areas, and display validation messages. It also describes how to enable floating labels and adjust the overall form width.
 
 ## Button alignment
 
-The DataForm component provides the capability to position the button horizontally within the form container as needed, utilizing the [ButtonsAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html) property .The `ButtonsAlignment` is categorized into three types, as outlined below,
+The DataForm component can align form buttons horizontally within the form container by using the [ButtonsAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html) property. The `ButtonsAlignment` options are:
+
+- Center: centers the buttons within the container
+- Left: left-aligns the buttons
+- Right: right-aligns the buttons
+- Stretch: stretches buttons to fill the available width
 
 | FormButtonsAlignment | Snapshot |
 | ------------ | ----------------------- |
-|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm FormButtonsAlignment.Center](images/blazor_dataform_button_alignment_center.png)|
-|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm FormButtonsAlignment.Left](images/blazor_dataform_button_alignment_left.png)|
-|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm FormButtonsAlignment.Right](images/blazor_dataform_button_alignment_right.png)|
-|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm FormButtonsAlignment.Stretch](images/blazor_dataform_button_alignment_stretch.png)|
+|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm with buttons aligned to the center](images/blazor_dataform_button_alignment_center.png)|
+|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm with buttons aligned to the left](images/blazor_dataform_button_alignment_left.png)|
+|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Right)|![DataForm with buttons aligned to the right](images/blazor_dataform_button_alignment_right.png)|
+|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm with buttons stretched to full width](images/blazor_dataform_button_alignment_stretch.png)|
 
-The below example portrays how to use the `ButtonsAlignment` property in DataForm component
+The following example shows how to use the `ButtonsAlignment` property in the DataForm component.
 
 {% tabs %}
 {% highlight razor tabtitle="ButtonsAlignment"  %}
@@ -34,9 +39,9 @@ The below example portrays how to use the `ButtonsAlignment` property in DataFor
 
 ## Add additional buttons and customization
 
-It is possible to incorporate custom buttons along with other elements ,if necessary by using the [FormButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtons.html) `RenderFragment` within the DataForm component.
+Add custom buttons or other elements by using the [FormButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtons.html) `RenderFragment` within the DataForm component.
 
-In the provided code snippet, an extra button component is implemented to reset the input fields when pressed, by utilizing its [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html) event handler of [SfButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick).
+In the following example, an additional button is added to reset input fields by handling the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event of the [SfButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick).
 
 {% tabs %}
 {% highlight razor tabtitle="ButtonsAlignment"  %}
@@ -46,19 +51,19 @@ In the provided code snippet, an extra button component is implemented to reset
 {% endhighlight %}
 {% endtabs %}
 
-![DataForm Button Customization](images/blazor_dataform_formbuttons.png)
+![DataForm with default submit buttons and a custom reset button](images/blazor_dataform_formbuttons.png)
 
 ## Label position
 
-DataForm component allows you to align the label either to the top or left to the field editors , We can implement this feature by assigning values to [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) , Classification of the respective property is outlined below ,
+The DataForm component aligns labels either at the top or to the left of the field editors using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) property. The available options are shown below.
 
 | LabelPosition | Snapshot |
 | ------------ | ----------------------- |
-|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm FormLabelPosition.Top](images/blazor_dataform_label_position_top.png)|
-|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm FormLabelPosition.Left](images/blazor_dataform_label_position_left.png)|
-|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors like [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels will be positioned to the right.  |![DataForm FormLabelPosition.Left](images/blazor_dataform_default_label_position.png)|
+|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm with labels positioned above editors](images/blazor_dataform_label_position_top.png)|
+|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm with labels positioned to the left of editors](images/blazor_dataform_label_position_left.png)|
+|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors such as [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels are positioned to the right of the control.|![DataForm default label positioning and boolean editor label placement](images/blazor_dataform_default_label_position.png)|
 
-The below code part explains how to configure the `LabelPosition` in DataForm component.
+The following example demonstrates how to configure the `LabelPosition` in the DataForm component.
 
 {% tabs %}
 {% highlight razor tabtitle="Label Position"  %}
@@ -70,7 +75,7 @@ The below code part explains how to configure the `LabelPosition` in DataForm co
 
 ## Floating label 
 
-The DataForm component allows you to float the label to the top of the input field when the input field is focused, by using the [EnableFloatingLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_EnableFloatingLabel) property.The below code example and gif demonstration illustrates how to use the `EnableFloatingLabel` property in DataForm component.
+Enable floating labels to move the label to the top of the input when focused by setting [EnableFloatingLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_EnableFloatingLabel) to true. The following code example and GIF demonstrate floating label behavior.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -87,13 +92,13 @@ The DataForm component allows you to float the label to the top of the input fie
 
 {% endtabs %}
 
-![Blazor DataForm Floating Label](images/blazor_dataform_floating_label.gif)
+![Blazor DataForm floating label behavior when focusing inputs](images/blazor_dataform_floating_label.gif)
 
-N> The floating label feature is only applicable when the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) is set to [FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top).
+N> The floating label feature applies only when [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_LabelPosition) is set to [FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top).
 
 ## Change the form width 
 
-The DataForm component allows you to customize the width of the form container by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Width) property.
+Customize the width of the form container by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Width) property.
 
 {% tabs %}
 {% highlight razor tabtitle="Width"  %}
@@ -103,4 +108,4 @@ The DataForm component allows you to customize the width of the form container b
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Width](images/blazor_dataform_change_form_width.png)
\ No newline at end of file
+![Blazor DataForm with custom form width applied](images/blazor_dataform_change_form_width.png)
\ No newline at end of file
diff --git a/blazor/data-form/localization.md b/blazor/data-form/localization.md
index 9eaa66cb1b..34f543bc1c 100644
--- a/blazor/data-form/localization.md
+++ b/blazor/data-form/localization.md
@@ -9,23 +9,22 @@ documentation: ug
 
 # Localization in Blazor DataForm component
 
-DataForm component can be localized to any particular culture. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The DataForm component supports localization for any culture. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) documentation to localize Syncfusion Blazor components.
 
 ## Configuring localization for label text and error messages
 
-Follow the below steps to configure localization for label text and error messages in Blazor DataForm component.
+Follow these steps to configure localization for label text and validation error messages in the Blazor DataForm component.
 
-1.After integrating the localization files in your application as mentioned in the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) section ,Open the required culture file in the Visual Studio.
+1. After integrating localization files in the application as described in the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic, open the required culture resource file in Visual Studio.
 
 ![Localization step-1](./images/blazor_dataform_localization_step.png)
 
 
-2.In the opened file click on `Add Resource` button and include the suitable key with the corresponding localized text as like below.
+2. In the opened resource file, select Add Resource and include the appropriate key with the corresponding localized text as shown.
 
+![Localization step-2](./images/blazor_dataform_localization_step1.png)
 
-![Localization step-1](./images/blazor_dataform_localization_step1.png)
-
-3.Then, include the [ResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.resourcetype?view=net-8.0#system-componentmodel-dataannotations-displayattribute-resourcetype) which we have formed under `Resources` folder and key for the localized text within the [Display](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) attribute of the corresponding property in the model class.Similarly you can localize the error messages in the DataForm component by including the [ErrorMessageResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcetype?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcetype) and [ErrorMessageResourceName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcename?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcename) properties within the [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0) attribute of the corresponding property in the model class as mentioned in the below code snippet.
+3. Specify the [ResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.resourcetype?view=net-8.0#system-componentmodel-dataannotations-displayattribute-resourcetype) (from the Resources folder) and the resource key in the [Display](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) attribute of the corresponding model property to localize labels. Similarly, localize validation messages by setting [ErrorMessageResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcetype?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcetype) and [ErrorMessageResourceName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcename?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcename) on attributes such as [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0), as shown below.
 
 | ![Localization step 3](./images/blazor_dataform_localization_step3.png) | ![Localization step 3](./images/blazor_dataform_localization_step3_2.png) |
 
@@ -42,6 +41,6 @@ Follow the below steps to configure localization for label text and error messag
 {% endhighlight %}
 {% endtabs %}
 
-4.Finally, run the application to view the localized DataForm component.
+4. Run the application to view the DataForm with localized labels and validation messages.
 
-![Localization in DataForm component](./images/blazor_dataform_localization.png)
+![Localization applied in the DataForm component](./images/blazor_dataform_localization.png)
\ No newline at end of file
diff --git a/blazor/data-form/methods.md b/blazor/data-form/methods.md
index f3e6aaf38d..893d0cf665 100644
--- a/blazor/data-form/methods.md
+++ b/blazor/data-form/methods.md
@@ -7,14 +7,13 @@ control: DataForm
 documentation: ug
 ---
 
-# Inbuilt methods in DataForm component
+# Built-in methods in DataForm component
 
-The classification of methods that can be invoked by using the DataForm instance are outlined below 
+The following methods can be invoked on the DataForm instance to manage validation and rendering behavior.
 
 ## Validate method
 
- The [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_IsValid) method evaluates the form data against defined validation rules to determine its validity.
-
+The [IsValid](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_IsValid) method evaluates the form data against the configured validation rules and returns the validation result. When validation fails, associated error messages are displayed next to the corresponding fields.
 
 {% tabs %}
 {% highlight razor tabtitle="IsValid" %}
@@ -26,7 +25,7 @@ The classification of methods that can be invoked by using the DataForm instance
 
 ## Refresh method
 
- The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Refresh) method updates the form to reflect any changes in the data model or configuration.It also resets the validation state, clearing any existing validation error messages. 
+[Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_Refresh) method updates the form to reflect any changes in the data model or configuration.It also resets the validation state, clearing any existing validation error messages. 
 
 {% tabs %}
 {% highlight razor tabtitle="Refresh" %}
diff --git a/blazor/data-form/templates.md b/blazor/data-form/templates.md
index c96c15688e..d8223e6919 100644
--- a/blazor/data-form/templates.md
+++ b/blazor/data-form/templates.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Templates in DataForm component
 
-In DataForm component we can customize the specific editor field or the entire form components using template feature. 
+The DataForm component supports templating to customize either a specific field editor or the entire form layout and validation experience.
 
 ## Customization of specific field editor
 
-We can customize the particular field editor with required UI customization using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.Template.html) `RenderFragment` inside `FormItem` tag.
+Customize an individual field editor using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.Template.html) `RenderFragment` inside a `FormItem`. This enables full control over the rendering, styling, and behavior of a single editor while retaining DataForm features such as validation and labels.
 
 {% tabs %}
 {% highlight razor tabtitle="Template"  %}
@@ -23,14 +23,13 @@ We can customize the particular field editor with required UI customization usin
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_template.png)
-
-We can also utilize the above `Template` combination with [FormAutoGenerateItems](./form-items.md) which will generate the items except the specified `Formitem`.
+![Blazor DataForm field customized using FormItem.Template](images/blazor_dataform_template.png)
 
+The above `Template` approach can also be used alongside [FormAutoGenerateItems](./form-items.md) to auto-generate all items except those explicitly customized with a `FormItem` template.
 
 ## Customization of entire form
 
-`DataForm` have the ability to customize the entire structure of the form, incorporating necessary components within it, and we can also personalize the messages displayed for validation errors.
+The `DataForm` supports customizing the entire form structure using a full-form template. This allows arranging editors, labels, buttons, and validation messages as required and customizing the appearance and text of validation errors.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -50,9 +49,9 @@ We can also utilize the above `Template` combination with [FormAutoGenerateItems
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_template.png)
+![Blazor DataForm with a fully customized form template](images/blazor_dataform_template.png)
 
-We can also integrate the `FormTemplate` renderer along with `FormItem` as showcased in the below example.
+The `FormTemplate` renderer can also be integrated together with `FormItem` elements, as shown in the following example.
 
 {% tabs %}
 {% highlight razor tabtitle="Form Template"  %}
@@ -64,7 +63,7 @@ We can also integrate the `FormTemplate` renderer along with `FormItem` as showc
 
 ## Tooltip validation message with template
 
-When using the `Template` renderer, we can also customize the validation message with the help of `Tooltip` component by setting `ID` field to the custom editor component similar to the form item's `ID` property.
+When using the `Template` renderer, validation messages can be displayed using a tooltip component. Assign an `ID` to the custom editor that matches the form item's `ID` so that validation messages can be targeted correctly.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -80,11 +79,11 @@ When using the `Template` renderer, we can also customize the validation message
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_tooltip_with_templates.png)
+![Blazor DataForm showing validation messages in tooltips for templated editors](images/blazor_dataform_tooltip_with_templates.png)
 
 ## Validation summary 
 
-The [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0) tag can be utilized to present a summary of validation messages, and it should be positioned within the `FormValidator` tag to function correctly.The below example demonstrates the usage of it.
+Use the [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.validationsummary?view=aspnetcore-8.0) tag to display a consolidated list of validation messages. It must be placed within the `FormValidator` tag to function correctly. The example below demonstrates its usage.
 
 {% tabs %}
 {% highlight razor tabtitle="Razor"  %}
@@ -100,4 +99,4 @@ The [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microsoft.a
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm Form Item](images/blazor_dataform_validation_summary.png)
+![Blazor DataForm displaying a ValidationSummary with aggregated error messages](images/blazor_dataform_validation_summary.png)
\ No newline at end of file
diff --git a/blazor/data-form/validation.md b/blazor/data-form/validation.md
index c03036d345..a94f23ccac 100644
--- a/blazor/data-form/validation.md
+++ b/blazor/data-form/validation.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Validation in DataForm component
 
-DataForm provides the capability to utilize both standard and custom validation that are compatible with the [EditForm](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform?view=aspnetcore-7.0) component. Such as [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-7.0) , [ObjectGraphDataAnnotationsValidator ](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-8.0#nested-models-collection-types-and-complex-types) etc...We can specify the required validation inside `FormValidator` RenderFragment of the DataForm component , The following examples illustrate the procedures for setting up the component with various validation.
+DataForm supports standard and custom validation compatible with the[EditForm](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editform?view=aspnetcore-7.0) component. Such as [DataAnnotationsValidator](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator?view=aspnetcore-7.0) , [ObjectGraphDataAnnotationsValidator ](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/validation?view=aspnetcore-8.0#nested-models-collection-types-and-complex-types) etc...We can specify the required validation inside `FormValidator` RenderFragment of the DataForm component , The following examples illustrate the procedures for setting up the component with various validation.
 
 ## Data annotations validation
 
-`DataAnnotationsValidator` in DataForm component validates the fields based on the attributes bounded to the model properties. 
+`DataAnnotationsValidator` in the DataForm validates fields based on data annotation attributes applied to the model properties.
 
 {% tabs %}
 {% highlight razor tabtitle="DataAnnotationsValidator"  %}
@@ -23,19 +23,19 @@ DataForm provides the capability to utilize both standard and custom validation
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.png)
+![Blazor DataForm showing validation errors using DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.png)
 
 ## Validation message display
 
-Within the DataForm component, we have the option to showcase validation messages in two distinct styles: inline or via a tooltip. When applying inline display, the validation messages remain statically visible whenever validation occurs. On the other hand, tooltip display reveals validation messages to users upon request. Additionally, there is functionality to hide the validation messages as desired by using [ValidationDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ValidationDisplayMode) . The classifications of the respective property are outline below 
+Validation messages can be displayed inline, via tooltip, or hidden by using [ValidationDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_ValidationDisplayMode). With inline display, messages are visible when validation occurs. Tooltip display reveals messages on hover/focus. None hides messages from the UI.
 
 | FormValidationDisplay | Snapshot |
 | ------------ | ----------------------- |
-|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![DataForm FormValidationDisplay.Inline](images/blazor_dataform_validation_display_inline.png)|
-|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![DataForm FormValidationDisplay.Tooltip](images/blazor_dataform_validation_display_tooltip.png)|
-|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![DataForm FormValidationDisplay.None](images/blazor_dataform_validation_display_none.png)|
+|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![Blazor DataForm with inline validation messages beneath fields](images/blazor_dataform_validation_display_inline.png)|
+|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![Blazor DataForm displaying validation messages in tooltips](images/blazor_dataform_validation_display_tooltip.png)|
+|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![Blazor DataForm with validation messages hidden](images/blazor_dataform_validation_display_none.png)|
 
-The below example demonstrate , how to configure validation message presentation with DataForm component
+The following example demonstrates how to configure validation message presentation in the DataForm component.
 
 {% tabs %}
 {% highlight razor tabtitle="Validation Message Display"  %}
@@ -47,9 +47,9 @@ The below example demonstrate , how to configure validation message presentation
 
 ## Complex model validation 
 
-The `ObjectGraphDataAnnotationsValidator` within the DataForm component ensures the validation of the entire object graph of the bound model, including both collection and complex-type properties.In the below example  `ValidateComplexType` attribute is used  to validate the properties declared in the nested classes such as `ChildModel` and `GrandChildModel`.
+The `ObjectGraphDataAnnotationsValidator` within the DataForm validates the entire object graph of the bound model, including collection and complex-type properties. In the following example, the `ValidateComplexType` attribute validates properties declared in nested classes such as `ChildModel` and `GrandChildModel`.
 
-N> We need to install the [Microsoft.AspNetCore.Components.DataAnnotations.Validation](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.DataAnnotations.Validation) Nuget package into the DataForm for Complex model validation.
+N> Install the [Microsoft.AspNetCore.Components.DataAnnotations.Validation](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.DataAnnotations.Validation) NuGet package to enable complex model validation.
 
 {% tabs %}
 {% highlight razor tabtitle="ObjectGraphDataAnnotationsValidator"  %}
@@ -59,13 +59,13 @@ N> We need to install the [Microsoft.AspNetCore.Components.DataAnnotations.Valid
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.png)
+![Blazor DataForm validating nested and complex types using ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.png)
 
 ## Fluent validation 
 
-[FluentValidator](https://www.nuget.org/packages/Blazored.FluentValidation/) is a custom validator that validates beyond standard validation attributes. It allows for checking if field values conform to the credit card format, match a specific value, exceed or fall below a given value, or are equivalent to the value of another field within the same model.
+[FluentValidator](https://www.nuget.org/packages/Blazored.FluentValidation/) is a custom validator that validates beyond standard data annotations. It supports rules such as credit card format checks, comparisons between fields, and range/threshold validations defined in FluentValidation rule classes.
 
-N> We need to install the [Blazored.FluentValidation](https://www.nuget.org/packages/Blazored.FluentValidation/) Nuget package into the DataForm FluentValidation.
+N> Install the [Blazored.FluentValidation](https://www.nuget.org/packages/Blazored.FluentValidation/) NuGet package to use Fluent validation with the DataForm.
 
 {% tabs %}
 {% highlight razor tabtitle="FluentValidator.razor"  %}
@@ -75,7 +75,7 @@ N> We need to install the [Blazored.FluentValidation](https://www.nuget.org/pack
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor DataForm ObjectGraphDataAnnotationsValidator](images/blazor_dataform_fluentvalidation.png)
+![Blazor DataForm showing errors produced by Fluent validation rules](images/blazor_dataform_fluentvalidation.png)
 
 ## See also
 
diff --git a/blazor/data/getting-started-with-web-app.md b/blazor/data/getting-started-with-web-app.md
index 59d1dd0a07..c98c2e5cf0 100644
--- a/blazor/data/getting-started-with-web-app.md
+++ b/blazor/data/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DataManager Component in Web App
 
-This section briefly explains about how to include `Blazor DataManager` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include `Blazor DataManager` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include `Blazor DataManager` componen
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Data and Themes NuGet in the Blazor Web App
 
-To add **Blazor DataManager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DataManager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Data and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Data and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor DataManager** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Data --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Data` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
diff --git a/blazor/data/images/blazor-create-web-app.png b/blazor/data/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/data/images/blazor-create-web-app.png differ
diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md
index 6c76758b65..ab4eb7d58f 100644
--- a/blazor/datagrid/custom-toolbar.md
+++ b/blazor/datagrid/custom-toolbar.md
@@ -113,7 +113,7 @@ The following example demonstrates, how to render the custom Toolbar using `Temp
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBUsZBuSRVoiYtS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyWChngaryhJXi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ## Render image with text in custom Toolbar
 
@@ -351,7 +351,7 @@ In the **OnChange** method, the text of the selected item is checked to determin
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVgWDUiLWIJdsVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDreCMLRKkzmjRdG?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ## Render SfAutoComplete in custom toolbar
 
@@ -470,7 +470,7 @@ The following example demonstrates how to render the `SfAutoComplete` inside the
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBysCBdJXXyIRKP?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ## Render a component or element using the Toolbar Template
 
@@ -576,4 +576,4 @@ The following example demonstrates how to render a **SfButton** in the Toolbar u
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLUCtDUyMhZgqEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrSMMhxJXWJIerL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index e17e07fb61..a7b5b9ad68 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -765,11 +765,11 @@ The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids
 
 To customize the default Grid EditForm input component, you can define an `EditTemplate` inside the GridColumn for the complex field. You can edit complex objects using `EditTemplate` by defining two-way (**@bind-Value**) binding inside the GridColumn to reflect changes in the DataGrid.
 
-For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a double underscore `(__)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name__FirstName**.
+For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a triple underscore `(___)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name___FirstName**.
 
-> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this double underscore (__) format to avoid issues with validation and focus handling.
+> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this triple underscore (___) format to avoid issues with validation and focus handling.
 
-In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name__FirstName** and **Name__LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**).
+In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name___FirstName** and **Name___LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md
index a7ef3f9f4a..7d3644cc85 100644
--- a/blazor/datagrid/searching.md
+++ b/blazor/datagrid/searching.md
@@ -213,6 +213,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.DropDowns
 
@@ -223,6 +224,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 </SfDropDownList>
 
 <SfGrid DataSource="@Orders" Toolbar=@ToolbarItems>
+    <GridSearchSettings Operator="@SearchOperator"></GridSearchSettings>
     <GridColumns>
         <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
@@ -246,14 +248,6 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
         public Operator Value { get; set; }
     }
 
-     public enum Operator
-    {
-        StartsWith,
-        EndsWith,
-        Contains,
-        Equal
-    }
-
     List<DropDownOrder> DropDownData = new List<DropDownOrder>
     {
         new DropDownOrder(){Text="StartsWith",Value= Operator.StartsWith },
@@ -316,7 +310,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBgCXKXMPQpCngI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtheMWibUKtkPFVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ## Search by external button
 
diff --git a/blazor/datagrid/selection.md b/blazor/datagrid/selection.md
index 79f6fa5224..3942c821db 100644
--- a/blazor/datagrid/selection.md
+++ b/blazor/datagrid/selection.md
@@ -726,4 +726,6 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLejIZoMcsYDjdk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLejIZoMcsYDjdk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> When **Select All** is used, only records visible in the current view are selected. The **SelectedRecords** property shows the count for the current page. As navigation continues to other pages, new records load on demand, and **SelectedRecords** includes selections from each visited page. This design ensures efficient data retrieval with paging. Selecting all records across the entire dataset and retrieving them at once is not supported when **Select All** is enabled.
diff --git a/blazor/datetime-picker/accessibility.md b/blazor/datetime-picker/accessibility.md
index 5618da5655..12c4430b5d 100644
--- a/blazor/datetime-picker/accessibility.md
+++ b/blazor/datetime-picker/accessibility.md
@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Accessibility in Blazor Datetime Picker Component | Syncfusion
+title: Accessibility in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about Accessibility in Syncfusion Blazor Datetime Picker component and more.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
-# Accessibility in Blazor Datetime Picker Component
+# Accessibility in Blazor DateTimePicker Component
 
-The web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface components developed with Ajax, HTML, JavaScript, and related technologies.
+Web accessibility ensures that web content and applications are usable by people with disabilities, especially where dynamic content and advanced UI components are involved.
 
-The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) practices commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor DateTimePicker component is outlined below.
 
@@ -40,21 +40,19 @@ The accessibility compliance for the Blazor DateTimePicker component is outlined
 
 ## WAI-ARIA attributes
 
-Blazor DateTimePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. `WAI-ARIA` support is achieved through the attributes like `aria-expanded`, `aria-disabled`, `aria-activedescendant` applied to the input element.
+The DateTimePicker provides built-in compliance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications to convey role, state, and property information to assistive technologies.
 
-To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section.
-
-It helps to provide information about the widget for assistive technology to the disabled person in screen reader.
-
-* **aria-expanded**: Attribute indicates the state of a collapsible element.
-
-* **aria-disabled**: Attribute indicates the disabled state of this DateTimePicker component.
+Common roles and attributes include:
+- Roles: combobox/textbox (for the input), dialog or popup container, grid for the calendar, and gridcell for individual dates.
+- `aria-expanded`: Indicates whether the popup (calendar/time list) is open or closed on the input/combobox element.
+- `aria-disabled`: Conveys the disabled state of the DateTimePicker.
+- `aria-activedescendant`: Identifies the currently focused date cell within the calendar grid or the focused item in the time list.
 
-* **aria-activedescendent**: Attribute helps in managing the current active child of the DateTimePicker component.
+To learn about the accessibility of Calendar, refer to the Calendar's [Accessibility](https://blazor.syncfusion.com/documentation/calendar/accessibility) section.
 
 ## Keyboard interaction
 
-You can use the following keys to interact with the Blazor DateTimePicker. This component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
+Use the following keys to interact with the Blazor DateTimePicker. This component implements keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
 
 Blazor DateTimePicker supports the below list of shortcut keys:
 
@@ -64,8 +62,8 @@ Before opening the popup, use the following keys to control the popup element.
 
 | Windows | Mac | Description |
 | --- | --- | --- |
-| <kbd>Alt +  Down Arrow</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the select popup |
-| <kbd>Alt +  Down Arrow + Alt +  Down Arrow </kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> + <kbd>⌥</kbd> + <kbd>↓</kbd> | Toggles between two popups |
+| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup. |
+| <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup. |
 
 ### Calendar navigation
 
@@ -73,38 +71,38 @@ Use the following keys to interact with the Calendar after the DatePicker popup
 
 | Windows | Mac | Description |
 | --- | --- | --- |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Focuses the previous week date. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Focuses the next week date. |
-| <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous date. |
-| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next date. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Focuses the first date in the month. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Focuses the last date in the month. |
-| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Focuses the same date in the previous month. |
-| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Focuses the same date in the next month. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Focuses the same day of the previous week. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Focuses the same day of the next week. |
+| <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous day. |
+| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next day. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Focuses the first day of the month. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Focuses the last day of the month. |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Focuses the same date of the previous month. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Focuses the same date of the next month. |
 | <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused date. |
-| <kbd>Shift + Page Up</kbd> | <kbd>⇧</kbd> + <kbd>Page Up</kbd> | Focuses the same date in the previous year. |
-| <kbd>Shift + Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the previous year. |
-| <kbd>Ctrl + </kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves into the inner level of view like month-year, year-decade |
-| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves out from the depth level view like decade-year, year-month |
-| <kbd>Control +Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Focuses the starting date in the current year. |
-| <kbd>Control +End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Focuses the ending date in the current year. |
+| <kbd>Shift</kbd> + <kbd>Page Up</kbd> | <kbd>⇧</kbd> + <kbd>Page Up</kbd> | Focuses the same date in the previous year. |
+| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the next year. |
+| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves up one view (month → year, year → decade). |
+| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves down one view (decade → year, year → month). |
+| <kbd>Ctrl</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Focuses the first date of the current year. |
+| <kbd>Ctrl</kbd> + <kbd>End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Focuses the last date of the current year. |
 
-Use the following shortcut keys to interact with the TimePicker after the TimePicker Popup has opened:
+Use the following shortcut keys to interact with the TimePicker after the TimePicker popup has opened:
 
 | Windows | Mac | Description |
 | --- | --- | --- |
 | <kbd>↑</kbd> | <kbd>↑</kbd> | Navigates and selects the previous item. |
 | <kbd>↓</kbd> | <kbd>↓</kbd> | Navigates and selects the next item. |
-| <kbd>←</kbd> | <kbd>←</kbd> | Moves the cursor towards arrow key pressed direction. |
-| <kbd>→</kbd> | <kbd>→</kbd> | Moves the cursor towards arrow key pressed direction. |
+| <kbd>←</kbd> | <kbd>←</kbd> | Moves the cursor toward the arrow direction. |
+| <kbd>→</kbd> | <kbd>→</kbd> | Moves the cursor toward the arrow direction. |
 | <kbd>Home</kbd> | <kbd>Home</kbd> | Navigates and selects the first item. |
 | <kbd>End</kbd> | <kbd>End</kbd> | Navigates and selects the last item. |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused item and close the popup. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item and closes the popup. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup. |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup. |
 | <kbd>Esc</kbd> | <kbd>Esc</kbd> | Closes the popup. |
 
-N> To focus out the DateTimePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) here.
+N> The “t” key behavior in the following example is custom to the sample and not a built-in shortcut. For additional information about native events, see the [Native events](https://blazor.syncfusion.com/documentation/datetime-picker/native-events) topic.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -122,11 +120,12 @@ N> To focus out the DateTimePicker component, use the `t` keys. For additional i
     }
 }
 ```
+
 ## Ensuring accessibility
 
-The Blazor DateTimePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor DateTimePicker component’s accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
-The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the accessibility of the DateTimePicker component with accessibility tools.
+The accessibility compliance of the DateTimePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datetimepicker) in a new window to evaluate the DateTimePicker component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/datetime-picker/data-binding.md b/blazor/datetime-picker/data-binding.md
index a41c37fedf..d180453f14 100644
--- a/blazor/datetime-picker/data-binding.md
+++ b/blazor/datetime-picker/data-binding.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Data Binding in Blazor Datetime Picker Component | Syncfusion
-description: Checkout and learn here all about Data Binding in Syncfusion Blazor Datetime Picker component and more.
+title: Data Binding in Blazor DateTimePicker Component | Syncfusion
+description: Learn how to bind values to the Syncfusion Blazor DateTimePicker using one-way binding, two-way binding with @bind-Value, and dynamic updates.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
-# Data Binding in Blazor Datetime Picker Component
+# Data Binding in Blazor DateTimePicker Component
 
-This section briefly explains how to bind the value to the DateTimePicker component in the below different ways.
+This section explains how to bind values to the DateTimePicker component in the following ways.
 
 * One-Way Data Binding
 * Two-Way Data Binding
@@ -17,7 +17,7 @@ This section briefly explains how to bind the value to the DateTimePicker compon
 
 ## One-way binding
 
-You can bind the value to the DateTimePicker component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue").
+Bind a value to the DateTimePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but user edits do not update the source automatically.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -38,7 +38,7 @@ You can bind the value to the DateTimePicker component directly for `Value` prop
 
 ## Two-way data binding
 
-Two-way binding can be achieved by using `bind-Value` attribute and it supports string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all places where the variable is bound for the **bind-value** attribute.
+Two-way binding is achieved with the `@bind-Value` attribute. This binds the component’s value to the specified field and keeps the UI and source in sync. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -54,9 +54,7 @@ public DateTime? DateValue { get; set; } = DateTime.Now;
 
 ## Dynamic value binding
 
-You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DateTimePicker component** only. This method notifies the component that its state has changed and queues a re-render.
-
-There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example.
+The value can be updated programmatically in response to component events (such as the DateTimePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example updates the value in the DateTimePicker’s `ValueChange` event.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -78,4 +76,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> ar
         StateHasChanged();
     }
 }
-```
+```
\ No newline at end of file
diff --git a/blazor/datetime-picker/date-time-format.md b/blazor/datetime-picker/date-time-format.md
index cbbaf90358..d99893ddac 100644
--- a/blazor/datetime-picker/date-time-format.md
+++ b/blazor/datetime-picker/date-time-format.md
@@ -1,20 +1,20 @@
 ---
 layout: post
-title:  DateTime Format in Blazor DateTimePicker Component | Syncfusion
+title: DateTime Format in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about DateTime Format in Syncfusion Blazor DateTimePicker component and much more.
 platform: Blazor
 control: DateTimePicker
 documentation: ug
 ---
-#  DateTime Format in Blazor DateTimePicker Component
+# DateTime Format in Blazor DateTimePicker Component
 
-## Display Date and Time format
+## Display date and time format
 
-The display date and time format can be used to specify how the date and time value is displayed or entered in a `DateTimePicker` control
+The display format defines how the date and time value is shown (and parsed) in the DateTimePicker.
 
-By default, the DateTimePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property.
+By default, the DateTimePicker’s format is based on the current culture. You can also apply a [custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) .NET date and time format by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Format) property.
 
-> Once the date format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the date format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used.
+> When a format string is specified, it is used consistently regardless of culture settings. This provides a predictable, standardized representation for both display and entry.
 
 {% highlight Razor %}
 
@@ -27,9 +27,9 @@ By default, the DateTimePicker's format is based on the culture. You can also se
 
 ## Input Formats
 
-The input format can be used to specify how the date and time value is entered in a `DateTimePicker` control.
+The input format controls how users can type date and time values in the DateTimePicker.
 
-The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property.
+The string formats specified for input determine acceptable user-entered patterns. When the user types a date and time in one of the input formats, it is automatically parsed and then displayed using the configured display format after pressing Enter/Tab or when the input loses focus. This allows flexible, intuitive entry using multiple patterns. Configure acceptable formats with the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property, using .NET [custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) date/time format strings.
 
 {% highlight Razor %}
 
diff --git a/blazor/datetime-picker/date-time-range.md b/blazor/datetime-picker/date-time-range.md
index de8d918ce2..22539e4985 100644
--- a/blazor/datetime-picker/date-time-range.md
+++ b/blazor/datetime-picker/date-time-range.md
@@ -1,21 +1,21 @@
 ---
 layout: post
-title: DateTime Range in Blazor Datetime Picker Component | Syncfusion
+title: DateTime Range in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about DateTime Range in Syncfusion Blazor Datetime Picker component and more.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
-# DateTime Range in Blazor Datetime Picker Component
+# DateTime Range in Blazor DateTimePicker Component
 
 ## DateTime Restriction
 
-DateTimePicker provides an option to select a date and time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must always be less than the Max value.
+DateTimePicker provides an option to select a date and time within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must be less than the Max value.
 
-The `Value` property depends on the Min/Max with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation.
+The `Value` property is validated against Min/Max based on the [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) setting. For details, see the [Strict Mode](./strict-mode) section.
 
-The following code allows selecting a date within the range from 7th to 27th day in a month.
+The following code allows selecting a date within the range from the 7th to the 27th of the month.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -29,10 +29,11 @@ The following code allows selecting a date within the range from 7th to 27th day
 }
 ```
 
-
 ![DateTime Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-selection.png)
 
-When the Min and Max properties are configured and the selected datetime value is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid.
+When Min and Max are configured:
+- With StrictMode enabled, out-of-range input is clamped to the nearest boundary (Min/Max) and invalid input reverts to the previous valid value.
+- With StrictMode disabled, the textbox allows out-of-range input and invalid input results in `null`. The input is highlighted with an error style to indicate an invalid or out-of-range entry.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -46,18 +47,20 @@ When the Min and Max properties are configured and the selected datetime value i
 }
 ```
 
-
 ![Blazor DateTimePicker displays Selected Date and Time](./images/blazor-datetimepicker-date-time-selection.png)
 
-N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range.
+N> If the values of `Min` or `Max` are changed through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar selection always respects Min and Max; disabled dates cannot be selected from the popup.
 
 ## Time Restriction
 
-DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must always be less than the MaxTime value.
+DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must be less than the MaxTime value.
 
-The `Value` property depends on the MinTime/MaxTime with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation.
+The `Value` property is validated against MinTime/MaxTime based on [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode). MinTime/MaxTime apply to the time portion of the value and work together with Min/Max dates:
+- For the Min date, times earlier than MinTime are restricted.
+- For the Max date, times later than MaxTime are restricted.
+- For dates between Min and Max, the allowed time range follows MinTime–MaxTime.
 
-The following code allows selecting a date within the range from 10:00 AM to 8:30 PM of each day.
+The following code allows selecting a time between 10:00 AM and 8:30 PM each day.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -73,9 +76,7 @@ The following code allows selecting a date within the range from 10:00 AM to 8:3
 
 ![Time Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-time-selection.png)
 
-When minTime and maxTime are set, the component will prioritize min if minTime is less than the current min time, and max if maxTime is greater than the current max time. Conversely, it will prioritize minTime if it is greater than the current min time, and maxTime if it is less than the current max time. These behaviors apply only when min and max Dates are selected or pre-bounded, with minTime and maxTime values set for all other dates apart from min and max dates.
-
-The below example allows selecting a time within the range from 10:00 AM to 8:30 PM of each day.
+The example below also allows selecting a time within the range from 10:00 AM to 8:30 PM of each day.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
diff --git a/blazor/datetime-picker/events.md b/blazor/datetime-picker/events.md
index 0daea1fade..60fa0e5d7f 100644
--- a/blazor/datetime-picker/events.md
+++ b/blazor/datetime-picker/events.md
@@ -1,15 +1,17 @@
 ---
 layout: post
-title: Events in Blazor Datetime Picker Component | Syncfusion
-description: Checkout and learn here all about Events in Syncfusion Blazor Datetime Picker component and much more.
+title: Events in Blazor DateTimePicker Component | Syncfusion
+description: Learn about events in the Syncfusion Blazor DateTimePicker component, including ValueChange, OnOpen, OnClose, OnRenderDayCell, and more.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
 # Events in Blazor Datetime Picker Component
 
-This section explains the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions.
+This section lists and describes the events raised by the DateTimePicker component for user interactions and lifecycle actions.
+
+N> Starting with `v17.2.*`, the DateTimePicker exposes a streamlined set of events. Event names were changed from previous releases, and several events were removed. The following table shows the event name changes from `v17.1.*` to `v17.2.*`.
 
 Event Name(`v17.1.*`) |Event Name(`v17.2.*`)
 -----|-----
@@ -20,7 +22,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Blur
 
-`Blur` event triggers when the input loses the focus.
+The `Blur` event is triggered when the input loses focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -40,7 +42,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## ValueChange
 
-`ValueChange` event triggers when the Calendar value is changed.
+The `ValueChange` event is triggered when the DateTimePicker value (date and time) changes.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -60,7 +62,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## OnClose
 
-`OnClose` event triggers when popup is closed.
+The `OnClose` event is triggered when the popup is closed.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -80,7 +82,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Created
 
-`Created` event triggers when DateTimePicker is created.
+The `Created` event is triggered when the component is created.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -100,7 +102,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Destroyed
 
-`Destroyed` event triggers when DateTimePicker is destroyed.
+The `Destroyed` event is triggered when the component is destroyed.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -120,7 +122,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Focus
 
-`Focus` event triggers when the input gets focus.
+The `Focus` event is triggered when the input gains focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -141,7 +143,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## Navigated
 
-`Navigated` event triggers when the Calendar is navigated to another level or within the same level of view.
+The `Navigated` event is triggered when navigating between calendar views (such as month, year, or decade) or within the same view.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -162,7 +164,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## OnOpen
 
-`OnOpen` event triggers when popup is opened.
+The `OnOpen` event is triggered when the popup is opened.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -183,7 +185,7 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 
 ## OnRenderDayCell
 
-`OnRenderDayCell` event triggers when each day cell of the Calendar is rendered.
+The `OnRenderDayCell` event is triggered when each day cell of the calendar is rendered.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -201,4 +203,4 @@ renderDayCell |[OnRenderDayCell](events#onrenderdaycell)
 }
 ```
 
-N> DateTimePicker will be limited with these events and new events will be added in future based on the user requests. If the event you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
+N> The DateTimePicker currently supports the events listed above. Additional events may be introduced in future releases based on user requests. If the required event is not listed, submit a request on the [Syncfusion Feedback](https://www.syncfusion.com/feedback/blazor-components) portal.
\ No newline at end of file
diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md
index f492904f7b..8c8ada7e67 100644
--- a/blazor/datetime-picker/getting-started-with-web-app.md
+++ b/blazor/datetime-picker/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DateTimePicker Component in Web App
 
-This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor DateTimePicker](https
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the Blazor Web App
 
-To add **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor DateTimePicker** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %}
 
diff --git a/blazor/datetime-picker/getting-started.md b/blazor/datetime-picker/getting-started.md
index 2e727acf2b..04adf78d7a 100644
--- a/blazor/datetime-picker/getting-started.md
+++ b/blazor/datetime-picker/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor DateTimePicker Component
 
-This section briefly explains about how to include [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Blazor DateTimePicker component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker) sample:.
+To get started quickly with the Blazor DateTimePicker component, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DateTimePicker).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=BzcHdhd4o8I"%}
@@ -26,11 +26,11 @@ To get start quickly with Blazor DateTimePicker component, you can check on this
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
-To add **Blazor DateTimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor DateTimePicker** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,8 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure in the project root directory where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the complete list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -138,7 +138,8 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
+
 
 ## Add Blazor DateTimePicker component
 
@@ -152,13 +153,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker c
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DateTimePicker component in default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzDsBOKWcNOSex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DateTimePicker Component](./images/blazor-datetimepicker-component.png)" %}
 
 ## Setting the Value, Min and Max
 
-The minimum and maximum date time can be defined with the help of [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties.
+Define the minimum and maximum selectable dates using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/datetime-picker/globalization.md b/blazor/datetime-picker/globalization.md
index dd1f55080f..74b60d8908 100644
--- a/blazor/datetime-picker/globalization.md
+++ b/blazor/datetime-picker/globalization.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Globalization in Blazor Datetime Picker Component | Syncfusion
+title: Globalization in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about Globalization in Syncfusion Blazor Datetime Picker component and more.
 platform: Blazor
 control: Datetime Picker 
@@ -9,13 +9,13 @@ documentation: ug
 
 # Globalization in Blazor Datetime Picker Component
 
-[Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor DateTimePicker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) component supports localization and culture-specific formatting. For configuration details, see the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components. When a Locale is set, the component reflects the culture’s date and time formats, month and day names, and other culture-specific settings. Ensure that the required culture data is loaded before rendering the component.
 
 ## Right-To-Left
 
-The DateTimePicker supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to set the RTL direction.
+The DateTimePicker supports right-to-left (RTL) layout for languages such as Arabic and Hebrew. Use the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_EnableRtl) property to render the component in RTL direction. RTL layout is independent of the Locale setting; both can be combined to achieve the desired language and layout.
 
-The following code example initialize the DateTimePicker component in `Arabic` culture.
+The following code example initializes the DateTimePicker component with the `ar` (Arabic) culture and RTL layout.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -33,4 +33,4 @@ The following code example initialize the DateTimePicker component in `Arabic` c
 }
 ```
 
-![Right to Left in Blazor DateTimePicker with Arabic Culture](./images/blazor-datetimepicker-right-to-left.png)
+![Blazor DateTimePicker in Arabic culture with right-to-left layout](./images/blazor-datetimepicker-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md
index 627a60fea1..82a5e74252 100644
--- a/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md
+++ b/blazor/datetime-picker/how-to/disable-the-datetimepicker-component.md
@@ -1,15 +1,15 @@
 ---
 layout: post
 title: Disable the Blazor DateTimePicker Component | Syncfusion
-description: Checkout and learn here all about disabling the Syncfusion Blazor DateTimePicker Component and much more.
+description: Learn how to disable the Syncfusion Blazor DateTimePicker component using the Enabled property to prevent focus, typing, and opening the popup.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
 # Disable the Blazor DateTimePicker Component
 
-To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`.
+To disable the DateTimePicker, set its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerModel-1.html#Syncfusion_Blazor_Calendars_DateTimePickerModel_1_Enabled) property to `false`. When disabled, the input cannot receive focus, typing is blocked, and the popup cannot be opened. The default value of `Enabled` is `true`, and this property can be data-bound to toggle the disabled state at runtime.
 
 The following code demonstrates the disabled component.
 
@@ -23,5 +23,4 @@ The following code demonstrates the disabled component.
 }
 ```
 
-
-![Disable State in Blazor DateTimePicker](../images/blazor-datetimepicker-disable-state.png)
\ No newline at end of file
+![Blazor DateTimePicker shown in a disabled state](../images/blazor-datetimepicker-disable-state.png)
\ No newline at end of file
diff --git a/blazor/datetime-picker/how-to/open-popup-on-input-click.md b/blazor/datetime-picker/how-to/open-popup-on-input-click.md
index 82a43de773..d9f1df9a57 100644
--- a/blazor/datetime-picker/how-to/open-popup-on-input-click.md
+++ b/blazor/datetime-picker/how-to/open-popup-on-input-click.md
@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Open the Blazor Datetime Picker popup on Focus | Syncfusion
-description: Learn here all about opening the Syncfusion Blazor Datetime Picker popup upon focusing input and much more.
+title: Open the Blazor DateTimePicker popup on Focus | Syncfusion
+description: Learn how to open the Syncfusion Blazor DateTimePicker popup when the input receives focus by enabling the OpenOnFocus property.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
 # Open the Blazor Datetime Picker popup on Focus
 
-You can also open the Datetime Picker popup on input focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to true.
+Open the DateTimePicker popup when the input receives focus by setting the [OpenOnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_OpenOnFocus) property to `true`.
 
-The following example demonstrates how to open the Datetime Picker popup when the input is focused.
+The following example demonstrates how to open the DateTimePicker popup when the input is focused.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -19,6 +19,4 @@ The following example demonstrates how to open the Datetime Picker popup when th
 <SfDateTimePicker TValue="DateTime?"  OpenOnFocus="true" ShowClearButton="true"></SfDateTimePicker>
 
 ```
-![Opening Blazor Datetime Picker Popup](../images/blazor-datetimepicker-open-focus.gif)
-
-
+![Opening the Blazor DateTimePicker popup when the input is focused](../images/blazor-datetimepicker-open-focus.gif)
\ No newline at end of file
diff --git a/blazor/datetime-picker/how-to/set-the-placeholder.md b/blazor/datetime-picker/how-to/set-the-placeholder.md
index 7a89aa7b96..54f093d057 100644
--- a/blazor/datetime-picker/how-to/set-the-placeholder.md
+++ b/blazor/datetime-picker/how-to/set-the-placeholder.md
@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Set the Placeholder in Blazor Datetime Picker Component | Syncfusion
-description: Checkout and learn here all about Set the Placeholder in Syncfusion Blazor Datetime Picker component and more.
+title: Set the Placeholder in Blazor DateTimePicker Component | Syncfusion
+description: Learn how to set the Placeholder in the Syncfusion Blazor DateTimePicker component to display hint text in the input.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker 
 documentation: ug
 ---
 
-# Set the Placeholder in Blazor Datetime Picker Component
+# Set the Placeholder in Blazor DateTimePicker Component
 
-The following code demonstrates how to set `Placeholder` in the DateTimePicker component.
+The following example demonstrates how to set the `Placeholder` in the DateTimePicker component.
 
-Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Placeholder), you can display a short hint in the input element.
+Using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Placeholder) property, a short hint can be displayed in the input element to guide users before a value is selected.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -19,5 +19,4 @@ Using [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cale
 <SfDateTimePicker TValue="DateTime?" Placeholder="Choose a datetime"></SfDateTimePicker>
 ```
 
-
-![Blazor DateTimePicker displays Hint Element](../images/blazor-datetimepicker-hint-element.png)
\ No newline at end of file
+![Blazor DateTimePicker displays hint text using the Placeholder property](../images/blazor-datetimepicker-hint-element.png)
\ No newline at end of file
diff --git a/blazor/datetime-picker/images/blazor-create-web-app.png b/blazor/datetime-picker/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/datetime-picker/images/blazor-create-web-app.png differ
diff --git a/blazor/datetime-picker/islamic-calendar.md b/blazor/datetime-picker/islamic-calendar.md
index c0e8539ac2..b052efd632 100644
--- a/blazor/datetime-picker/islamic-calendar.md
+++ b/blazor/datetime-picker/islamic-calendar.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Islamic Calendar in Blazor Datetime Picker  Component | Syncfusion
+title: Islamic Calendar in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about Islamic Calendar in the Syncfusion Blazor Datetime Picker  component and much more.
 platform: Blazor
 control: Datetime Picker
@@ -9,14 +9,14 @@ documentation: ug
 
 # Islamic Calendar in Blazor Datetime Picker  Component
 
-In addition to the Gregorian calendar, the Datetime Picker  control supports displaying the Islamic calendar (Hijri calendar). Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days.Users can either select a date from the Islamic calendar or manually enter a date. Additionally, you can use the ConvertToHijri and ConvertToGregorian methods to parse dates.
+In addition to the Gregorian calendar, the DateTimePicker component supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. Users can select a date from the Islamic calendar or manually enter a date. Additionally, helper methods such as ConvertToHijri and ConvertToGregorian can be used to convert dates between calendar systems.
 
-Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.By default, calendar mode is in Gregorian. You can enable the Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) as CalendarType.Islamic.
+The DateTimePicker retains its core features in Islamic mode, such as minimum and maximum date constraints, week numbers, first day of the week, right-to-left (RTL) support, start and depth views, localization, and the ability to highlight and customize specific dates. By default, the calendar mode is Gregorian. Enable Islamic mode by setting the [CalendarMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_CalendarMode) property to CalendarType.Islamic. The selected value continues to be handled as a date/time value while the UI uses the Hijri calendar for display and navigation.
 
-The following example demonstrates how to display the Islamic Calendar (Hijri Calendar).
+The following example demonstrates how to display the Islamic calendar (Hijri calendar).
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/Islamic-Calendar.razor %}
 
-{% endhighlight %} 
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/datetime-picker/mask-support.md b/blazor/datetime-picker/mask-support.md
index 446f845c78..e91f146c93 100644
--- a/blazor/datetime-picker/mask-support.md
+++ b/blazor/datetime-picker/mask-support.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title:  Mask Support in Blazor DateTimePicker Component | Syncfusion
+title: Mask Support in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about Mask Support in Syncfusion Blazor DateTimePicker component and much more.
 platform: Blazor
 control: DateTimePicker
@@ -8,7 +8,7 @@ documentation: ug
 ---
 # Mask Support in Blazor DateTimePicker Component
 
-The masking feature allows users to enter a date and time in the correct format, as specified by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. This helps to ensure that the date and time is entered correctly and can also make it easier for users to understand how to enter the date and time. The [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property in the DateTimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific datetime format pattern for entering the date and time.
+The masking feature guides users to enter date and time values that match the display format defined by the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property. Enable or disable masking using the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property. When enabled, the input shows a mask pattern derived from the configured format and the current culture (including localized separators and literals). Masking improves guidance during entry but does not, by itself, validate out-of-range values or business rules.
 
 {% highlight Razor %}
 
@@ -20,25 +20,19 @@ The masking feature allows users to enter a date and time in the correct format,
 
 ## MaskPlaceholder
 
-The [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows you to set custom placeholder text for each segment of the date and time format in a `DateTimePicker` component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component's configuration along with the [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) property.
+The [DateTimePickerMaskPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerMaskPlaceholder.html) directive allows custom placeholder text for each segment of the date and time format in a `DateTimePicker`. Use it together with [EnableMask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_EnableMask) to provide clear guidance for expected input. Placeholders apply to the segments used by the configured format (for example, dd/MM/yyyy hh:mm:ss).
 
 The `DateTimePickerMaskPlaceholder` tag directive has the following properties:
 
-* [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day) : Specifies the placeholder text for the day (`dd`) segment of the date value.
+* [Day](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Day) : Placeholder text for the day segment (such as `d`/`dd`).
+* [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month) : Placeholder text for the month segment (such as `M`/`MM`).
+* [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year) : Placeholder text for the year segment (such as `yy`/`yyyy`).
+* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Placeholder text for the hour segment (such as `h`/`hh`).
+* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Placeholder text for the minute segment (`m`/`mm`).
+* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Placeholder text for the second segment (`s`/`ss`).
+* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Placeholder text for the weekday segment (`ddd`/`dddd`).
 
-* [Month](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Month) : Specifies the placeholder text for the month (`MM`) segment of the date value.
-
-* [Year](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Year) : Specifies the placeholder text for the year (`yy`) segment of the date value.
-
-* [Hour](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Hour) : Specifies the placeholder text for the hour (`hh`) segment of the time value.
-
-* [Minute](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Minute) : Specifies the placeholder text for the minute (`mm`) segment of the time value.
-
-* [Second](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_Second): Specifies the placeholder text for the second (`ss`) segment of the time value.
-
-* [DayOfWeek](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.MaskPlaceholder.html#Syncfusion_Blazor_Calendars_MaskPlaceholder_DayOfWeek) : Specifies the placeholder text for the day of the week (`dddd`) segment of the date value.
-
-The `DateTimePicker` component uses placeholder text from the current culture's resources file for each segment of the date and time format by default. If you want to use custom placeholder text instead, you can specify it using the `DateTimePickerMaskPlaceholder` directive and its properties. 
+By default, the component uses placeholder text from the current culture’s resource file for each date and time segment. To override these defaults, specify custom values using the `DateTimePickerMaskPlaceholder` directive.
 
 {% highlight Razor %}
 
@@ -48,4 +42,4 @@ The `DateTimePicker` component uses placeholder text from the current culture's
 
 ![Blazor DateTimePicker Mask Support with MaskPlaceholder](./images/DateTimePickerMaskPlaceholder.gif)
 
-> If you do not specify custom placeholder text for any segment of the date and time format, the component will use the default placeholder text from the current culture based resources file for not specified segments.
\ No newline at end of file
+> If custom placeholder text is not specified for a segment, the component uses the default placeholder text from the current culture’s resource file for that segment. The mask pattern and separators are culture-aware, and validation behavior (such as handling incomplete or out-of-range input) follows the component’s configuration, including properties like StrictMode.
\ No newline at end of file
diff --git a/blazor/datetime-picker/native-events.md b/blazor/datetime-picker/native-events.md
index 33e4b53bde..fb02b44830 100644
--- a/blazor/datetime-picker/native-events.md
+++ b/blazor/datetime-picker/native-events.md
@@ -1,21 +1,21 @@
 ---
 layout: post
-title: Native Events in Blazor Datetime Picker Component | Syncfusion
+title: Native Events in Blazor DateTimePicker Component | Syncfusion
 description: Checkout and learn here all about Native Events in Syncfusion Blazor Datetime Picker component and more.
 platform: Blazor
-control: Datetime Picker 
+control: DateTimePicker
 documentation: ug
 ---
 
-# Native Events in Blazor Datetime Picker Component
+# Native Events in Blazor DateTimePicker Component
 
-The following section explains steps to include native events and pass data to event handler in DateTimePicker component.
+The following section explains how to attach native DOM events to the DateTimePicker component and pass event data to the handler.
 
 ## Bind native events to DateTimePicker
 
-You can access any native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Native events can be attached by using the `@on<event>` attribute on the component. The attribute value is treated as the event handler.
 
-In the following example, the KeyPressed method is called every time the key is pressed on input.
+In the following example, the `KeyPressed` method is called every time a key is pressed in the input.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is
 }
 ```
 
-Also, you can rewrite the previous example code as follows using Lambda expressions.
+The previous example can also be written using a lambda expression.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -39,16 +39,16 @@ Also, you can rewrite the previous example code as follows using Lambda expressi
 
 ## Pass event data to event handler
 
-Blazor provides a set of argument types to map to native events. The following is the list of event types and event arguments:
+Blazor provides argument types that map to native DOM events. Common event categories and argument types include:
 
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+* Focus events - FocusEventArgs
+* Mouse events - MouseEventArgs
+* Keyboard events - KeyboardEventArgs
+* Input events - ChangeEventArgs/EventArgs
+* Touch events – TouchEventArgs
+* Pointer events – PointerEventArgs
 
-In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "5" key.
+In the following example, the `KeyPressed` method is invoked on each key press, and a message is written only when the "5" key is pressed.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -66,7 +66,7 @@ In the following example, the KeyPressed method is called every time any key is
 }
 ```
 
-Using Lambda expression also, you can pass the event data to the event handler.
+Lambda expressions can also be used to pass the event data to the handler.
 
 ## List of native events supported
 
diff --git a/blazor/datetime-picker/special-dates.md b/blazor/datetime-picker/special-dates.md
index ca2a9edbb0..6b0ab8bb52 100644
--- a/blazor/datetime-picker/special-dates.md
+++ b/blazor/datetime-picker/special-dates.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Special Dates in Blazor DateTimePicker Component | Syncfusion
-description: Checkout and learn here all about Special Dates in Syncfusion Blazor DateTimePicker component and more.
+description: Learn how to customize special dates in the Syncfusion Blazor DateTimePicker using the OnRenderDayCell event to highlight or disable specific days.
 platform: Blazor
 control: DateTimePicker
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Special Dates in Blazor DateTimePicker Component
 
-You can customize specific dates in a DateTimePicker by using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnRenderDayCell) event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in the DateTimePicker. Here, list of dates in the current month are customized with custom styles by adding the personal-appointment and official-appointment class.
+Customize specific dates in the DateTimePicker using the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.DateTimePickerEvents-1.html#Syncfusion_Blazor_Calendars_DateTimePickerEvents_1_OnRenderDayCell) event. This event is triggered for each day cell as it is created, allowing to apply custom styles or disable specific dates. In the following example, selected dates in the current month are styled by adding the CSS classes personal-appointment and official-appointment defined in the sample.
 
 ```cshtml
 
@@ -88,4 +88,4 @@ You can customize specific dates in a DateTimePicker by using the [OnRenderDayCe
 
 ```
 
-![Blazor DateTimePicker with special dates](./images/blazor_datetimepicker_special_dates.png)
\ No newline at end of file
+![Blazor DateTimePicker highlighting special dates for personal and official appointments](./images/blazor_datetimepicker_special_dates.png)
\ No newline at end of file
diff --git a/blazor/datetime-picker/strict-mode.md b/blazor/datetime-picker/strict-mode.md
index 82a04bba19..bfc0a46fef 100644
--- a/blazor/datetime-picker/strict-mode.md
+++ b/blazor/datetime-picker/strict-mode.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Strict Mode in Blazor Datetime Picker Component | Syncfusion
-description: Checkout and learn here all about Strict Mode in Syncfusion Blazor Datetime Picker component and more.
+description: Learn how StrictMode works in the Syncfusion Blazor DateTimePicker, including behavior for invalid and out-of-range input with Min and Max date-time limits.
 platform: Blazor
 control: Datetime Picker 
 documentation: ug
@@ -9,13 +9,12 @@ documentation: ug
 
 # Strict Mode in Blazor Datetime Picker Component
 
-The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) is an act, that allows the users to enter only the valid date and time within the specified `Min/Max` range in text box. If the input entered is invalid, then the component will stay with the previous value. Else, if the datetime is out of range, then the component will set the datetime to the Min/Max value.
+The [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property controls how typed input is validated against the configured `Min` and `Max` range. When enabled, only valid date and time values within the specified range are accepted. If the entered value is invalid, the component retains the previous valid value. If the entered value is out of range, the component clamps the value to the nearest boundary (`Min` or `Max`).
 
-The following example demonstrates the DateTimePicker in `StrictMode` with Min/Max range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Here, it allows to enter only the valid date and time within the specified range.
+The following example demonstrates the DateTimePicker in `StrictMode` with a `Min`/`Max` range of `5/5/2019 2:00 AM` to `5/25/2019 2:00 AM`. Only valid values within the range are accepted.
 
-* If you are trying to enter the out-of-range value like `5/28/2019`, then the value will set to the `Max` value as `5/25/2019 2:00 AM` since the value 28 is greater than the `Max` value of 25.
-
-* If you are trying to enter the invalid date, then the Value will stay with the previous value.
+- If an out-of-range value such as `5/28/2019` is entered, the value is set to the `Max` value (`5/25/2019 2:00 AM`).
+- If an invalid date is entered, the value remains at the previous valid value.
 
 The following code demonstrates the DateTimePicker with StrictMode `true`.
 
@@ -33,13 +32,12 @@ The following code demonstrates the DateTimePicker with StrictMode `true`.
 
 ![Strict Mode in Blazor DateTimePicker](./images/blazor-datetimepicker-strictmode.png)
 
-By default, the DateTimePicker act in `StrictMode` as `false` state, that allows you to enter the invalid or out-of-range datetime in text box.
-
-If the datetime is out-of-range or invalid, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid.
+By default, `StrictMode` is `false`. In this state, the textbox allows invalid or out-of-range date and time values to be entered.
 
-The following code demonstrates the `StrictMode` as `false`. Here, it allows to enter the valid or invalid value in textbox.
+- If the value is invalid, the model becomes `null`.
+- If the value is out of range, the model can hold the out-of-range value. The input is highlighted with an `error` class to indicate an invalid or out-of-range entry.
 
-If you are entering the out-of-range or invalid datetime value, then the model value will be set to `out of range` datetime value or `null` respectively with highlighted `error` class to indicate the datetime is out of range or invalid.
+The following code demonstrates `StrictMode` as `false`. In this mode, valid and invalid values can be entered in the textbox.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -53,8 +51,6 @@ If you are entering the out-of-range or invalid datetime value, then the model v
 }
 ```
 
-
-
 ![Blazor DateTimePicker without StrictMode](./images/blazor-datetimepicker-without-strictmode.png)
 
-N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range.
\ No newline at end of file
+N> If the values of `Min` or `Max` are changed through code-behind, update the `Value` property to ensure it remains within the defined range. Calendar/time list selection always respects `Min` and `Max`; disabled dates and times cannot be selected from the popup.
\ No newline at end of file
diff --git a/blazor/datetime-picker/style-appearance.md b/blazor/datetime-picker/style-appearance.md
index bc9bdbadc3..ca40b801a6 100644
--- a/blazor/datetime-picker/style-appearance.md
+++ b/blazor/datetime-picker/style-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and Appearance in Blazor Datetime Picker Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+Use the following CSS selectors to modify the DateTimePicker component’s appearance based on user preferences.
 
 ## Customizing the appearance of Datetime Picker container element
 
-Use the following CSS to customize the appearance of Datetime Picker container element.
+Apply the following CSS to adjust the input height and font size for the DateTimePicker container element.
 
 ```css
 /* To specify height and font size */
@@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of Datetime Picker container e
 
 ## Customizing the Datetime Picker icons element
 
-Use the following CSS to customize the Datetime Picker icons element.
+Use the following CSS to style the DateTimePicker’s date and time icon elements.
 
 ```css
 /* To specify background color and font size */
@@ -37,7 +37,7 @@ Use the following CSS to customize the Datetime Picker icons element.
 
 ## Customizing the time picker popup in the Datetime Picker 
 
-Use the following CSS to customize the time picker popup in the Datetime Picker.
+Use the following CSS to adjust the height of the time picker popup in the DateTimePicker.
 
 ```css
 /* To specify height */
@@ -48,7 +48,7 @@ Use the following CSS to customize the time picker popup in the Datetime Picker.
 
 ## Full screen mode support in mobiles and tablets
 
-The DateTimePicker component's full-screen mode feature enables users to view the component popup element in full-screen mode on mobile devices with improved visibility and a better user experience. It is important to mention that this feature is exclusively available for mobile devices in both landscape and portrait orientations. To activate the full screen mode within the DateTimePicker component, simply set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) API value to `true`. This action will extend the calendar and time popup element to occupy the entire screen on mobile devices.
+The DateTimePicker supports a full-screen popup on mobile devices to improve visibility and user experience in both landscape and portrait orientations. To enable full-screen mode, set the [FullScreen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_FullScreen) property to `true`. On mobile devices, the calendar and time popup expands to occupy the entire screen; desktop behavior is unchanged.
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -57,10 +57,10 @@ The DateTimePicker component's full-screen mode feature enables users to view th
 
 ```
 
-![DateTimePickerFullScreen](./images/blazor-datetimepicker-full-screen-mode.gif)
+![DateTimePicker popup displayed in mobile full-screen mode](./images/blazor-datetimepicker-full-screen-mode.gif)
 
 ## Customizing the Calendar popup of the Datetime Picker
 
-Check the below section to customize the style and appearance of the Calendar component in the Datetime Picker.
+See the following section to customize the Calendar’s style and appearance when used within the DateTimePicker.
 
-[Customizing Calendar's style and appearance](../calendar/style-appearance/)
\ No newline at end of file
+[Customizing Calendar's style and appearance](../calendar/style-appearance)
\ No newline at end of file
diff --git a/blazor/datetime-picker/week-number.md b/blazor/datetime-picker/week-number.md
index 53b0017b53..ac994cd37c 100644
--- a/blazor/datetime-picker/week-number.md
+++ b/blazor/datetime-picker/week-number.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Week Number in Blazor DateTimePicker Component
 
-You can enable WeekNumber in the DateTimePicker by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html?&_ga=2.27644924.1192045546.1630297484-1815315561.1628088345#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property.
+Enable week numbers in the DateTimePicker to display the week index in the calendar’s left column by using the [WeekNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekNumber) property.
 
 ```cshtml
 
@@ -23,15 +23,15 @@ You can enable WeekNumber in the DateTimePicker by using the [WeekNumber](https:
 
 ## Week Rule
 
-You can enable `WeekRule` in the DateTimePicker by using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This property provide an option to specify the rule for defining the first week of the year. Find the possible values of `WeekRule` property.
+Configure how the first week of the year is determined using the [WeekRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_WeekRule) property. This setting controls how week numbers roll over at the start of the year. The following values correspond to .NET’s CalendarWeekRule:
 
 Types  |Description  
 -----|-----
-FirstDay |Set the first week of the year's week number to be started from 1. Then it followed as 1, 2, 3 ...
-FirstFullWeek |Set the first week of the year's week number to be started from 52 or 53 (i.e December last week's week Number). Then it followed as 53, 1, 2 ...
-FirstFourDayWeek | Set the week number based on the majority of dates present in the week for the respected months. If January dates are presented in the week more than December, the first week of the year's week number will be started from 1. If December dates are presented in the week more than January, the first week of the year's week number will be started from 52 or 53.
-
+FirstDay | The first week starts on the first day of the year; subsequent weeks are numbered 1, 2, 3, and so on.
+FirstFullWeek | The first full week of the year is week 1; days before the first full week are counted as the last week (52 or 53) of the previous year.
+FirstFourDayWeek | The first week with at least four days in the new year is week 1; otherwise, that week is counted as the last week (52 or 53) of the previous year.
 
+N> The current culture (Locale) and the first day of the week influence week numbering. By default, the DateTimePicker uses the culture’s settings unless overridden.
 
 ![Blazor DateTimePicker displays Week Rule of FirstDay](./images/blazor-datetimepicker-first-day.png)
 
diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md
index 776abbb05d..d2f3fc12e8 100644
--- a/blazor/diagram/getting-started-with-maui-app.md
+++ b/blazor/diagram/getting-started-with-maui-app.md
@@ -11,7 +11,9 @@ documentation: ug
 
 This guide walks through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram component into a Blazor MAUI application using either Visual Studio or Visual Studio Code.
 
-A complete working example is available in the [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample).
+> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
+
+Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample).
 
 {% tabcontents %}
 
diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md
index 4f4b30a57f..a5d3d0d187 100644
--- a/blazor/diagram/getting-started-with-wasm-app.md
+++ b/blazor/diagram/getting-started-with-wasm-app.md
@@ -231,7 +231,7 @@ dotnet --version
 
 ## Step 1: Create a Blazor WebAssembly App using .NET CLI
 
-Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows), terminal (macOS), or command shell (Linux).
+Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -242,7 +242,7 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates a new Blazor WebAssembly app project and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
 
 ## Step 2: Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Diagram and Themes NuGet in the App
 
diff --git a/blazor/drop-down-menu/accessibility.md b/blazor/drop-down-menu/accessibility.md
index d38ae29d7d..1a85b0e531 100644
--- a/blazor/drop-down-menu/accessibility.md
+++ b/blazor/drop-down-menu/accessibility.md
@@ -39,14 +39,14 @@ The accessibility compliance for the Blazor Dropdown Menu component is outlined
 
 ## WAI-ARIA attributes
 
-The Blazor Dropdown Menu component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Dropdown Menu component:
+The Blazor Dropdown Menu component follows relevant WAI-ARIA button and menu patterns to improve interoperability with assistive technologies. The following ARIA attributes are used in the Blazor Dropdown Menu component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `role` | Indicates the Dropdown Menu component as `button`, Dropdown Menu popup as `menu`, and the dropdown popup action items as `menuitem`. |
+| `role` | Indicates the Dropdown Menu trigger as `button`, the Dropdown Menu popup as `menu`, and the dropdown popup items as `menuitem`. |
 | `aria-haspopup` | Indicates the availability of the popup element. |
-| `aria-expanded` | Indicates whether the popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. |
-| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
+| `aria-expanded` | Indicates whether the popup can be expanded or collapsed and reflects its current state. |
+| `aria-owns` | Identifies elements to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy alone cannot represent the relationship. |
 | `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
 
 ## Keyboard interaction
diff --git a/blazor/drop-down-menu/animation.md b/blazor/drop-down-menu/animation.md
index fcb3601ad3..465b6aed88 100644
--- a/blazor/drop-down-menu/animation.md
+++ b/blazor/drop-down-menu/animation.md
@@ -13,12 +13,12 @@ To change the animation of the DropDownButton, [`AnimationSettings`](https://hel
 
 | Effect | Functionality |
 | ------------ | ----------------------- |
-| None | Specifies the Dropdown popup transform with no animation effect. |
-| SlideDown | Specifies the Dropdown popup transform with slide down effect. |
-| ZoomIn | Specifies the Dropdown popup transform with zoom in effect. |
-| FadeIn | Specifies the Dropdown popup transform with fade in effect. |
+| None | Opens the dropdown menu with no animation. |
+| SlideDown | Opens the dropdown menu with a slide-down effect. |
+| ZoomIn | Opens the dropdown menu with a zoom-in effect. |
+| FadeIn | Opens the dropdown menu with a fade-in effect. |
 
-In this sample, three different DropDownButtons are rendered, each showcasing a unique animation effect for the dropdown menu:
+In this sample, three different SfDropDownButton instances are rendered, each showcasing a unique animation effect for the dropdown menu.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -58,4 +58,4 @@ In this sample, three different DropDownButtons are rendered, each showcasing a
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVTWhizMQTMfCYP?appbar=false&editor=false&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Changing Blazor DropDownMenu Animation](./images/blazor-dropdownmenu-animation.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVTWhizMQTMfCYP?appbar=false&editor=false&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Changing Blazor DropDownMenu Animation](./images/blazor-dropdownmenu-animation.gif)" %}
diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md
index 9880938a5a..f48e1b16ab 100644
--- a/blazor/drop-down-menu/getting-started-with-web-app.md
+++ b/blazor/drop-down-menu/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Dropdown Menu Component in Web App
 
-This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor DropDown Menu](https:
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the Blazor Web App
 
-To add **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor DropDown Menu** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.SplitButtons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Menu component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Menu component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Menu component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -227,7 +256,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Menu component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Menu component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %}
 
diff --git a/blazor/drop-down-menu/getting-started.md b/blazor/drop-down-menu/getting-started.md
index 7a475cedeb..2d39b44144 100644
--- a/blazor/drop-down-menu/getting-started.md
+++ b/blazor/drop-down-menu/getting-started.md
@@ -9,11 +9,11 @@ documentation: ug
 
 <!-- markdownlint-disable MD024 -->
 
-# Getting Started with Blazor Dropdown Menu Component
+# Getting started with Blazor Dropdown Menu component
 
-This section briefly explains about how to include [Blazor DropDown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This guide explains how to integrate the [Blazor Dropdown Menu](https://www.syncfusion.com/blazor-components/blazor-dropdown-menu) component into a Blazor WebAssembly app using Visual Studio or Visual Studio Code.
 
-To get start quickly with Dropdown Menu Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) sample:
+Watch the [Dropdown Menu getting started video tutorial](https://www.youtube.com/watch?v=LKszhsAVuHc) or explore the [GitHub sample project](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownMenu) to see the completed application.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=LKszhsAVuHc"%}
@@ -26,13 +26,13 @@ To get start quickly with Dropdown Menu Component using Blazor, you can check on
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor App in Visual Studio
+## Create a new Blazor app in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet packages
 
-To add **Blazor DropDown Menu** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Dropdown Menu** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, install them with the Package Manager console:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -53,11 +53,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor App in Visual Studio Code
+## Create a new Blazor app in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly app from the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>) using the following commands:
 
 {% tabs %}
 
@@ -70,11 +70,11 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet packages
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure in the project root directory that contains the `.csproj` file.
+* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies.
 
 {% tabs %}
 
@@ -88,15 +88,15 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [NuGet.org](https://www.nuget.org/packages?q=syncfusion.blazor). For the list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Next, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **~/Program.cs**.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -131,7 +131,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `<head>` section of **~/wwwroot/index.html**:
 
 ```html
 <head>
@@ -144,7 +144,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor Dropdown Menu component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Menu component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Menu component to **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -160,14 +160,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Menu co
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown Menu component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Dropdown Menu component renders in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownMenu Component](./images/blazor-dropdownmenu-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTjshOAyMLHrtb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Menu component](./images/blazor-dropdownmenu-component.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the dropdown menu.
+N> Explore the [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) to learn how to render and configure the dropdown menu.
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/add-remove-items.md b/blazor/drop-down-menu/how-to/add-remove-items.md
index aff1b2ba06..923e18207a 100644
--- a/blazor/drop-down-menu/how-to/add-remove-items.md
+++ b/blazor/drop-down-menu/how-to/add-remove-items.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Add and Remove Items in Blazor Dropdown Menu Component
 
-Dropdown Menu component can dynamically add or remove items using the [AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_) and [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_) methods.
+The Dropdown Menu component (SfDropDownButton) can dynamically add or remove menu items using the [AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_) and [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_) methods.
 
 The following example illustrates how to add and remove items in Dropdown Menu component.
 
@@ -56,6 +56,4 @@ The following example illustrates how to add and remove items in Dropdown Menu c
 
 ```
 
-
-
-![Adding Items in Blazor DropDownMenu](./../images/blazor-dropdownmenu-add-items.png)
\ No newline at end of file
+![Add and remove items in Blazor Dropdown Menu](./../images/blazor-dropdownmenu-add-items.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/change-caret-icon.md b/blazor/drop-down-menu/how-to/change-caret-icon.md
index 3aa9b12fec..54dc799002 100644
--- a/blazor/drop-down-menu/how-to/change-caret-icon.md
+++ b/blazor/drop-down-menu/how-to/change-caret-icon.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Change caret icon in Blazor Dropdown Menu Component
 
-Dropdown arrow can be customized on popup open and close. It can be handled in the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) events.
+The caret icon in the Dropdown Menu component can be customized when the popup opens and closes by handling the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) events. These callbacks trigger before the popup is displayed or hidden, providing a convenient place to toggle CSS classes that adjust the caret appearance.
 
 In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using the `OnOpen` and `OnClose` events by adding and removing `e-caret-up` class.
 
diff --git a/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md b/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md
index 97b2ad8079..2b0c36e22b 100644
--- a/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md
+++ b/blazor/drop-down-menu/how-to/create-dropdownbutton-with-rounded-corner.md
@@ -11,7 +11,7 @@ documentation: ug
 
 Dropdown Menu with rounded corner can be achieved by adding the `border-radius` CSS property to button element.
 
-In the following example, `e-round-corner` class is defined with `5px` `border-radius` property and added that class to button element using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property.
+In the following example, the `e-round-corner` class sets a `5px` `border-radius`, which is applied to the DropDownButton via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. Adjust the radius value as needed to align with your design system, and apply similar styling to `.e-dropdown-popup` if you want the menu panel to share the same rounded appearance.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -32,6 +32,4 @@ In the following example, `e-round-corner` class is defined with `5px` `border-r
 
 ```
 
-
-
 ![Blazor DropDownMenu with Rounded Corner](./../images/blazor-dropdownmenu-with-rounded-corner.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md b/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md
index 508f7b7253..73b77b6d15 100644
--- a/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md
+++ b/blazor/drop-down-menu/how-to/create-right-to-left-dropdownbutton.md
@@ -45,5 +45,4 @@ The following example illustrates how to enable right-to-left support in Dropdow
 
 ```
 
-
 ![Right to Left in Blazor DropDownMenu](./../images/blazor-dropdownmenu-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/customize-icon-and-width.md b/blazor/drop-down-menu/how-to/customize-icon-and-width.md
index 2aa9cc7a3d..1b25b8371d 100644
--- a/blazor/drop-down-menu/how-to/customize-icon-and-width.md
+++ b/blazor/drop-down-menu/how-to/customize-icon-and-width.md
@@ -40,6 +40,6 @@ The following UI can be achieved by setting [IconPosition](https://help.syncfusi
 </style>
 ```
 
-Output be like
+The following image shows the Dropdown Menu with the icon positioned above the text and the button width constrained.
 
 ![Customizing Blazor DropDownMenu Icon](./../images/blazor-dropdownmenu-icon-customization.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/customize-popup-width.md b/blazor/drop-down-menu/how-to/customize-popup-width.md
index a9b05cae09..91851503ee 100644
--- a/blazor/drop-down-menu/how-to/customize-popup-width.md
+++ b/blazor/drop-down-menu/how-to/customize-popup-width.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize popup width in Blazor Dropdown Menu Component
 
-The dropdown popup width can be customized using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupWidth) property of the DropDownButton component. By default, the popup's width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value.
+Customize the width of the Dropdown Menu popup by assigning a value to the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupWidth) property of the DropDownButton component. By default, the popup's width adjusts based on the content. However, this property allows setting a specific width, ensuring consistency and alignment with design requirements. The width can be specified using common CSS units or as a raw pixel value.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -26,5 +26,4 @@ The dropdown popup width can be customized using the [PopupWidth](https://help.s
 ```
 
 
-
 ![Changing Caret Icon in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-width.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md b/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md
index 4b915778d5..3970da7216 100644
--- a/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md
+++ b/blazor/drop-down-menu/how-to/disable-a-dropdownbutton.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Disable a Dropdown Menu in Blazor Dropdown Menu Component
 
-Dropdown Menu component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Disabled) property. To disable Dropdown Menu component, the disabled property can be set as `true`.
+The Dropdown Menu component can be disabled by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Disabled) property. To disable Dropdown Menu component, the disabled property can be set as `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -24,5 +24,4 @@ Dropdown Menu component can be enabled/disabled by giving [Disabled](https://hel
 </SfDropDownButton>
 ```
 
-
-![Blazor DropDownMenu with Disable State](./../images/blazor-dropdownmenu-in-disable-state.png)
\ No newline at end of file
+![Disabled state of Blazor DropDownMenu](./../images/blazor-dropdownmenu-in-disable-state.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md b/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md
index 938969da0b..4181d435b2 100644
--- a/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md
+++ b/blazor/drop-down-menu/how-to/dropdownlist-dropdownbutton.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Create Dropdown List in Popup of Blazor Dropdown Menu Component
 
-We have render the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component in [DropDownMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html) popup using [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property.
+Render the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component inside the [DropDownMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html) popup by using the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property. This replaces the default menu items with custom content and allows embedding interactive controls within the dropdown panel.
 
 In the following example, render [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component in popup.
 
diff --git a/blazor/drop-down-menu/how-to/group-popups-with-listview.md b/blazor/drop-down-menu/how-to/group-popups-with-listview.md
index ff6f92ceb8..487c1465cd 100644
--- a/blazor/drop-down-menu/how-to/group-popups-with-listview.md
+++ b/blazor/drop-down-menu/how-to/group-popups-with-listview.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Group dropdown listview items in Blazor Dropdown Menu Component
 
-Header in popup items is possible in Dropdown Menu by templating entire popup with ListView. Create ListView with [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ID) listview and provide it as a [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) for Dropdown Menu.
+Header sections within the Dropdown Menu popup can be created by templating the popup with the ListView component. Assign a ListView instance (identified by its [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.SfListView-1.html#Syncfusion_Blazor_Lists_SfListView_1_ID)) to the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) property of the Dropdown Menu component, and configure field mappings to group the items.
 
-In the following example, ListView element is given as [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) to Dropdown Menu and header can be achieved by [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) property.
+In the following example, the ListView is provided as PopupContent for the Dropdown Menu, and the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lists.ListViewFieldSettings-1.html#Syncfusion_Blazor_Lists_ListViewFieldSettings_1_GroupBy) property of the ListView field settings generates grouped headers based on the `Category` field. The `ShowCheckBox` option enables multi-selection within each group.
 
 ```cshtml
 
@@ -52,4 +52,4 @@ In the following example, ListView element is given as [PopupContent](https://he
 
 
 
-![Grouping Popup Items in Blazor DropDownMenu](./../images/blazor-dropdownmenu-grouping-popup-item.png)
\ No newline at end of file
+![Grouped ListView items inside the Blazor Dropdown Menu popup](./../images/blazor-dropdownmenu-grouping-popup-item.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md b/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md
index c8509e43ce..600433c55f 100644
--- a/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md
+++ b/blazor/drop-down-menu/how-to/hide-dropdown-arrow.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Hide Dropdown Arrow in Blazor Dropdown Menu Component
 
-You can hide the dropdown arrow from the Dropdown Menu by adding class `e-caret-hide` to Dropdown Menu element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property.
+Hide the default dropdown caret in the Dropdown Menu by applying the built-in `e-caret-hide` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. This approach removes the visual indicator while preserving the button’s behavior, which is useful for icon-only buttons or custom indicators. Ensure alternate visual cues or labels are provided so users recognize the control as a dropdown.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -25,6 +25,4 @@ You can hide the dropdown arrow from the Dropdown Menu by adding class `e-caret-
 
 ```
 
-
-
-![Hiding DropDown Arrow in Blazor DropDownMenu](./../images/blazor-dropdownmenu-hide-arrow.png)
\ No newline at end of file
+![Hide the caret icon in the Blazor DropDownMenu](./../images/blazor-dropdownmenu-hide-arrow.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md b/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md
index aac2eafb4b..dd5ca04490 100644
--- a/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md
+++ b/blazor/drop-down-menu/how-to/open-a-dialog-on-popup-item-click.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Open a Dialog on Popup Item Click in Blazor Dropdown Menu Component
 
-This section explains about how to open a dialog on Dropdown Menu popup item click. This can be achieved by handling dialog open in [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) event of the Dropdown Menu.
+This section explains how to open a dialog when a Dropdown Menu popup item is selected. This can be achieved by handling the [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) event of the Dropdown Menu.
 
 In the following example, Dialog will open while selecting `Other Folder...` item.
 
@@ -62,6 +62,4 @@ In the following example, Dialog will open while selecting `Other Folder...` ite
 
 ```
 
-
-
-![Displaying Dialog while Clicking in Blazor DropDownMenu Item](./../images/blazor-dropdownmenu-with-dialog.png)
\ No newline at end of file
+![Dialog opens when selecting Update in Blazor Dropdown Menu](./../images/blazor-dropdownmenu-with-dialog.png)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/how-to/position-popup.md b/blazor/drop-down-menu/how-to/position-popup.md
index 113b43e6ce..ebbe12ab97 100644
--- a/blazor/drop-down-menu/how-to/position-popup.md
+++ b/blazor/drop-down-menu/how-to/position-popup.md
@@ -7,11 +7,11 @@ control: Dropdown Menu
 documentation: ug
 ---
 
-# Position popup open in Blazor Dropdown Menu Component
+# Position the popup in Blazor Dropdown Menu component
 
 Popup open position can be changed according to the requirement.  We have set the Popup open position using `CssClass` property as `custom` in `Top` and `Left` for the popup element.
 
-In the following example, the `Top` position of the popup element.
+In the following example, the popup is moved upward and to the left using negative margins, effectively changing its top and left position relative to the default placement.
 
 ```csharp
 
@@ -37,4 +37,4 @@ In the following example, the `Top` position of the popup element.
 
 
 
-![Changing Popup Position in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-position.png)
+![Changing popup position in Blazor DropDownMenu](./../images/blazor-dropdownmenu-popup-position.png)
diff --git a/blazor/drop-down-menu/icons.md b/blazor/drop-down-menu/icons.md
index 8754299661..e05d8aeb1a 100644
--- a/blazor/drop-down-menu/icons.md
+++ b/blazor/drop-down-menu/icons.md
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Dropdown Menu icons
 
-Dropdown Menu can have an icon to provide the visual representation of the action. To place the icon on a Dropdown Menu, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Dropdown Menu. You can customize the icon's position using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconPosition) property.
+Icons help communicate each action in the Dropdown Menu more effectively. Apply an icon by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to the required CSS class (for example, `e-icons e-message`). Syncfusion’s built-in icon font is added automatically when the Syncfusion theme stylesheet is referenced. By default, the icon appears on the left side of the button (IconPosition = `Left`). Change the placement using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconPosition) property.
 
-In the following example, the Dropdown Menu with default iconPosition and iconPosition as `Top` is showcased:
+The following example renders one Dropdown Menu with the default icon position and another with the icon positioned above the content:
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -43,15 +43,13 @@ In the following example, the Dropdown Menu with default iconPosition and iconPo
 
 ```
 
+![Blazor dropdown menu with icon](./images/blazor-dropdownmenu-icon.png)
 
-
-![Blazor DropDownMenu with Icon](./images/blazor-dropdownmenu-icon.png)
-
-You can also use third party icons on the Dropdown Menu using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property.
+The [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property also supports third-party icon libraries. Ensure the corresponding icon font or stylesheet is available in the application.
 
 ### Vertical button
 
-Vertical button in Dropdown Menu can be achieved by adding `e-vertical` class using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property.
+Create a vertical layout by applying the `e-vertical` class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. This stacks the icon above the text without changing the default IconPosition.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -72,11 +70,9 @@ Vertical button in Dropdown Menu can be achieved by adding `e-vertical` class us
 
 ```
 
+![Blazor dropdown menu with vertical button](./images/blazor-dropdownmenu-in-vertical.png)
 
-
-![Changing Blazor DropDownMenu Position in Vertical](./images/blazor-dropdownmenu-in-vertical.png)
-
-## See Also
+## See also
 
 * [Dropdown popup with icons](./popup-items#icons)
 * [Customized icon size](./how-to/customize-icon-and-width)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/images/blazor-create-web-app.png b/blazor/drop-down-menu/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/drop-down-menu/images/blazor-create-web-app.png differ
diff --git a/blazor/drop-down-menu/native-event.md b/blazor/drop-down-menu/native-event.md
index f2183779fa..64fadf042f 100644
--- a/blazor/drop-down-menu/native-event.md
+++ b/blazor/drop-down-menu/native-event.md
@@ -9,22 +9,23 @@ documentation: ug
 
 # Events in Blazor Dropdown Menu Component
 
-You can define the dropdown menu event using on [DropDownButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents) in component. The value of event is treated as an event handler. The event specific data will be available in event arguments.
+Attach event handlers to the Dropdown Menu using the [DropDownButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents) component. Each event accepts a handler whose parameter (if any) provides event-specific data through event arguments.
 
 ## List of events supported
 
-We have provided the following event support to the DropDownButton component. The different event argument types for each event are,
+The DropDownButton component supports the following events and argument types:
 
-* [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) - BeforeOpenCloseMenuEventArgs
-* [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Opened) - OpenCloseMenuEventArgs
-* [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) - MenuEventArgs
-* [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) – BeforeOpenCloseMenuEventArgs
-* [OnItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnItemRender) – MenuEventArgs
-* [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Closed) – OpenCloseMenuEventArgs
+
+* [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnOpen) - BeforeOpenCloseMenuEventArgs; raised before the dropdown menu opens.
+* [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Opened) - OpenCloseMenuEventArgs; raised after the dropdown menu opens.
+* [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_ItemSelected) - MenuEventArgs; raised when a menu item is selected.
+* [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnClose) – BeforeOpenCloseMenuEventArgs; raised before the dropdown menu closes.
+* [OnItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_OnItemRender) – MenuEventArgs; raised while rendering each menu item.
+* [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownButtonEvents.html#Syncfusion_Blazor_SplitButtons_DropDownButtonEvents_Closed) – OpenCloseMenuEventArgs; raised after the dropdown menu closes.
 
 ## How to bind event to Dropdown Menu
 
-Above defined events are bind the Dropdown Menu component. Here, we have explained about the sample code snippets of Dropdown Menu.
+Bind the above events to the Dropdown Menu by specifying handlers in the DropDownButtonEvents tag. Ensure each handler matches the expected delegate signature for the corresponding event. The following example demonstrates wiring all supported events:
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/drop-down-menu/popup-items.md b/blazor/drop-down-menu/popup-items.md
index 0a9713e53c..3371500dee 100644
--- a/blazor/drop-down-menu/popup-items.md
+++ b/blazor/drop-down-menu/popup-items.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Icons
 
-The popup action item have an icon or image to provide visual representation of the action. To place the icon on a popup item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the popup action item.
+Popup action items can display an icon or image to visually represent the action. To add an icon to a popup item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the popup action item.
 
 In the following sample, the icons for edit, delete, mark as read and like message menu items are added using the `IconCss` property.
 
@@ -47,13 +47,11 @@ In the following sample, the icons for edit, delete, mark as read and like messa
 
 ```
 
-
-
-![Blazor DropDownMenu displays Icon in Popup Items](./images/blazor-dropdownmenu-with-popup-icon.png)
+![Blazor dropdown menu shows icons in popup items](./images/blazor-dropdownmenu-with-popup-icon.png)
 
 ## Separator
 
-The Separators are the horizontal lines that are used to separate the popup items. You `cannot` select the separators. You can enable separators to group the popup items using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) property.
+Separators are horizontal lines used to group and visually separate the popup items. Separators are not selectable. You can enable separators to group the popup items using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) property.
 
 In the following sample, cut, copy, and paste popup items are grouped using the separator property:
 
@@ -74,13 +72,11 @@ In the following sample, cut, copy, and paste popup items are grouped using the
 
 ```
 
-
-
-![Blazor DropDownMenu with Separator](./images/blazor-dropdownmenu-separator.png)
+![Blazor dropdown menu with separator](./images/blazor-dropdownmenu-separator.png)
 
 ## Navigations
 
-Actions in Dropdown Menu can be used to navigate to the other web page when action item is clicked. This can be achieved by providing link to the action item using [url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Url) property.
+Actions in Dropdown Menu can navigate to another web page when an action item is clicked. This can be achieved by providing a link to the action item using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Url) property.
 
 In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal action items are added using the url property:
 
@@ -106,15 +102,13 @@ In the following sample, navigation URL for Flipkart, Amazon, and Snapdeal actio
 
 ```
 
-
-
-![Blazor DropDownMenu Items with Navigation Link](./images/blazor-dropdownmenu-navigation.png)
+![Blazor dropdown menu items with navigation links](./images/blazor-dropdownmenu-navigation.png)
 
 ## Template
 
 ### Item Templating
 
-Popup items can be customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. We have customize the items using CSS style.
+Popup items can be customized using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_CssClass) property. The following example demonstrates customizing items with CSS:
 
 ```cshtml
 
@@ -138,13 +132,11 @@ Popup items can be customized using the [CssClass](https://help.syncfusion.com/c
 
 ```
 
-
-
-![Blazor DropDownMenu with Popup Items](./images/blazor-dropdownmenu-with-popup-items.png)
+![Blazor dropdown menu with customized popup items](./images/blazor-dropdownmenu-with-popup-items.png)
 
 ## Populate multilevel sub menu items
 
-You can populate multilevel sub menu items in DropDown menu by using context menu in [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) directive tag.
+Populate multilevel submenu items in the Dropdown Menu by hosting a Context Menu component within the [PopupContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_PopupContent) directive tag. This approach requires the Syncfusion.Blazor.Navigations package to use SfContextMenu.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations
@@ -228,6 +220,6 @@ You can populate multilevel sub menu items in DropDown menu by using context men
 
 ```
 
-![Blazor DropDownMenu with multilevel sub menu items](./images/blazor-dropdownmenu-submenu.png)
+![Blazor dropdown menu with multilevel sub menu items](./images/blazor-dropdownmenu-submenu.png)
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Populate-multilevel-sub-menu-items-in-Blazor-Dropdown-Menu)
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Populate-multilevel-sub-menu-items-in-Blazor-Dropdown-Menu)
\ No newline at end of file
diff --git a/blazor/drop-down-menu/style-and-appearance.md b/blazor/drop-down-menu/style-and-appearance.md
index e3ced01795..7348956cbe 100644
--- a/blazor/drop-down-menu/style-and-appearance.md
+++ b/blazor/drop-down-menu/style-and-appearance.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Styles and Appearances in Blazor Dropdown Menu Component
 
-To modify the DropDownButton appearance, you need to override the default CSS of DropDownButton component. Find the list of CSS classes and its corresponding section in DropDownButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5).
+To modify the appearance of the DropDownButton, override the component’s default CSS. The following CSS classes target the button and popup elements in different states. Custom styles can be added to the application’s stylesheet. Alternatively, create a custom theme using [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=bootstrap5).
 
-|CSS Class | Purpose of Class|
+| CSS class | Purpose |
 |-----|-----|
-|.e-dropdown-btn|To customize the dropdown button. |
-|.e-dropdown-btn:hover|To customize the dropdown button on hover. |
-|.e-dropdown-btn.e-active|To customize the dropdown button on active. |
-|.e-dropdown-popup|To customize the dropdown button pop up. |
-|.e-dropdown-popup ul .e-item:hover|To customize the dropdown button pop up items on hover. |
-|.e-dropdown-popup ul .e-item:active|To customize the dropdown button pop up items on active. |
\ No newline at end of file
+| .e-dropdown-btn | Customize the dropdown button. |
+| .e-dropdown-btn:hover | Customize the dropdown button on hover. |
+| .e-dropdown-btn.e-active | Customize the dropdown button in the active state. |
+| .e-dropdown-popup | Customize the dropdown popup. |
+| .e-dropdown-popup ul .e-item:hover | Customize popup items on hover. |
+| .e-dropdown-popup ul .e-item:active | Customize popup items in the active state. |
\ No newline at end of file
diff --git a/blazor/dropdown-list/accessibility.md b/blazor/dropdown-list/accessibility.md
index c142d50192..931cece615 100644
--- a/blazor/dropdown-list/accessibility.md
+++ b/blazor/dropdown-list/accessibility.md
@@ -3,15 +3,15 @@ layout: post
 title: Accessibility in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Accessibility in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Accessibility in DropDown List 
 
-The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component has been designed, keeping in mind the `WAI-ARIA` specifications, and applied the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component is built to align with WAI-ARIA specifications, applying appropriate roles, states, and properties alongside comprehensive keyboard support. It provides full keyboard interaction and ARIA compatibility to ensure a consistent experience for users of assistive technologies and for those who rely on keyboard navigation.
 
-The Blazor DropDownList component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor DropDownList component follows recognized accessibility standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility.
 
 The accessibility compliance for the DropDownList component is outlined below.
 
@@ -34,51 +34,52 @@ The accessibility compliance for the DropDownList component is outlined below.
 </style>
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not fully meet the requirement.</div>
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor DropDownList component uses the `Combobox` role. The following `ARIA attributes` denote the DropDownList state.
+The Blazor DropDownList component uses the combobox pattern. The following ARIA attributes convey the component’s state and relationships:
 
 | **Properties** | **Functionalities** |
 | --- | --- |
-| `aria-haspopup` | Indicates whether the DropDownList input element has a popup list or not. |
-| `aria-expanded` | Indicates whether the popup list has expanded or not. |
-| `aria-selected` | Indicates the selected option. |
-| `aria-readonly` | Indicates the readonly state of the DropDownList element. |
-| `aria-disabled` | Indicates whether the DropDownList component is in a disabled state or not. |
-| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
-| `aria-owns` | This attribute contains the ID of the popup list to indicate popup as a child element. |
+| `aria-haspopup` | Indicates that the input has an associated popup list. |
+| `aria-expanded` | Indicates whether the popup list is expanded. |
+| `aria-selected` | Indicates the selected option in the list. |
+| `aria-readonly` | Indicates the readonly state of the input. |
+| `aria-disabled` | Indicates whether the component is disabled. |
+| `aria-activedescendant` | Holds the ID of the active list item to identify the focused descendant. |
+| `aria-owns` | Contains the ID of the popup list to indicate the popup as a child element. |
+
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor DropDownList without interruptions:
+Use the following keys to operate the Blazor DropDownList by keyboard:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
 |**Focus**| | |
-|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample. |
+|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Focuses on the first component of the sample (sample-page shortcut; availability may vary). |
 |**Input Navigation**| | |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 |**Selection**| | |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item. When the popup is open, it closes after selection; otherwise, toggles the popup. |
 |**Popup Navigation**| | |
-| <kbd>Esc(Escape)</kbd> | <kbd>Esc</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Selects the first item in the DropDownList when no item is selected. Otherwise, selects the item next to the currently selected item. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Selects the item previous to the currently selected one. |
-| <kbd>Page down</kbd> | <kbd>Page down</kbd> | Scrolls down to the next page and selects the first item when the popup list opens. |
-| <kbd>Page up</kbd> | <kbd>Page up</kbd> | Scrolls up to the previous page and selects the first item when the popup list opens. |
+| <kbd>Escape</kbd> | <kbd>Esc</kbd> | Closes the popup when it is open; the current selection remains unchanged. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Selects the first item if none is selected; otherwise selects the next item. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Selects the previous item. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down one page and selects the first visible item when the popup is open. |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up one page and selects the first visible item when the popup is open. |
 | <kbd>Home</kbd> | <kbd>Home</kbd> | Selects the first item. |
 | <kbd>End</kbd> | <kbd>End</kbd> | Selects the last item. |
 
 ## Ensuring accessibility
 
-The Blazor DropDownList component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor DropDownList component’s accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
 The accessibility compliance of the DropDownList component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdownlist) in a new window to evaluate the accessibility of the DropDownList component with accessibility tools.
 
diff --git a/blazor/dropdown-list/cascading.md b/blazor/dropdown-list/cascading.md
index 36d8442dd9..00e171e8cd 100644
--- a/blazor/dropdown-list/cascading.md
+++ b/blazor/dropdown-list/cascading.md
@@ -3,21 +3,21 @@ layout: post
 title: Cascading in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Cascading in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Cascading in Dropdown List
 
-The Cascading DropDownList is the series of DropDownList where the value of one DropDownList depends on another DropDownList value. 
+Cascading refers to configuring two or more DropDownList components so that the available options in a child list depend on the selected value of its parent. This pattern is commonly used for parent–child lookups such as Country → State/Province → City.
 
-In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event handler of the first DropDownList, load the data for the second DropDownList based on the selected value of the first DropDownList. The same has to be configured between second and third DropDownLists.
+In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event handler of the first DropDownList, load the data for the second DropDownList based on the selected value of the first DropDownList. Apply the same approach between the second and third DropDownLists.
 
-To get started quickly with Cascading in the Blazor DropDown List component, you can check the video below.
+To get started quickly with cascading in the Blazor DropDown List component, you can check the video below.
 
 {% youtube "https://www.youtube.com/watch?v=N_xI_aE76C0" %}
 
-In the following sample, if a country is selected from countries DropDownList, the respective states are loaded in the second DropDownList and in the same way states and cities DropDownList works.
+In the following sample, selecting a country in the first DropDownList loads its states into the second list, and selecting a state loads its cities into the third list.
 
 {% highlight cshtml %}
 
diff --git a/blazor/dropdown-list/customization.md b/blazor/dropdown-list/customization.md
index 084714bcf2..b02f1c9ebd 100644
--- a/blazor/dropdown-list/customization.md
+++ b/blazor/dropdown-list/customization.md
@@ -3,7 +3,7 @@ layout: post
 title: Customization in Blazor DropDown List | Syncfusion
 description: Checkout and learn here all about Customization in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Open Dropdown list dropdown on focus
 
-You can automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/dropdown-list/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items.
+Automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) method on [Focus](https://blazor.syncfusion.com/documentation/dropdown-list/events#focus) event. The `ShowPopupAsync()` method opens the popup that displays the list of items.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
diff --git a/blazor/dropdown-list/data-binding.md b/blazor/dropdown-list/data-binding.md
index 5f3c5037fb..c5185845a9 100644
--- a/blazor/dropdown-list/data-binding.md
+++ b/blazor/dropdown-list/data-binding.md
@@ -3,19 +3,19 @@ layout: post
 title: Data Binding in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Data Binding in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Data Binding in Dropdown List
 
-The DropDownList loads the data either from the local data sources or remote data services. Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property,  bind the local data or using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), bind the remote data.
+The DropDown List component supports binding data from local collections and remote services. Use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property to bind local data or configure a [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for remote data operations. Map fields using the component’s FieldSettings to specify which properties supply item text and value.
 
-* **TItem** - Specifies the type of the datasource of the dropdown component.
+* **TItem** - Specifies the type of the data items bound to the component (the model of each item). Use TValue to specify the value type selected by the component. Configure Fields to map Text and Value from the data model.
 
 ## Binding local data
 
-The DropDownList loads the data from local data sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of `Array of primitive type`, `Array of object`, `List of primitive type`,`List of object`, `Observable Collection`, `ExpandoObject`, `DynamicObject`.
+The DropDown List loads data from local sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Supported types include `Array of primitive type`, `Array of object`, `List of primitive type`, `List of object`, `ObservableCollection`, `ExpandoObject`, and `DynamicObject`. Map data fields via FieldSettings when binding objects.
 
 {% highlight cshtml %}
 
@@ -27,7 +27,7 @@ The DropDownList loads the data from local data sources through the [DataSource]
 
 ### DataBound event
 
-The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_DataBound) event triggers when the data source is populated in the popup list.
+The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_DataBound) event triggers after the data source is populated and the popup list is ready. This is useful for post-load logic such as selecting a default item or updating UI state.
 
 {% highlight cshtml %}
 
@@ -37,9 +37,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown
 
 ### Primitive type
 
-Bind the data to the DropDownList as an array or list of the `string`, `int`, `double` and `bool` type items.
+Bind arrays or lists of `string`, `int`, `double`, or `bool` directly. In these cases, Text and Value map to the primitive values.
 
-The following code demonstrates array of string values to the DropDownList component.
+The following code demonstrates an array of string values bound to the DropDown List component.
 
 {% highlight cshtml %}
 
@@ -49,7 +49,7 @@ The following code demonstrates array of string values to the DropDownList compo
 
 ![Blazor DropdownList with Primitive string type](./images/data-binding/blazor_dropdown_primitive-type-string.png)
 
-The following code demonstrates array of integer values to the DropDownList component.
+The following code demonstrates an array of integer values bound to the DropDown List component.
 
 {% highlight cshtml %}
 
@@ -61,9 +61,9 @@ The following code demonstrates array of integer values to the DropDownList comp
 
 ### Complex data type
 
-The DropDownList can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+Bind arrays or lists of complex objects and map object properties to display text and value using [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html). Nested properties can be mapped as needed.
 
-In the following example, the `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and  [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) respectively.
+In the following example, `Code.ID` is mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and `Country.CountryID` is mapped to [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text).
 
 {% highlight cshtml %}
 
@@ -75,7 +75,7 @@ In the following example, the `Code.ID` column and `Country.CountryID` column fr
 
 ### Expando object binding
 
-Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the DropDownList component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the DropDown List component. Ensure the dynamic member names match the field mappings configured in FieldSettings.
 
 {% highlight cshtml %}
 
@@ -87,7 +87,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Observable collection binding
 
-Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the DropDownList component. In the following example, the `Observable Data` is bound to a collection of colors data.
+Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) to reflect add/remove updates in the DropDown List automatically. This is useful when items change over time and the UI must stay in sync.
 
 {% highlight cshtml %}
 
@@ -99,7 +99,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm
 
 ### Dynamic object binding
 
-Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the DropDownList component. In the following example, the `DynamicObject` is bound to the collection of customer data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the DropDown List component. As with ExpandoObject, ensure member names correspond to the mapped Text and Value fields.
 
 {% highlight cshtml %}
 
@@ -111,7 +111,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Enum data binding
 
-Bind the enum data to the DropDownList component. The following code helps you to get a description value from the enumeration data.
+Bind enum values to the DropDown List. The following example shows how to display a description for each enumeration value.
 
 {% highlight cshtml %}
 
@@ -123,7 +123,7 @@ Bind the enum data to the DropDownList component. The following code helps you t
 
 ### ValueTuple data binding
 
-Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the DropDownList component. The following code helps you to get a string value from the enumeration data by using `ValueTuple`
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the DropDown List component. The following example shows retrieving a string value from enumeration data using a `ValueTuple`.
 
 {% highlight cshtml %}
 
@@ -135,17 +135,15 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 ## Binding remote data 
 
-The DropDownList loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. 
+The DropDown List can load data from remote services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property in combination with [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started). Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape, filter, sort, and page data from the service.
 
-The DropDownList supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the DropDownList.
-
-* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint. 
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
+* [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint used to fetch data.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines how requests and responses are processed. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding.
+* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) provides built-in adaptors to interact with specific service endpoints.
 
 ### OnActionBegin event
 
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionBegin) event triggers before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionBegin) event triggers before a remote request is initiated. Use it to adjust the query or set a loading indicator.
 
 {% highlight cshtml %}
 
@@ -155,7 +153,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ### OnActionComplete event
 
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
+The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionComplete) event triggers after data is fetched successfully. Handle it to apply post-load logic or update UI state.
 
 {% highlight cshtml %}
 
@@ -165,7 +163,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
 
 ### OnActionFailure event
 
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnActionFailure) event triggers when a remote request fails. Use it to log errors and provide fallback messaging (for example, show NoRecordsTemplate content).
 
 {% highlight cshtml %}
 
@@ -175,7 +173,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ### OData v4 services
 
-The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
+The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) enables consumption and manipulation of OData v4 services. The following sample displays the first six customer records from the `Customers` table of the `Northwind` data service.
 
 {% highlight cshtml %}
 
@@ -187,7 +185,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 ### Web API adaptor
 
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request. 
+The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) interacts with Web API endpoints that follow OData query semantics. `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), so the endpoint must understand OData-formatted queries.
 
 {% highlight cshtml %}
 
@@ -220,9 +218,7 @@ public abstract class DataAdaptor
 }
 ```
 
-In custom Adaptor, the data binding operation can be performed in the DropDownList component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
-
-The following sample code demonstrates implementing custom data binding using custom adaptor.
+In a custom adaptor, return the data collection (and count when needed) based on the incoming `DataManagerRequest`. This approach is useful for custom back ends or complex filtering/paging scenarios.
 
 {% highlight cshtml %}
 
@@ -232,9 +228,7 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the DropDownList to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
-
-The following example is for remote data binding and enabled offline mode.
+To reduce network requests, load all data at initialization and process actions on the client by setting the `Offline` property on `DataManager`. Use this for datasets that fit in memory and do not change frequently.
 
 {% highlight cshtml %}
 
@@ -246,11 +240,11 @@ The following example is for remote data binding and enabled offline mode.
 
 ### Entity Framework
 
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the DropDownList component.
+Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the DropDown List component.
 
 #### Create DBContext class
 
-The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database.
+Create a DbContext class (`OrderContext`) to connect to Microsoft SQL Server.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -279,7 +273,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Create data access layer to perform data operation
 
-Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table.
+Create a data access class (`OrderDataAccessLayer`) to retrieve records from the database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -313,7 +307,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Creating web API controller
 
- A Web API Controller has to be created, which allows the DropDownList to directly consume data from the Entity Framework.
+Create a Web API controller to expose the data for the DropDown List to consume.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -360,7 +354,7 @@ namespace EFDropDown.Controllers
 
 ### Configure DropDownList component using Web API adaptor
 
-Now, configure the DropDownList using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
+Configure the DropDown List to interact with the Web API using [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) and the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor). Ensure the API supports OData-style query parameters.
 
 {% highlight cshtml %}
 
@@ -370,7 +364,7 @@ Now, configure the DropDownList using the [SfDataManager](https://blazor.syncfus
 
 ## Adding new items
 
-Add the new item in the popup with the help of [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) public method. This method will add a mentioned item in the DropDownList popup without affecting the data source items.
+Use [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) to add new items to the popup list without altering the underlying data source. To persist new items, also update your bound collection or remote data source.
 
 {% highlight cshtml %}
 
@@ -400,5 +394,4 @@ To obtain the data source for a Syncfusion<sup style="font-size:70%">&reg;</sup>
 
 {% include_relative code-snippet/data-binding/get-datasource-variable.razor %}
 
-{% endhighlight %}
-
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/dropdown-list/disabled-items.md b/blazor/dropdown-list/disabled-items.md
index 4b9b93c965..fed2ab13d8 100644
--- a/blazor/dropdown-list/disabled-items.md
+++ b/blazor/dropdown-list/disabled-items.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Disabled Items in Blazor DropDownList Component
 
-The [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `DropDownListFieldSettings.Disabled` property.
+The [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) supports disabling individual items for scenario-specific control. Map a boolean field in your data model to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_Disabled) property of the field settings to render items as non-interactive. Disabled items cannot be selected or focused through keyboard navigation.
 
-In the following sample, State are grouped according on its category using `Disabled` field.
+In the following sample, items are rendered as disabled based on the value of the `Disabled` field.
 
 {% highlight cshtml %}
 
@@ -23,12 +23,12 @@ In the following sample, State are grouped according on its category using `Disa
 
 ## Disable Item Method
 
-The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
+Use the disable item API to change the disabled state of an item at runtime (for example, in response to user actions or data changes). This method updates the disabled state for a single item; iterate your item set to disable multiple entries. If the currently selected item is disabled dynamically, the selection is cleared automatically. The underlying [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) should also reflect the updated disabled state to keep UI and data in sync.
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
-| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | The value of the item to disable. |
+| itemIndex | <code>number</code> | The zero-based index of the item to disable. |
 
 ## Enabled
 
diff --git a/blazor/dropdown-list/filtering.md b/blazor/dropdown-list/filtering.md
index e320a57441..4dc17253d1 100644
--- a/blazor/dropdown-list/filtering.md
+++ b/blazor/dropdown-list/filtering.md
@@ -3,17 +3,17 @@ layout: post
 title: Filtering in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Filtering in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Filtering in Dropdown List
 
-The DropDownList has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is enabled. The filter operation starts as soon as you start typing characters in the search box.  Default value of AllowFiltering is `false`.
+The DropDown List component supports built-in filtering when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is enabled. Filtering begins as the user types in the search box. The default value of AllowFiltering is `false`.
 
 ## Local data
 
-The following code demonstrates the filtering functionality with local data in the DropDownList component.
+The following example demonstrates filtering with local data in the DropDown List component.
 
 {% highlight cshtml %}
 
@@ -25,9 +25,9 @@ The following code demonstrates the filtering functionality with local data in t
 
 ## Remote data
 
-For Remote data, each key press, filter action request is made at the server end.
+For remote data, a filter request is sent to the server for each keystroke. Shape the query on the server side to return the filtered results.
 
-The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the DropDownList component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
+The following example demonstrates filtering with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
 
 {% highlight cshtml %}
 
@@ -40,7 +40,7 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http
 
 ## Debounce delay
 
-You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
+Use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_DebounceDelay) property to control the delay (in milliseconds) before filtering is applied as the user types. Debouching reduces the frequency of requests and improves responsiveness. By default, DebounceDelay is 300 ms. To disable debouching, set this property to 0.
 
 {% highlight cshtml %}
 
@@ -52,15 +52,15 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify the match behavior for search text. The available options are:
 
 FilterType     | Description
 ------------ | -------------
-  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contained with specified value.
+  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified text.
+  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with the specified text.
+  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contains the specified text.
 
-In the following example, `EndsWith` filter type has been mapped to the `FilterType` property.
+In the following example, `EndsWith` is assigned to `FilterType`.
 
 {% highlight cshtml %}
 
@@ -72,9 +72,9 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 ## Case sensitive filtering
 
-The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
+Data can be filtered with or without case sensitivity by configuring the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) query. Pass the `IgnoreCase` optional parameter (fourth argument) to the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_) to control case behavior.
 
-The following example shows how to perform case-sensitive filter.
+The following example shows a case-sensitive filter.
 
 {% highlight cshtml %}
 
@@ -84,7 +84,7 @@ The following example shows how to perform case-sensitive filter.
 
 ## Filter textbox placeholder 
 
-You can use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FilterBarPlaceholder) to accept the value to be displayed as a watermark text on the filter bar TextBox. `FilterBarPlaceholder` is applicable when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is used as true. `FilterBarPlaceholder` is depends on `AllowFiltering` property.
+Use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FilterBarPlaceholder) to display watermark text in the filter bar textbox. This property applies when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowFiltering) is set to `true`.
 
 {% highlight cshtml %}
 
@@ -96,11 +96,9 @@ You can use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfus
 
 ## Custom filtering
 
-DropDownList component filter queries can be customized using [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event. You can also filter the text in multiple columns in the data source.
+Customize filter queries using the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event. This enables scenarios such as filtering across multiple fields.
 
-In the below sample demonstration, filter the data using its `FirstName` or `LastName` field. Hence in the Filtering event, [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) is used with `or` condition for filtering both the fields. 
-
-For instance , the data source item consists of `FirstName` as `Nancy` and `LastName` as `Davalio`. But you can filter the data by typing the `N` or `D` character and it will showcase the `Nancy`(FirstName field) in the popup.
+In the following example, the data is filtered by matching text in both the `FirstName` and `LastName` fields using a predicate with an OR condition. For instance, if a record has `FirstName` as `Nancy` and `LastName` as `Davalio`, typing `N` or `D` will match and display the item in the popup.
 
 {% highlight cshtml %}
 
@@ -112,7 +110,7 @@ For instance , the data source item consists of `FirstName` as `Nancy` and `Last
 
 ## Multi column filtering 
 
-In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme files, support for multi column can be enabled by adding `e-multi-column` class in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property.
+To enable multi-column layout in the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor themes, add the `e-multi-column` class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_CssClass) property.
 
 {% highlight cshtml %}
 
@@ -122,7 +120,7 @@ In the built-in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor theme fi
 
 ![Blazor DropdownList with Multi Column filtering](./images/filtering/blazor_dropdown_multi-column.png)
 
-You can achieve multiple column(field) filtering by passing the List of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
+To filter by multiple fields, pass a list of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
 
 {% highlight cshtml %}
 
@@ -134,9 +132,9 @@ You can achieve multiple column(field) filtering by passing the List of [predica
 
 ## Minimum filter length
 
-When filtering the list items, you can set the limit for character count to raise a remote request and fetch filtered data on the DropDownList. This can be done by manual validation by using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event handler.
+When filtering with remote data, you can require a minimum number of characters before issuing a request. Validate the input length using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Filtering) event handler.
 
-In the following example, the remote request does not fetch the search data until the search key contains three characters.
+In the following example, the remote request is not made until at least three characters are entered.
 
 {% highlight cshtml %}
 
@@ -144,5 +142,4 @@ In the following example, the remote request does not fetch the search data unti
 
 {% endhighlight %}
 
-![Blazor DropdownList with Minimum filter length](./images/filtering/blazor_dropdown_minimum-filter-length.png)
-
+![Blazor DropdownList with Minimum filter length](./images/filtering/blazor_dropdown_minimum-filter-length.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/form-validation.md b/blazor/dropdown-list/form-validation.md
index b7851819e2..8d88598ff9 100644
--- a/blazor/dropdown-list/form-validation.md
+++ b/blazor/dropdown-list/form-validation.md
@@ -1,27 +1,25 @@
 ---
 layout: post
-title: Form validtion in Blazor DropDown List Component | Syncfusion
+title: Form validation in Blazor DropDown List component | Syncfusion
 description: Checkout and learn here all about Form Validation in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Form Validation in Dropdown List
 
-This demonstrates the creation of a form that includes a dropdown list, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted.
+This article explains how to use the Syncfusion Blazor DropDownList component in a validated form. It shows how to bind to a model, apply data annotations, and display validation errors so the form can be submitted only when required fields are valid.
 
 ## Dropdown List inside edit form
 
-The DropDownList component can be used inside an EditForm to create a form that includes a list for selecting an option. The `EditForm` component validates all data annotation rules using the `DataAnnotationsValidator` component.
+The `DropDownList` component can be placed inside an `EditForm` to enable data annotation–based validation through the `DataAnnotationsValidator` component. When the input is valid, the form can be submitted; if invalid, the corresponding validation message is shown until a valid value is selected.
 
-When the DropDownList input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.
-
-* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type Countries, and triggers the handleSubmit() method when the form is submitted.
-* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties.
-* The ValidationSummary component displays a summary of all validation errors on the form.
-* The ValidationMessage component displays a validation error message for the Name property of the model variable.
-* The submit button submits the form and triggers the handleSubmit() method when clicked.
+- The `EditForm` component wraps the form, sets the `Model` to an instance of the model type (for example, `Countries`), and invokes the form’s submit handler on submission.
+- The `DataAnnotationsValidator` component enables validation based on the data annotation attributes applied to the model’s properties (for example, `[Required]` on the bound field).
+- The `ValidationSummary` component displays a summary of all validation errors in the form.
+- The `ValidationMessage` component displays a validation error message for the specific bound property associated with the `DropDownList`.
+- The submit button triggers form submission and executes the configured submit handler when clicked.
 
 {% highlight cshtml %}
 
@@ -29,4 +27,4 @@ When the DropDownList input is valid, the form is ready to be submitted. If the
 
 {% endhighlight %}
 
-![Blazor DropdownList inside editform](./images/form-validation/blazor_dropodown_with-editform.png)
\ No newline at end of file
+![Blazor DropDownList inside EditForm with validation](./images/form-validation/blazor_dropodown_with-editform.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/getting-started-with-maui-app.md b/blazor/dropdown-list/getting-started-with-maui-app.md
index f566c35be9..a71de3c549 100644
--- a/blazor/dropdown-list/getting-started-with-maui-app.md
+++ b/blazor/dropdown-list/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DropDownList Component
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section guides through integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component into a .NET MAUI Blazor application using both Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -17,15 +17,19 @@ This section explains you through the step-by-step process of integrating the Sy
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Install the Mobile development with .NET workload for Visual Studio to use .NET MAUI project templates. For details, refer to the .NET MAUI installation guide and the Syncfusion Blazor extension documentation:
+- https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin
+- https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the app
 
-To add **Blazor DropDownList**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the Blazor DropDownList component, open the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes:
+- https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns
+- https://www.nuget.org/packages/Syncfusion.Blazor.Themes
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +40,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the NuGet packages list for available components and details:
+- https://www.nuget.org/packages?q=syncfusion.blazor
+- https://blazor.syncfusion.com/documentation/nuget-packages
 
 {% endtabcontent %}
 
@@ -44,11 +50,13 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Ensure the .NET SDK is installed and the .NET MAUI workloads are added via the .NET CLI. For setup guidance, refer to:
+- https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code
+- https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Blazor DropDowns and Themes NuGet in the App
 
@@ -66,7 +74,9 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the NuGet packages list for available components and details:
+- https://www.nuget.org/packages?q=syncfusion.blazor
+- https://blazor.syncfusion.com/documentation/nuget-packages
 
 {% endtabcontent %}
 
@@ -74,7 +84,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -141,7 +151,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor DropDown List component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the ~/Pages/Index.razor file.
 
 {% tabs %}
 {% highlight razor %}
@@ -153,7 +163,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List co
 
 ### How to Run the Sample on Windows
 
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+Run the sample in Windows Machine mode to launch the .NET MAUI Blazor app on Windows.
 
 ![Blazor DropDownList Component](./images/blazor-dropdownlist-maui-app.png)
 
diff --git a/blazor/dropdown-list/getting-started-with-server-app.md b/blazor/dropdown-list/getting-started-with-server-app.md
index c3cafbf33d..f8e8145983 100644
--- a/blazor/dropdown-list/getting-started-with-server-app.md
+++ b/blazor/dropdown-list/getting-started-with-server-app.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Started with Blazor DropDownList Component | Syncfusion
+title: Getting started with Blazor DropDownList Component | Syncfusion
 description: Checkout and learn about getting started with Blazor DropDownList component in Blazor Server Application.
 platform: Blazor
 control: DropDownList
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor DropDown List Component
 
-This section briefly explains about how to include [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
+This section explains how to include the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in a Blazor Server app using Visual Studio, Visual Studio Code, and the .NET CLI.
 
-To get start quickly with Blazor DropDownList, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList) sample:
+To get started quickly with the Blazor DropDownList, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList):
 
 {% tabcontents %}
 
@@ -23,11 +23,11 @@ To get start quickly with Blazor DropDownList, you can check on this [GitHub](ht
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+Create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor DropDownList** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following package manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -50,9 +50,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a server application using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -68,8 +68,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal path is the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -103,7 +103,7 @@ dotnet --version
 
 ## Create a Blazor Server App using .NET CLI
 
-Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the `dotnet new` command to create a new Blazor Server app in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor Server app and places it in a directory named `BlazorApp` under the current location. For more details, see the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-Here's an example of how to add **Blazor DropDownList** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+Use the following commands to add the Blazor DropDownList component to the application by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -130,7 +130,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -138,7 +138,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 ```cshtml
 
@@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App. 
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor Server app. Ensure the Syncfusion license is registered in application startup before using any Syncfusion components.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %}
@@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below:
+The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the theme stylesheet in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** layout as shown below.
 
 ```html
 <head>
@@ -190,13 +190,13 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 </body>
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available theme reference methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Blazor DropDown List component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the **~/Components/Pages/Home.razor** file. If an interactivity location is set to `per page/component`, define a render mode at the top of the `Home.razor` page.
 
-N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
+N> If the Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
 
 ```
 @* desired render mode define here *@
@@ -211,7 +211,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component will render in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %}
 
@@ -253,7 +253,7 @@ After initialization, populate the DropDownList with data using the [DataSource]
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the popup list width adjusts to match the DropDownList input width, and the popup list height is `350px`. Customize the popup height and width using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}
@@ -289,8 +289,7 @@ By default, the width of the popup list automatically adjusts according to the D
 
 ## Get selected value
 
-Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
-
+Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
 {% highlight cshtml %}
 
@@ -298,8 +297,7 @@ Get the selected value of the DropDownList component in the [ValueChange](https:
 
 {% endhighlight %}
 
-Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
-
+Get the complete object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
 {% highlight cshtml %}
 
@@ -307,7 +305,7 @@ Get the complete object list of the selected value in the [ValueChange](https://
 
 {% endhighlight %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList).
+N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList).
 
 ## See also
 
diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md
index d49045c12d..799ca432f3 100644
--- a/blazor/dropdown-list/getting-started-with-web-app.md
+++ b/blazor/dropdown-list/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor DropDown List Component in Web App
 
-This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
+This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor DropDown List](https:
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
 
 ![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the Blazor Web App
 
-To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -56,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -74,7 +74,7 @@ cd BlazorWebApp.Client
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,7 +92,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -100,7 +100,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -128,13 +128,13 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
 Here's an example of how to add **Blazor DropDown List** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -146,7 +146,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in the default web browser.
 
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %}
@@ -296,7 +296,7 @@ After initialization, populate the DropDownList with data using the [DataSource]
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the popup list width adjusts to the DropDownList input width, and the popup list height is `350px`. Customize the height and width using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/dropdown-list/getting-started.md b/blazor/dropdown-list/getting-started.md
index 24d590e52e..77262107b7 100644
--- a/blazor/dropdown-list/getting-started.md
+++ b/blazor/dropdown-list/getting-started.md
@@ -3,7 +3,7 @@ layout: post
 title: Getting Started with Blazor DropDown List Component | Syncfusion
 description: Checkout and learn about getting started with Blazor DropDown List component in Blazor WebAssembly Application.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
@@ -11,11 +11,11 @@ documentation: ug
 
 ## Overview
 
-The [Blazor Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) is a dynamic replacement of HTML select tags. It has a rich appearance and allows you to select a single value that is non-editable from a list of predefined values. It has several out-of-the-box features such as data binding, filtering, grouping, UI customization, accessibility, and preselected values.
+The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) is a dynamic replacement for the HTML select element. It presents a rich UI to select a single, non-editable value from a predefined list. Features include data binding, filtering, grouping, UI customization, accessibility, and preselected values.
 
-This section briefly explains about how to include [Blazor DropDown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI.
+This guide explains how to add the [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component to a Blazor WebAssembly app using Visual Studio, Visual Studio Code, and the .NET CLI. Ensure a valid Syncfusion license is registered in the application and choose a theme (Bootstrap, Fluent, Material, or Tailwind) as part of setup.
 
-To get start quickly with Blazor DropDownList component, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList) sample.
+To get started quickly with the Blazor DropDownList component, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList).
 
 {% tabcontents %}
 
@@ -27,11 +27,11 @@ To get start quickly with Blazor DropDownList component, you can check on this [
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor DropDown List** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor DropDownList component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -54,9 +54,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -72,8 +72,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal path is the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -87,7 +87,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -95,7 +95,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -107,7 +107,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or command shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -118,11 +118,11 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor WebAssembly app and places it in a directory named `BlazorApp` under the current location. See the [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-Here's an example of how to add **Blazor DropDowns** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+Use the following commands to add the Blazor DropDownList component by installing [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). For more information, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -134,7 +134,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) page for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -142,7 +142,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -155,7 +155,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app. Ensure a valid Syncfusion license key is registered at application startup before using components.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -179,7 +179,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
 
 ```html
 <head>
@@ -191,7 +191,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <!-- <script src="_content/Syncfusion.Blazor.DropDowns/scripts/sf-dropdownlist.min.js" type="text/javascript"></script> -->
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for theme reference methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Blazor DropDown List component
 
@@ -205,7 +205,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List co
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDown List component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component renders in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %}
 
@@ -247,7 +247,7 @@ After initialization, populate the DropDownList with data using the [DataSource]
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the DropDownList input element's width, and the height of the popup list has `350px`. The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+By default, the popup list width automatically adjusts to the DropDownList input width, and the popup list height is `350px`. Customize the height and width using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties.
 
 {% tabs %}
 {% highlight razor %}
@@ -283,7 +283,7 @@ By default, the width of the popup list automatically adjusts according to the D
 
 ## Get selected value
 
-Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
+Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
 
 {% highlight cshtml %}
@@ -292,7 +292,7 @@ Get the selected value of the DropDownList component in the [ValueChange](https:
 
 {% endhighlight %}
 
-Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
+Get the complete data object for the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property.
 
 
 {% highlight cshtml %}
@@ -303,6 +303,6 @@ Get the complete object list of the selected value in the [ValueChange](https://
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side using the .NET CLI](../getting-started/blazor-webassembly-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side using the .NET CLI](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/dropdown-list/grouping.md b/blazor/dropdown-list/grouping.md
index 85c0b8ad11..5c56e30221 100644
--- a/blazor/dropdown-list/grouping.md
+++ b/blazor/dropdown-list/grouping.md
@@ -3,13 +3,13 @@ layout: post
 title: Grouping in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Grouping in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Grouping in Dropdown List
 
-The DropDownList supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field in the data table. The group header is displayed both as inline and fixed headers. The fixed group header content is updated dynamically on scrolling the popup list with its category value.
+The DropDownList supports grouping items by category using a field from the data source. Assign the category field through the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) property. Group headers are shown both inline and as fixed (floating) headers. While scrolling the popup list, the fixed group header updates dynamically to reflect the current group.
 
 To get started quickly with grouping in the Blazor DropDown List component, you can check the video below.
 
@@ -23,18 +23,18 @@ In the following sample, vegetables are grouped according to their category usin
 
 {% endhighlight %}
 
-![Grouping in Blazor DropdownList](./images/grouping/blazor-dropdownlist-grouping.png)
+![Grouping in Blazor DropDownList](./images/grouping/blazor-dropdownlist-grouping.png)
 
 ## Fixed group header
 
-Classify the items based on the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field mapped to the control. The headers of group items will be fixed at the top till their belonging items ends up on scrolling.
+Classify items based on the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field mapped to the control. The headers of grouped items remain fixed at the top while their corresponding items are in view and update as the list is scrolled.
 
 ## Group header template
 
-The group header title under which appropriate sub-items are categorized is customize with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
+Customize the group header title under which sub-items are categorized by using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is applied to both inline group headers and the floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate).
 
 ## Limitations of grouping
 
-Grouping feature has some limitations. These are:
+Grouping has the following limitation:
 
-* The component will support only single level of grouping, and you cannot specify it as like TreeView component.
\ No newline at end of file
+* The component supports only a single level of grouping; hierarchical grouping like the TreeView component is not supported.
\ No newline at end of file
diff --git a/blazor/dropdown-list/localization.md b/blazor/dropdown-list/localization.md
index f452e1f00c..eda398aa62 100644
--- a/blazor/dropdown-list/localization.md
+++ b/blazor/dropdown-list/localization.md
@@ -1,9 +1,9 @@
 ---
 layout: post
-title: Localization in Blazor DropDown List Component | Syncfusion
+title: Localization in Blazor DropDownList Component | Syncfusion
 description: Checkout and learn here all about Localization in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Localization
 
-The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component can be localized. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor DropDownList](https://www.syncfusion.com/blazor-components/blazor-dropdown-list) component supports localization of UI text and messages. Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation for configuring culture, resource files, and translations across Syncfusion components.
 
 ## Globalization
 
@@ -27,4 +27,4 @@ Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 {% endhighlight %}
 
-![Blazor DropDownList with EnableRtl](./images/localization/blazor_dropdown_enableRtl.png)
+![Blazor DropDownList rendered in RTL mode](./images/localization/blazor_dropdown_enableRtl.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/multicolumn.md b/blazor/dropdown-list/multicolumn.md
index 6c25105a16..f02bd539a0 100644
--- a/blazor/dropdown-list/multicolumn.md
+++ b/blazor/dropdown-list/multicolumn.md
@@ -1,24 +1,24 @@
 ---
 layout: post
-title: Multicolumn in Blazor DropDown List Component | Syncfusion
+title: Multicolumn in Blazor DropDownList Component | Syncfusion
 description: Checkout and learn here all about Multicolumn in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Multicolumn in Dropdown List 
 
-Provide two or more columns in the popup by using the class name `e-multi-column` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property  and the column will be aligned like grid.
+Render two or more columns in the popup by applying the `e-multi-column` CSS class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property, and structure the content using templates so items align in a grid-like layout.
 
-* [ItemTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#item-template) – Using `ItemTemplate`, add the columns in the popup.
-* [ValueTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template) – Using `ValueTemplate`, display the value of which columns to be updated.
+* [ItemTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#item-template) – Use `ItemTemplate` to define the columns and layout of each item in the popup.
+* [ValueTemplate](https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template) – Use `ValueTemplate` to customize how the selected item’s value is displayed in the input.
 
-Display the custom text alignment in each column using a built-in class like in the following code example:
+Apply built-in text alignment classes to control alignment in each column:
 
-* `e-text-center`: Displays the text in the center of the column.
-* `e-text-right`: Displays the text in the right side of the column.
-* `e-text-left`: Displays the text in the left side of the column.
+* `e-text-center`: Centers the text within the column.
+* `e-text-right`: Aligns the text to the right within the column.
+* `e-text-left`: Aligns the text to the left within the column.
 
 {% highlight cshtml %}
 
@@ -26,8 +26,8 @@ Display the custom text alignment in each column using a built-in class like in
 
 {% endhighlight %}
 
-![Blazor DropdownList with Multicolumn](./images/multicolumn/blazor_dropdown_multicolumn.png)
+![Blazor DropDownList with multi-column popup](./images/multicolumn/blazor_dropdown_multicolumn.png)
 
-## Limitation of multicolumn dropdownlist
+## Limitation of multicolumn dropdown list
 
-The component will not support column filtering and sorting, and the column will be alligned as same as grid.
+The component does not support built-in column filtering or sorting, and the columns are aligned using templates and CSS rather than a data grid feature set.
\ No newline at end of file
diff --git a/blazor/dropdown-list/placeholder-and-floatlabel.md b/blazor/dropdown-list/placeholder-and-floatlabel.md
index af6be599d9..3b0037f67b 100644
--- a/blazor/dropdown-list/placeholder-and-floatlabel.md
+++ b/blazor/dropdown-list/placeholder-and-floatlabel.md
@@ -3,15 +3,15 @@ layout: post
 title: Placeholder/FloatLabel in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Placeholder and FloatLabel in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
-# Placeholder and Float Label in Dropdown List
+# Placeholder and Float Label in DropDownList
 
 ## Placeholder
 
-Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Placeholder) property to show a short hint describing the expected value. In the following example, “Select a game” is set as the placeholder and displayed in the input when no value is selected.
 
 {% highlight cshtml %}
 
@@ -19,11 +19,11 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 {% endhighlight %}
 
-![Blazor DropdownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.png)
+![Blazor DropDownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.png)
 
 ## Color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-input::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the placeholder color by targeting the placeholder selector (for example, `input.e-input::placeholder`) and applying the desired `color` value.
 
 {% highlight cshtml %}
 
@@ -31,11 +31,11 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 {% endhighlight %}
 
-![Blazor DropdownList with color placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.png)
+![Blazor DropDownList with colored placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.png)
 
 ## Add mandatory indicator using placeholder
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+Add a visual required indicator (such as `*`) to the floating label by targeting `.e-float-text::after` and setting the `content` style. This is a visual cue only; pair it with form validation to enforce required input.
 
 {% highlight cshtml %}
 
@@ -43,21 +43,21 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
 
 {% endhighlight %}
 
-![Blazor DropdownList with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.png)
+![Blazor DropDownList with mandatory indicator in placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.png)
 
 ## FloatLabel
 
-Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to specify the floating label behavior of the DropDownList that the `Placeholder` text floats above the TextBox based on the following values. `FloatLabelType` is applicable only when `Placeholder` is used. `FloatLabelType` is depends on `Placeholder`. Default value of `FloatLabelType` is `Never`.
+Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FloatLabelType) property to control floating label behavior, where the `Placeholder` text moves above the input. `FloatLabelType` works only when a `Placeholder` is set. The default value is `Never`.
 
-The floating label supports the types of actions as follow.
+The floating label supports the following behaviors:
 
 Type     | Description
 ------------ | -------------
-  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The floating label will float above the input after focusing, or entering a value in the input.
-  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The floating label will always float above the input.
-  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | By default, never float the label in the input when the placeholder is available.
+  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | Floats the label after focus or when a value is selected.
+  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | Always displays the label above the input.
+  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | Never floats the label when the placeholder is available.
 
-The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
+The `FloatLabelType` set to `Auto` is demonstrated in the following example.
 
 {% highlight cshtml %}
 
@@ -65,11 +65,11 @@ The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
 
 {% endhighlight %}
 
-![Blazor DropdownList with float label](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel.gif)
+![Blazor DropDownList with floating label](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel.gif)
 
 ## Customizing the float label element’s focusing color
 
-You can change the text color of the floating label when it is focused by targeting its CSS classes `.e-input-focus` and `.e-float-text.e-label-top`. These classes indicate the floating label text while it is focused state and set the desired color using the `color` property.
+Customize the floating label color on focus by targeting `.e-input-focus .e-float-text.e-label-top` and setting the `color` property.
 
 {% highlight cshtml %}
 
@@ -77,7 +77,4 @@ You can change the text color of the floating label when it is focused by target
 
 {% endhighlight %}
 
-![Blazor DropdownList with float label focusing color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.png)
-
-
-
+![Blazor DropDownList with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/popup-setting.md b/blazor/dropdown-list/popup-setting.md
index 9987f340fb..c173dffde3 100644
--- a/blazor/dropdown-list/popup-setting.md
+++ b/blazor/dropdown-list/popup-setting.md
@@ -1,9 +1,9 @@
 ---
 layout: post
-title: Popup Setting in Blazor DropDown List Component | Syncfusion
+title: Popup Setting in Blazor DropDownList Component | Syncfusion
 description: Checkout and learn here all about Popup Setting in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Popup resize
 
-You can dynamically adjust the size of the popup in the Dropdown List component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
+Dynamically resize the popup in the DropDownList component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_AllowResize) property. When enabled, users can drag to resize the popup for better visibility and control. The resized dimensions are retained across sessions for a consistent user experience.
 
 {% highlight Razor %}
 
@@ -19,13 +19,13 @@ You can dynamically adjust the size of the popup in the Dropdown List component
 
 {% endhighlight %} 
 
-![Blazor Dropdown List with AllowResize property](./images/popup-setting/blazor_dropdownlist_resize.gif)
+![Blazor DropDownList with resizable popup](./images/popup-setting/blazor_dropdownlist_resize.gif)
 
 ## Change the popup width
 
-Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the DropdownList component.
+Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. The default value is `100%`. If the popup width is not specified, it adapts to the width of the DropDownList component.
 
-In the following sample, the `PopupWidth` is set as `300px`.
+In the following sample, `PopupWidth` is set to `300px`.
 
 {% highlight cshtml %}
 
@@ -33,13 +33,13 @@ In the following sample, the `PopupWidth` is set as `300px`.
 
 {% endhighlight %}
 
-![Blazor DropdownList with customizing popup width](./images/popup-setting/blazor_dropdown_popup-width.png)
+![Blazor DropDownList with customized popup width](./images/popup-setting/blazor_dropdown_popup-width.png)
 
 ## Handling TextOverflow 
 
-When the width of the popup is less than text's width, then the `text-overflow:ellipsis` style will be added automatically.
+When the popup width is smaller than the item text, the `text-overflow: ellipsis` style is applied automatically to truncate long text with an ellipsis.
 
-In the following sample, the `PopupWidth` is set as `100px` then the `text-overflow:ellipsis` is automatically applied
+In the following sample, `PopupWidth` is set to `100px`, so ellipsis is automatically applied.
 
 {% highlight cshtml %}
 
@@ -47,11 +47,11 @@ In the following sample, the `PopupWidth` is set as `100px` then the `text-overf
 
 {% endhighlight %}
 
-![TextOverflow in Blazor DropdownList](./images/popup-setting/blazor_dropdown_text-overflow.png)
+![Text overflow handling in Blazor DropDownList](./images/popup-setting/blazor_dropdown_text-overflow.png)
 
 ## Change the popup height
 
-Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight). The default value of the `PopupHeight` is `300px`.
+Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property. The default value of `PopupHeight` is `300px`.
 
 {% highlight Razor %}
 
@@ -59,17 +59,15 @@ Customize the height of the popup using the [PopupHeight](https://help.syncfusio
 
 {% endhighlight %}
 
-![Blazor DropdownList with customizing popup height](./images/popup-setting/blazor_dropdown_popup-height.png)
+![Blazor DropDownList with customized popup height](./images/popup-setting/blazor_dropdown_popup-height.png)
 
 ## Change the popup z-index
 
-Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component popup element.
-
-Defaults to `1000`
+Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component’s popup element to control its stacking order relative to other UI elements. The default value is `1000`.
 
 ## Show popup on initial loading
 
-You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Created) Event.
+Show the popup on initial render by invoking [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Created) event.
 
 {% highlight Razor %}
 
@@ -77,11 +75,11 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 {% endhighlight %}
 
-![Blazor DropdownList with Show popup on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.png)
+![Blazor DropDownList with popup shown on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.png)
 
 ## Preventing opening and closing
 
-Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events. 
+Prevent the popup from opening or closing by setting the event argument’s cancel property to `true` in the corresponding handlers: [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel). Use the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) events to apply this behavior.
 
 {% highlight Razor %}
 
@@ -89,13 +87,13 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs
 
 {% endhighlight %}
 
-![Blazor DropdownList with Preventing opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.png)
+![Blazor DropDownList with prevented opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.png)
 
 The following events are used to trigger when opening and closing popup.
 
 ### OnOpen event
 
-The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event triggers when the popup is about to open. If this event is canceled, the popup remains closed.
 
 {% highlight Razor %}
 
@@ -105,7 +103,7 @@ The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ### Opened event
 
-The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers when the popup opens.
+The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Opened) event triggers after the popup has opened.
 
 {% highlight Razor %}
 
@@ -115,7 +113,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ### OnClose event
 
-The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers before the popup is closed. If this event is canceled, the popup remains open.
 
 {% highlight Razor %}
 
@@ -125,7 +123,7 @@ The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.
 
 ### Closed event
 
-The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event triggers after the popup has been closed.
+The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Closed) event triggers after the popup has been closed.
 
 {% highlight Razor %}
 
@@ -135,7 +133,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.D
 
 ## Popup height based on available space
 
-You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
+Adjust the popup height based on available viewport space by handling the window’s `resize` event and updating the popup’s height dynamically.
 
 {% highlight Razor %}
 
@@ -163,7 +161,7 @@ You can achieve this by binding the `resize` event in window and update the heig
 {% endhighlight %}
 {% endtabs %}
 
-![Popup height based on available space in Blazor DropdownList](./images/popup-setting/blazor_dropdown_popup_resize.gif)
+![Popup height adjusts to available space in Blazor DropDownList](./images/popup-setting/blazor_dropdown_popup_resize.gif)
 
 ## Programmatically opening and closing popup
 
@@ -175,4 +173,4 @@ You can programmatically open and close the popup by accessing the `ShowPopupAsy
 
 {% endhighlight %} 
 
-![Show or Hide Popup in Blazor DropdownList](./images/popup-setting/blazor_dropdown_show-or-hide-popup.gif)
+![Show or hide popup programmatically in Blazor DropDownList](./images/popup-setting/blazor_dropdown_show-or-hide-popup.gif)
\ No newline at end of file
diff --git a/blazor/dropdown-list/selection.md b/blazor/dropdown-list/selection.md
index 557f6b738e..69feed9b4f 100644
--- a/blazor/dropdown-list/selection.md
+++ b/blazor/dropdown-list/selection.md
@@ -1,9 +1,9 @@
 ---
 layout: post
-title: Selection in Blazor DropDown List Component | Syncfusion
+title: Selection in Blazor DropDownList component | Syncfusion
 description: Checkout and learn here all about the Selection feature in Syncfusion Blazor DropDownList component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Get selected value
 
-Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
+Get the selected value of the `DropDownList` component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property.
 
 {% highlight cshtml %}
 
@@ -29,7 +29,7 @@ Get the complete object list of the selected value in the [ValueChange](https://
 
 ## Preselected value on OnInitializedAsync
 
-Bind the pre-selected value to the DropDownList component using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value property inside the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle. The following sample shows how to bind the value on the initial rendering of the component.
+Bind a preselected value to the `DropDownList` using the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute. Assign the value in the [`OnInitializedAsync`](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following sample binds the value during initial rendering.
 
 {% highlight cshtml %}
 
@@ -37,11 +37,11 @@ Bind the pre-selected value to the DropDownList component using the [@bind-Value
 
 {% endhighlight %}
 
-![Blazor DropDownList with pre-select value](./images/selection/blazor_dropdown_preselect-value.png)
+![Blazor DropDownList with preselected value](./images/selection/blazor_dropdown_preselect-value.png)
 
 ## Programmatically change the selected value
 
-Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component.
+Change the component value programmatically by referencing the component instance via the [`@ref`](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following sample changes the value from a button click handler.
 
 {% highlight cshtml %}
 
@@ -49,13 +49,13 @@ Change the component value programmatically or externally by the component insta
 
 {% endhighlight %}
 
-![Blazor DropDownList with pre-select value before](./images/selection/blazor_dropdown_changing-selected-value.gif)
+![Blazor DropDownList with programmatic value change](./images/selection/blazor_dropdown_changing-selected-value.gif)
 
-While changing  and selecting the value the following event get triggered.
+When the value changes through user action or programmatically, the following events are raised.
 
 ### ValueChange event
 
-The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event is triggered when the value of the DropDownList component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event occurs whenever the value is modified and provides details including the current and previous values.
 
 {% highlight cshtml %}
 
@@ -65,7 +65,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo
 
 ### OnValueSelect event
 
-The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnValueSelect) event is triggered when you select any value in the DropDownList component. Get the necessary arguments including the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). Also,  prevent the selection of items by setting the [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) property as `true` provided by the event arguments. 
+The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnValueSelect) event occurs when an item is selected in the popup. Access the selected item via [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData). To prevent selection, set [ChangeEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Cancel) to `true` in the handler.
 
 {% highlight cshtml %}
 
@@ -75,11 +75,11 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ## Preselect value with index
 
-Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. It binds the respective value present in the specified index position of the datasource.
+Bind a preselected value by index using the [`@bind-Index`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This selects the item at the specified position in the data source.
 
-N> It will be dependent on the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) type. It will bind the value to the component with the sorted data if the corresponding property is defined.
+N> Selection by index is affected by the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html). If sorting is applied, the index corresponds to the sorted data.
 
-The following sample shows how to bind the index on the initial rendering.
+The following sample binds the index during initial rendering.
 
 {% highlight cshtml %}
 
@@ -87,11 +87,11 @@ The following sample shows how to bind the index on the initial rendering.
 
 {% endhighlight %}
 
-![Blazor DropDownList with bind-index](./images/selection/blazor_dropdown_preselect-value-index.png)
+![Blazor DropDownList with index-based preselection](./images/selection/blazor_dropdown_preselect-value-index.png)
 
 ## Get selected item by value
 
-Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method.
+Retrieve the entire data object for a selected value using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_GetDataByValue__0_) method.
 
 {% highlight cshtml %}
 
@@ -101,7 +101,7 @@ Get the entire object belonging to the value selected in the component using the
 
 ## Focus the next component on selection
 
-Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) public method. It will set focus instantly to the DropDownList component when invoking it. 
+Programmatically move focus using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FocusAsync) method on a `DropDownList` instance, for example after selection, to maintain a logical tab order.
 
 {% highlight cshtml %}
 
@@ -111,7 +111,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus
 
 ## Programmatically trigger onChange event
 
-Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the [DropDownListEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html). In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event can be invoked manually using the `DropDownListEvents` instance (obtained via `@ref`). In the following example, `ValueChange` is invoked inside the `Created` event handler to demonstrate manual triggering.
 
 {% highlight cshtml %}
 
@@ -121,7 +121,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ## Programmatically focus in and focus out the component
 
-In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the dropdownlist, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the dropdownlist.
+In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the dropdown list, you can use buttons. Bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the dropdown list.
 
 {% highlight Razor %}
 
@@ -131,11 +131,11 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i
 
 ![Blazor DropDownList with dynamic focus in and out](./images/selection/blazor_dropdown_focus-in-out.gif)
 
-While focusing and focus out the following event get triggered.
+When focusing and blurring, the following events are raised.
 
 ### Focus event
 
-The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Focus) event will trigger when the component gets focused. 
+The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Focus) event triggers when the component receives focus.
 
 {% highlight cshtml %}
 
@@ -145,7 +145,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Dr
 
 ### Blur event
 
-The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Blur) event will trigger when focus moves out from the component. 
+The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Blur) event triggers when focus moves away from the component.
 
 {% highlight cshtml %}
 
@@ -155,7 +155,7 @@ The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Dro
 
 ## Get Data by value
 
-You can retrieve the selected value from the dropdown list by using the `GetDataByValue(TValue)` method through an instance of the dropdown list. You can bind the click event of a button to the `GetDataByValue(TValue)` method of the dropdown list instance. When the button is clicked, it will trigger the `GetDataByValue(TValue)` method on the dropdown list and return the selected value.
+Retrieve the selected data by invoking the `GetDataByValue(TValue)` method on the `DropDownList` instance (accessed via `@ref`). For example, bind a button click to call `GetDataByValue(TValue)` and process the returned item.
 
 {% highlight Razor %}
 
@@ -165,10 +165,10 @@ You can retrieve the selected value from the dropdown list by using the `GetData
 
 ## Get List Item
 
-You can retrieve the list items from the dropdown list by using the `GetItemsAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `GetItemsAsync()` method of the dropdown list instance. When the button is clicked, it will trigger the `GetItemsAsync()` method on the dropdown list and return the list items
+Retrieve the list items by calling the `GetItemsAsync()` method on the `DropDownList` instance. For example, bind a button click to invoke `GetItemsAsync()` and use the returned items for further processing.
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/selection/getItemsAsync-method.razor %}
 
-{% endhighlight %} 
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/dropdown-list/sorting.md b/blazor/dropdown-list/sorting.md
index f68d623078..361a3b32bb 100644
--- a/blazor/dropdown-list/sorting.md
+++ b/blazor/dropdown-list/sorting.md
@@ -1,25 +1,25 @@
 ---
 layout: post
-title: Sorting in Blazor DropDown List Component | Syncfusion
+title: Sorting in Blazor DropDownList component | Syncfusion
 description: Checkout and learn here all about Sorting in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Sorting in Dropdown List
 
-The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the DropDownList, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
+Sorting enables you to arrange items in `Ascending` or `Descending` order. To enable sorting in the `DropDownList`, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
 
-The available type of sort orders are:
+The available sort orders are:
 
 SortOrder     | Description
 ------------ | -------------
-  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorting.
-  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | The data source is sorting with ascending order.
-  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | The data source is sorting with descending order.
+  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | No sorting is applied; items appear in their original data source order.
+  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | Items are sorted in ascending order.
+  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | Items are sorted in descending order.
 
-In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup.
+In the following example, items in the data source are shuffled randomly, and the popup lists them alphanumerically in ascending or descending order based on the configured `SortOrder`.
 
 {% highlight cshtml %}
 
@@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled
 
 {% endhighlight %}
 
-![Blazor DropDownList with sortOrder descending](./images/sorting/blazor_dropdown_sorting.png)
\ No newline at end of file
+![Blazor DropDownList with descending sort order](./images/sorting/blazor_dropdown_sorting.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/style.md b/blazor/dropdown-list/style.md
index 167dbd0e8e..bcb4160918 100644
--- a/blazor/dropdown-list/style.md
+++ b/blazor/dropdown-list/style.md
@@ -3,17 +3,17 @@ layout: post
 title: Style and appearance in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Style and appearance in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Style and Appearance in Dropdown List
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following sections outline the CSS hooks and component properties that can be used to customize the DropDownList appearance.
 
 ## Read-only mode
 
-Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) whether the DropDownList allows the user to change the value or not.
+Set the boolean [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Readonly) property to make the `DropDownList` non-editable while still allowing focus and interaction that doesn’t change its value.
 
 {% highlight cshtml %}
 
@@ -21,11 +21,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
 
 {% endhighlight %}
 
-![Blazor DropDownList with Readonly mode](./images/style/blazor_dropdown_readonly-mode.png)
+![Blazor DropDownList in read-only mode](./images/style/blazor_dropdown_readonly-mode.png)
 
 ## Disabled state
 
-Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property that indicates whether the component is enabled or not.
+Set the boolean [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Enabled) property to enable or disable the component entirely.
 
 {% highlight cshtml %}
 
@@ -33,19 +33,19 @@ Specify the boolean value to the [Enabled](https://help.syncfusion.com/cr/blazor
 
 {% endhighlight %}
 
-![Blazor DropDownList with Disabled ](./images/style/blazor_dropdown_disabled-state.png)
+![Blazor DropDownList in disabled state](./images/style/blazor_dropdown_disabled-state.png)
 
 ## CssClass  
 
-Specifies the CSS class name that can be appended with the root element of the DropDownList. One or more custom CSS classes can be added to a DropDownList.
+Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to append one or more custom CSS class names to the root element and style the component.
 
-Some of the possible values are
+Some common class names:
 
-* `e-success`, which denotes the component in success state that is added green color to the dropdownlist's input field.
-* `e-warning`, which denotes the component in warning state that is added orange color to the dropdownlist's input field.
-* `e-error`, which denotes the component in error state that is added red color to the dropdownlist's input field.
-* `e-outline`, which supports only in material theme.
-* `e-multi-column`, which provides two or more columns in the popup and the column will be aligned like grid.
+* `e-success`: Applies a success visual style (for example, green accent) to the input.
+* `e-warning`: Applies a warning visual style (for example, orange accent) to the input.
+* `e-error`: Applies an error visual style (for example, red accent) to the input.
+* `e-outline`: Applies the outline style (Material theme support).
+* `e-multi-column`: Creates a multi-column popup layout using templates (columns are aligned with custom CSS). 
 
 {% highlight Razor %}
 
@@ -53,11 +53,11 @@ Some of the possible values are
 
 {% endhighlight %} 
 
-![Blazor DropDownList with CssClass property](./images/style/blazor_dropdown_cssclass-property.png)
+![Blazor DropDownList styled via CssClass](./images/style/blazor_dropdown_cssclass-property.png)
 
 ## Customizing the disabled component’s text color
 
-You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
+Target the disabled input selector (for example, `.e-input[disabled]`) and set `-webkit-text-fill-color` (and other color properties as needed) to change disabled text color.
 
 {% highlight cshtml %}
 
@@ -65,11 +65,11 @@ You can customize the text color of a disabled component by targeting its CSS cl
 
 {% endhighlight %}
 
-![Blazor DropDownList with Disabled component text color](./images/style/blazor_dropdown_disable-text-color.png)
+![Blazor DropDownList with customized disabled text color](./images/style/blazor_dropdown_disable-text-color.png)
 
 ## Show the custom icon in dropdown icon
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property.
 
 {% highlight cshtml %}
 
@@ -77,9 +77,9 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 {% endhighlight %}
 
-![Blazor DropDownList with dropdown icon](./images/style/blazor_dropdown_dropdown-icon.png)
+![Blazor DropDownList with customized dropdown icon](./images/style/blazor_dropdown_dropdown-icon.png)
 
-You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property and add style to the custom class which is mapped to `CssClass`.
+Customize the dropdown icon for a specific component by adding a custom class through [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) and scoping the icon style to that class.
 
 {% highlight cshtml %}
 
@@ -91,7 +91,7 @@ You can customize the dropdown icon for the particular component using the [CssC
 
 ## Customizing the appearance of container element
 
-You can customize the appearance of the container element within the dropdown list component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
+Customize the appearance of the container element within the dropdown list component by targeting its CSS class `.e-input`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
 
 {% highlight cshtml %}
 
@@ -99,11 +99,11 @@ You can customize the appearance of the container element within the dropdown li
 
 {% endhighlight %}
 
-![Blazor DropDownList container element customization](./images/style/blazor_dropdown_appearance-of-container.png)
+![Blazor DropDownList container appearance customized](./images/style/blazor_dropdown_appearance-of-container.png)
 
 ## Customizing the dropdown icon’s color
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the dropdown list component, and setting the desired color to the `color` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the dropdown list component, and setting the desired color to the `color` property.
 
 {% highlight cshtml %}
 
@@ -111,11 +111,11 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 {% endhighlight %}
 
-![Blazor DropDownList icon color](./images/style/blazor_dropdown_icon-color.png)
+![Blazor DropDownList with custom icon color](./images/style/blazor_dropdown_icon-color.png)
 
 ## Customizing the focus color
 
-You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
+Customize the focus indicator by targeting `.e-input-focus::after` and setting the `background` (or other) properties to match the desired focus style.
 
 {% highlight cshtml %}
 
@@ -123,11 +123,11 @@ You can customize the component color when it is focused by targeting its CSS cl
 
 {% endhighlight %}
 
-![Blazor DropDownList focus color](./images/style/blazor_dropdown_focus-color.png)
+![Blazor DropDownList with custom focus color](./images/style/blazor_dropdown_focus-color.png)
 
 ## Customizing the outline theme's focus color
 
-You can customize the color of the dropdown list component when it is in a focused state and rendered with an outline theme,  by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
+When using the outline variant, target the `e-outline` style to adjust focus color specifically for outline-themed inputs.
 
 {% highlight cshtml %}
 
@@ -135,9 +135,9 @@ You can customize the color of the dropdown list component when it is in a focus
 
 {% endhighlight %}
 
-![Blazor DropDownList focusing color outline theme](./images/style/blazor_dropdown_focusing-color-of-outline-theme.png)
+![Blazor DropDownList outline theme focus color](./images/style/blazor_dropdown_focusing-color-of-outline-theme.png)
 
-Use the `e-outline` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to achieve the outline theme
+Use `e-outline` in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to enable the outline theme.
 
 {% highlight cshtml %}
 
@@ -145,12 +145,12 @@ Use the `e-outline` to the [CssClass](https://help.syncfusion.com/cr/blazor/Sync
 
 {% endhighlight %}
 
-![Blazor DropDownList with outline theme](./images/style/blazor_dropdown_outline-theme.png)
+![Blazor DropDownList rendered with outline theme](./images/style/blazor_dropdown_outline-theme.png)
 
 
 ## Customizing the background color of focus, hover, and active items
 
-You can customize the background color and text color of list items within the dropdown list component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the background-color and color properties.
+Adjust list item background and text colors for focused, active, and hovered states by targeting `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`.
 
 {% highlight cshtml %}
 
@@ -158,11 +158,11 @@ You can customize the background color and text color of list items within the d
 
 {% endhighlight %}
 
-![Blazor DropDownList with customizing the focus, hover and active item color](./images/style/blazor_dropdown_outline-theme.png)
+![Blazor DropDownList with custom item state colors](./images/style/blazor_dropdown_outline-theme.png)
 
 ## Customizing the appearance of pop-up element
 
-You can customize the appearance of the popup element within the dropdown list component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.
+Customize popup appearance by targeting popup and list item selectors (for example, `.e-list-item.e-item-focus`) and applying styles such as background and borders.
 
 {% highlight cshtml %}
 
@@ -170,11 +170,11 @@ You can customize the appearance of the popup element within the dropdown list c
 
 {% endhighlight %}
 
-![Blazor DropDownList with customizing popup color](./images/style/blazor_dropdown_outline-theme.png)
+![Blazor DropDownList with customized popup appearance](./images/style/blazor_dropdown_outline-theme.png)
 
 ## Change the HTML attributes
 
-Add the additional html attributes such as styles, class, and more to the root element using the [HTMLAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property and accepts n number of attributes in a key-value pair format.
+Add additional attributes (for example, `style`, `class`, `title`) to the root element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HtmlAttributes) property, which accepts a key-value dictionary.
 
 {% highlight cshtml %}
 
@@ -182,11 +182,11 @@ Add the additional html attributes such as styles, class, and more to the root e
 
 {% endhighlight %}
 
-![Blazor DropDownList with different font family](./images/style/blazor_dropdown_html-attributes.png)
+![Blazor DropDownList with custom HTML attributes](./images/style/blazor_dropdown_html-attributes.png)
 
 ## Change the InputAttributes
 
-You can add the additional input attributes such as disabled, value, and more to the root element.If you configured both the property and equivalent input attribute, then the component considers the property value.
+Add the additional input attributes such as disabled, value, and more to the root element.If you configured both the property and equivalent input attribute, then the component considers the property value.
 
 {% highlight Razor %}
 
@@ -194,7 +194,7 @@ You can add the additional input attributes such as disabled, value, and more to
 
 {% endhighlight %} 
 
-![Blazor DropDownList with HtmlAttributes property](./images/style/blazor_dropdown_input-attributes-propety.png)
+![Blazor DropDownList with input attributes](./images/style/blazor_dropdown_input-attributes-propety.png)
 
 ## Set the various font family for dropdown list elements
 
@@ -208,11 +208,11 @@ In the following sample, the font family of the DropDownList, ListItem text in D
 
 {% endhighlight %}
 
-![Blazor DropDownList with different font family](./images/style/blazor_dropdown_font-family.png)
+![Blazor DropDownList with custom font family](./images/style/blazor_dropdown_font-family.png)
 
 ## Show tooltip on list item
 
-You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item.
+Achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item.
 
 The following code demonstrates how to display a tooltip when hovering over the DropDownList option.
 
@@ -222,7 +222,7 @@ The following code demonstrates how to display a tooltip when hovering over the
 
 {% endhighlight %}
 
-![Blazor DropDownList with tooltip](./images/style/blazor-dropdownlist-tooltip.png)
+![Blazor DropDownList with tooltip on items](./images/style/blazor-dropdownlist-tooltip.png)
 
 ### Tooltip using HTMLAttribute in dropdown component
 
@@ -236,11 +236,11 @@ In the following example, the `HtmlAttributes` property is used to add the title
 
 {% endhighlight %}
 
-![Blazor DropDownList with tooltip](./images/style/blazor_dropdown_default-tooltip.png)
+![Blazor DropDownList with input tooltip](./images/style/blazor_dropdown_default-tooltip.png)
 
 ## Customize selected item opacity
 
-In the following code , the CSS style that targets the `.e-list-item` class within the `.e-dropdownbase` class when it is in an active or active and hovered state. It sets the opacity property , which will make the elements appear transparent. This can be used to change the appearance of the dropdown list items when they are in a certain state.
+Adjust the opacity of selected (and selected + hovered) items by targeting `.e-dropdownbase .e-list-item.e-active` and related states to achieve a transparent or subdued look.
 
 {% highlight cshtml %}
 
@@ -248,13 +248,13 @@ In the following code , the CSS style that targets the `.e-list-item` class with
 
 {% endhighlight %}
 
-![Blazor DropDownList with opacity style](./images/style/blazor_dropdown_opacity-style.png)
+![Blazor DropDownList with custom selected item opacity](./images/style/blazor_dropdown_opacity-style.png)
 
 ## Customizing the height
 
 ### Height of DropDownList
 
-Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) property to change the height of the popup.
+Use [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) to change the popup height.
 
 {% highlight cshtml %}
 
@@ -262,11 +262,11 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 {% endhighlight %}
 
-![Blazor DropDownList with Popup height](./images/style/blazor_dropdown_height.png)
+![Blazor DropDownList with custom popup height](./images/style/blazor_dropdown_height.png)
 
 ### Width of DropDownList
 
-To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) property. By default, the popup width is set based on the component's width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the width of the component.
+To change only the popup width, use [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth). By default, the popup width matches the component width. Use [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Width) to change the component width.
 
 {% highlight cshtml %}
 
@@ -274,13 +274,11 @@ To customize the width of the popup alone, use the [PopupWidth](https://help.syn
 
 {% endhighlight %}
 
-![Blazor DropDownList with Popup Width](./images/style/blazor_dropdown_width-popup-width.png)
+![Blazor DropDownList with custom popup width](./images/style/blazor_dropdown_width-popup-width.png)
 
 ## Disable specific items in DropDownList
 
-Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific dropdown list component by adding the custom class for the popup element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property.
-
-In the following code, a single list Item is hidden using js interop.
+Prevent selection of specific items by applying custom CSS classes to the popup via [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) and marking list items as disabled (for example, adding `e-disabled` and `e-overlay` via JS interop).
 
 {% tabs %}
 {% highlight razor %}
@@ -340,8 +338,7 @@ In the following example, the `Opened` event is used to call the `AddAttribute`
 {% endhighlight %}
 {% endtabs %}
 
-
-![Adding attribute to listitem in dropdown list](./images/style/blazor_dropdown_add-attribute-listitem.png)
+![Adding attributes to list items in DropDownList](./images/style/blazor_dropdown_add-attribute-listitem.png)
 
 ## Displaying DropDownList in Tab
 
@@ -355,7 +352,7 @@ In the following example, the SfTab component is used to display a tab view with
 
 {% endhighlight %}
 
-![Blazor DropDownList with tooltip](./images/style/blazor_dropdown-in-tabview.png)
+![Blazor DropDownList displayed inside a tab view](./images/style/blazor_dropdown-in-tabview.png)
 
 ## DropDownList inside Dialog
 
@@ -369,11 +366,11 @@ In the following example, the SfDialog component is used to display a dialog pop
 
 {% endhighlight %}
 
-![Blazor DropDownList with tooltip](./images/style/blazor_dropdown_inside-dialog.gif)
+![Blazor DropDownList displayed inside a dialog](./images/style/blazor_dropdown_inside-dialog.gif)
 
 ## Programmatically show and hide spinner
 
-In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of the dropdown list, you can use buttons. The code provided binds the click event of the button to the corresponding method on the dropdown list instance. When the button is clicked, it will trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods on the dropdown list, respectively.
+Call `ShowSpinnerAsync()` and `HideSpinnerAsync()` on the DropDownList instance (for example, from button clicks) to display or hide the built-in loading spinner.
 
 {% highlight Razor %}
 
@@ -381,4 +378,4 @@ In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of
 
 {% endhighlight %} 
 
-![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.png)
+![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.png)
\ No newline at end of file
diff --git a/blazor/dropdown-list/templates.md b/blazor/dropdown-list/templates.md
index 2d0955c78b..4342c28419 100644
--- a/blazor/dropdown-list/templates.md
+++ b/blazor/dropdown-list/templates.md
@@ -3,14 +3,13 @@ layout: post
 title: Templates in Blazor DropDown List Component | Syncfusion
 description: Checkout and learn here all about Templates in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Templates in DropDown List
 
-The DropDownList has been provided with several options to customize each list item, group title, selected value, header, and footer elements.
-
+The DropDownList provides several templates to customize the appearance of individual list items, group headers, the selected value, and the popup’s header and footer.
 
 To get started quickly with Templates in the Blazor DropDown List component, you can check the video below.
 
@@ -18,9 +17,9 @@ To get started quickly with Templates in the Blazor DropDown List component, you
 
 ## Value template
 
-The currently selected value that is displayed by default on the DropDownList input element can be customized using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueTemplate) property.
+Customize the display of the currently selected value in the input using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueTemplate) property.
 
-In the following sample, the selected value is displayed as a combined text of both `FirstName` and `Designation` in the DropDownList input, which is separated by a hyphen.
+In the following sample, the selected value shows a combined text of `FirstName` and `Designation`, separated by a hyphen.
 
 {% highlight cshtml %}
 
@@ -32,9 +31,9 @@ In the following sample, the selected value is displayed as a combined text of b
 
 ## Item template
 
-The content of each list item within the DropDownList can be customized with the help of the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
+Customize the content of each list item using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
 
-In the following sample, each list item is split into two columns to display relevant data.
+In the following sample, each list item is arranged into two columns to present additional details.
 
 {% highlight cshtml %}
 
@@ -46,9 +45,9 @@ In the following sample, each list item is split into two columns to display rel
 
 ## Group template
 
-The group header title under which appropriate sub-items are categorized can also be customized with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group header template.
+Customize the group header under which items are categorized using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. The same template applies to both inline and floating group headers.
 
-In the following sample, employees are grouped according to their cities.
+In the following sample, employees are grouped by city.
 
 {% highlight cshtml %}
 
@@ -60,9 +59,9 @@ In the following sample, employees are grouped according to their cities.
 
 ## Header template
 
-The header element is shown statically at the top of the popup list items within DropDownList, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
+Display a static custom header at the top of the popup using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_HeaderTemplate) property.
 
-In the following sample, the list items and its headers are designed and displayed as two columns similar to multiple columns of the grid.
+In the following sample, the header and items are presented in two columns, similar to a grid layout.
 
 {% highlight cshtml %}
 
@@ -74,9 +73,9 @@ In the following sample, the list items and its headers are designed and display
 
 ## Footer template
 
-The DropDownList has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property.
+Show a custom element at the bottom of the popup using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_FooterTemplate) property.
 
-In the following sample, footer element displays the total number of list items present in the DropDownList.
+In the following sample, the footer displays the total number of items in the DropDownList.
 
 {% highlight cshtml %}
 
@@ -88,9 +87,9 @@ In the following sample, footer element displays the total number of list items
 
 ## No records template
 
-The DropDownList is provided with support to custom design the popup list content when no data is found and no matches found on search with the help of [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
+Provide custom content for the popup when no data is available or when a search returns no matches using the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
 
-In the following sample, popup list content displays the notification of no data available.
+In the following sample, the popup displays a “no data available” message.
 
 {% highlight cshtml %}
 
@@ -102,9 +101,9 @@ In the following sample, popup list content displays the notification of no data
 
 ## Action failure template
 
-There is also an option to custom design the popup list content when the data fetch request fails at the remote server. This can be achieved using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
+Customize the popup content shown when a remote data request fails using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
 
-In the following sample, when the data fetch request fails, the DropDownList displays the notification.
+In the following sample, the DropDownList displays a notification when data retrieval fails.
 
 {% highlight cshtml %}
 
diff --git a/blazor/dropdown-list/value-binding.md b/blazor/dropdown-list/value-binding.md
index a0735b7242..4d0b7e86f6 100644
--- a/blazor/dropdown-list/value-binding.md
+++ b/blazor/dropdown-list/value-binding.md
@@ -1,24 +1,23 @@
 ---
 layout: post
-title: Value Binding in Blazor DropDown List Component | Syncfusion
+title: Value binding in Blazor DropDownList component | Syncfusion
 description: Checkout and learn here all about Value Binding in Syncfusion Blazor DropDown List component and more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Value Binding in Dropdown List
 
-Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are.
-
-* bind-Value Binding 
-* bind-Index Binding
+Value binding synchronizes a component’s value with a parent or model. The DropDownList supports two binding approaches:
+- Value binding with `@bind-Value`.
+- Index binding with `@bind-Index`.
 
 ## Bind value binding
 
-The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value)
+Use the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute to bind the selected value. Supported types include `string`, `int`, `enum`, `bool`, and complex types. When the component value changes, all references bound via `@bind-Value` update automatically. Ensure the bound value corresponds to the field mapped to [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value).
 
-* **TValue** - Specifies the type of each list item of the dropdown component.
+- `TValue`: Specifies the type of the bound value for the DropDownList component.
 
 {% highlight cshtml %}
 
@@ -30,7 +29,7 @@ The value binding can be achieved by using the [@bind-Value](https://help.syncfu
 
 ## Index value binding
 
-The Index value binding is achieved by using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index.
+Bind by index using the [`@bind-Index`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Index) attribute. This supports `int` and nullable `int` types and selects the item at the specified position in the data source.
 
 {% highlight cshtml %}
 
@@ -42,9 +41,9 @@ The Index value binding is achieved by using the [@bind-Index](https://help.sync
 
 ## Text and value
 
-The DropdownList [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) properties point to the corresponding names of the model. The `DropDownListFieldSettings.Value` mapped to the component maintains the unique value of the item in the data source, and the `DropDownListFieldSettings.Text` is mapped to display the text in the popup list items for the respective text value.
+The [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) and [DropDownListFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) properties map to fields in the data model. The `Value` field holds the unique item value used for binding, and the `Text` field provides the display text in the popup list.
 
-The following code demonstrates the Value and Text field of the DropDownList component. For instance, the selected item is `Badminton` (Text Field, this is Game) but the value field holds `Game2` (Value Field, this is ID).
+In the following example, the selected item text is “Badminton” (Text field), while the value is “Game2” (Value field).
 
 {% highlight cshtml %}
 
@@ -56,9 +55,9 @@ The following code demonstrates the Value and Text field of the DropDownList com
 
 ## Primitive type binding
 
-The DropDownList has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropDownList 
+Bind arrays of primitive data (for example, strings or numbers) by assigning the data source and using [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value).
 
-The following code demonstrates array of string as datasource to the DropDownList component.
+The following example uses an array of strings:
 
 {% highlight cshtml %}
 
@@ -68,7 +67,7 @@ The following code demonstrates array of string as datasource to the DropDownLis
 
 ![Blazor DropDownList with Primitive Type as string](./images/value-binding/blazor_dropdown_primitive-type-string.png)
 
-The following code demonstrates array of int as datasource to the DropDownList component.
+The following example uses an array of integers:
 
 {% highlight cshtml %}
 
@@ -80,9 +79,9 @@ The following code demonstrates array of int as datasource to the DropDownList c
 
 ## Object binding
 
-Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of the DropdownList component, this is, You can map the class name to `TValue`. 
+Bind complex objects to [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) by setting `TValue` to the object type and mapping `DropDownListFieldSettings.Value` to a unique field.
 
-In the following example, the `Name` column has been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value).
+In the following example, the `Name` field is mapped to the `Value` property.
 
 {% highlight cshtml %}
 
@@ -94,7 +93,7 @@ In the following example, the `Name` column has been mapped to the [DropDownList
 
 ## Enum binding
 
-Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) attribute of DropDownList component. The following code helps you to get a string value from the enumeration data.
+Bind enum values using [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value). The component binds to the enum value; configure `Text`/`Value` mappings to control how enum items display.
 
 {% highlight cshtml %}
 
@@ -106,11 +105,11 @@ Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Sy
 
 ## Show or hide clear button
 
-Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to specify whether to show or hide the clear button. When the clear button is clicked, the `Value`, `Text`, and `Index` properties are reset to null.
+Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ShowClearButton) property to show or hide the clear button. Clicking the clear button resets `Value`, `Text`, and `Index`.
 
-N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)
+N> For non-nullable `TValue`, the clear action sets the default value of the type (for example, `0` for `int`). For nullable `TValue` (for example, `int?`), the clear action sets `null`.
 
-The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type.
+The following example uses `string` as `TValue`, so clearing sets the value to `null`.
 
 {% highlight cshtml %}
 
@@ -122,11 +121,11 @@ The following sample demonstrates the `string` used as `TValue`. So, if you clea
 
 ## Dynamically change TItem
 
-The `TItem` property can be changed dynamically by defining the datasource type of the DropDownList component with the help of the `@typeparam` directive. The following sample demonstration explains how to change  the TItem dynamically with different type of datasource.
+Change `TItem` dynamically by defining a generic DropDownList using the `@typeparam` directive and passing different data source types.
 
 ### Creating generic dropdownList component
 
-First, create a `DropDownList.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `<TItem>` and `TValue`.
+Create a reusable `DropDownList.razor` component that exposes `customData` (`List<TItem>`) and `DDLValue` (`TValue`) as parameters.
 
 {% tabs %}
 {% highlight razor %}
@@ -148,14 +147,14 @@ First, create a `DropDownList.razor` file as a parent component in the `/Pages`
     public EventCallback<TValue> DDLValueChanged { get; set; }
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ### Usage of generic component with different type
 
-Then, render the Generic DropDownList component with the required `TValue` and `TItem` in the respective razor components. 
+Use the generic component with different `TValue` and `TItem` types in pages as needed.
 
-Here, the DropDownList component is rendered with the TValue as a string type in the `/Index.razor` file and the DropDownList component with TValue as an int nullable type in the `/Counter.razor` file.
+In the example below, `TValue` is `string` in `Index.razor`, and `TValue` is `int?` in `Counter.razor`.
 
 **[Index.razor]**
 
@@ -186,7 +185,7 @@ Here, the DropDownList component is rendered with the TValue as a string type in
     };
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 **[Counter.razor]**
@@ -217,12 +216,12 @@ Here, the DropDownList component is rendered with the TValue as a string type in
     };
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ## Two way binding
 
-Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDownList component, you can use the @bind-Value directive to bind the value of the DropDownList
+Two-way binding synchronizes data between the UI and the model using the Blazor `@bind-Value` directive. Use `@bind-Value` on the DropDownList to enable two-way binding.
 
 {% highlight cshtml %}
 
@@ -230,11 +229,11 @@ Two-way is having a bi-directional data flow, i.e., passing the value from the p
 
 {% endhighlight %}
 
-![Blazor DropdownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.png)
+![Blazor DropDownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.png)
 
 ## Programmatically clearing value
 
-You can clear the value programmatically by accessing the `ClearAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `ClearAsync()` method. When the button is clicked, it will trigger the `ClearAsync()` method on the dropdown list, clearing its value.
+Clear the value programmatically by calling `ClearAsync()` on the DropDownList instance (obtained via `@ref`). For example, bind a button click to invoke `ClearAsync()`.
 
 {% highlight Razor %}
 
@@ -242,4 +241,4 @@ You can clear the value programmatically by accessing the `ClearAsync()` method
 
 {% endhighlight %} 
 
-![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_with-clearAsync-method.gif)
+![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_with-clearAsync-method.gif)
\ No newline at end of file
diff --git a/blazor/dropdown-list/virtualization.md b/blazor/dropdown-list/virtualization.md
index d236744fb5..537b7293fe 100644
--- a/blazor/dropdown-list/virtualization.md
+++ b/blazor/dropdown-list/virtualization.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Virtualization in Blazor DropDown List Component | Syncfusion
+title: Virtualization in Blazor DropDownList component | Syncfusion
 description: Checkout and learn here all about Virtualization in Syncfusion Blazor DropDown List component and much more.
 platform: Blazor
-control: DropDown List
+control: DropDownList
 documentation: ug
 ---
 
 # Virtualization in DropDown List
 
-To get started quickly with Virtualization in the Blazor DropDown List component, you can check the video below.
+To get started quickly with virtualization in the Blazor DropDownList component, watch the video below.
 
 {% youtube "https://www.youtube.com/watch?v=ysctYSeGZYE" %}
 
@@ -24,14 +24,13 @@ This feature is applicable to both local and remote data scenarios, providing fl
 
 {% endhighlight %}
 
-![Blazor DropDownList with virtualization of local data](./images/virtualization/blazor_dropdownlist_virtualization-local-data.gif)
+![Blazor DropDownList with virtualization and local data](./images/virtualization/blazor_dropdownlist_virtualization-local-data.gif)
 
+## Grouping with virtualization
 
-## Grouping with Virtualization
+The DropDownList supports grouping together with virtualization. Use [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) to categorize items by a field in the data source. After grouping is applied, virtualization behaves similarly to local data binding: group headers and items are rendered on demand as the user scrolls. When using a remote data source, an initial request may retrieve the necessary data to perform grouping; thereafter, the grouped content is virtualized during display.
 
-The DropDownList component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [DropDownListFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding on virtualization. 
-
-The following sample shows the example for Grouping with Virtualization. 
+The following sample demonstrates grouping with virtualization.
 
 {% highlight cshtml %}
 
@@ -41,13 +40,13 @@ The following sample shows the example for Grouping with Virtualization.
 
 ## Keyboard interaction
 
-Users can navigate through the scrollable content using keyboard actions. This feature loads the next or next set of items based on the key inputs in the popup.
+Users can navigate virtualized content using keyboard actions. The following keys load items or pages on demand as needed:
 
 | Key | Action |
 |-----|-----|
-| `ArrowDown` | Loads the next virtual list item if the selection is present in last item of the current page. |
-| `ArrowUp` | Loads the previous virtual list item if the selection is present in first item of the current page. |
-| `PageDown` | Loads the next page and selects the last item in it. |
-| `PageUp` | Loads the previous page and selects the first item in it. |
-| `Home` | Loads the initial set of items and selects first item in it. |
-| `End` | Loads the last set of items and selects last item in it. |
+| `ArrowDown` | Loads the next virtual item when the selection reaches the last item of the current page. |
+| `ArrowUp` | Loads the previous virtual item when the selection reaches the first item of the current page. |
+| `PageDown` | Loads the next page and selects the last item. |
+| `PageUp` | Loads the previous page and selects the first item. |
+| `Home` | Loads the initial page and selects the first item. |
+| `End` | Loads the last page and selects the last item. |
\ No newline at end of file
diff --git a/blazor/file-upload/accessibility.md b/blazor/file-upload/accessibility.md
index fa035d91e4..ab5c195812 100644
--- a/blazor/file-upload/accessibility.md
+++ b/blazor/file-upload/accessibility.md
@@ -58,4 +58,4 @@ The accessibility compliance of the File Upload component is shown in the follow
 
 ## See Also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Components](../common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Components](../common/accessibility)
diff --git a/blazor/file-upload/async.md b/blazor/file-upload/async.md
index cefcb56341..e72fd3ee08 100644
--- a/blazor/file-upload/async.md
+++ b/blazor/file-upload/async.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Asynchronous Upload in Blazor File Upload Component
 
-The uploader component allows you to upload the files asynchronously. The upload process requires save and remove action URL to manage the upload process in the server.
-*  The save action is necessary to handle the upload operation.
-*  The remove action is optional, one can handle the removed files from server.
+The Uploader component supports asynchronous file uploads. The upload workflow uses Save and Remove action URLs to communicate with server endpoints that handle file persistence and deletion.
+* The Save action is required to receive and store uploaded files on the server.
+* The Remove action is optional and is used to delete files from the server.
 
 N>The name attribute must match the name of a parameter in the POST method. For more information, refer [here](https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-8.0#match-name-attribute-value-to-parameter-name-of-post-method). The name attribute is automatically generated from the control’s ID property. If the name attribute differs from the ID property, then you can use the htmlAttributes property to set the name attribute directly to the input element. For more information refer [here](./how-to/html-attributes).
 
@@ -19,7 +19,7 @@ The file can be uploaded automatically or manually. For more information, you ca
 
 ## Multiple file upload
 
-By Default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer. You can add multiple attributes to the original input element of file by enabling the multiple file selection. The following example explains about [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file upload settings. The [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Progressing) event is triggered during the file uploading process.
+By default, the uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking clear button that is shown in footer. You can add multiple attributes to the original input element of file by enabling the multiple file selection. The following example explains about [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file upload settings. The [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Progressing) event is triggered during the file uploading process.
 
 ### With server-side API endpoint
 
@@ -42,6 +42,8 @@ By Default, the uploader component allows you to select and upload multiple file
 ```
 ### Without server-side API endpoint
 
+The following pattern processes selected files without calling server endpoints. This approach writes files directly from the application process and is suitable only for controlled or sample scenarios. In production, validate file types and sizes, generate unique file names, and write to a dedicated, secure directory.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles">
@@ -74,9 +76,9 @@ By Default, the uploader component allows you to select and upload multiple file
 
 ## Single file upload
 
-You can select and upload a single file by disabling the [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file selection property. The file list item is removed for every selection and it always maintain a single file to upload. You can remove multiple attributes from the original input element of file by enabling the single file upload property.
+Select and upload a single file by disabling the [AllowMultiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowMultiple) file selection property. The file list item is removed for every selection and it always maintain a single file to upload. You can remove multiple attributes from the original input element of file by enabling the single file upload property.
 
-The following example explains about single file upload settings.
+The following example demonstrates single file upload settings.
 
 ### With server-side API endpoint
 
@@ -93,6 +95,8 @@ The following example explains about single file upload settings.
 
 ### Without server-side API endpoint
 
+Use this approach for local processing only (e.g., demos). In production, validate inputs, limit file size, and sanitize file names and paths.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AllowMultiple=false>
@@ -144,6 +148,8 @@ By default, the uploader processes the files to upload once the files are select
 ```
 ### Without server-side API endpoint
 
+This example shows manual upload without calling backend endpoints. Ensure proper validation and storage practices when adapting for real applications.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AllowMultiple=false AutoUpload=false>
@@ -198,6 +204,8 @@ By default, the uploader component process multiple files to upload simultaneous
 
 ### Without server-side API endpoint
 
+This example uploads files sequentially without calling backend endpoints. Apply size limits, validate file types, and handle errors when adapting for production.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" SequentialUpload=true AutoUpload=false>
@@ -252,6 +260,8 @@ The uploader component allows you to pre-load the list of files that are uploade
 
 ### Without server-side API endpoint
 
+This example shows how to render preloaded files without server endpoints. In practical scenarios, ensure that preloaded entries accurately reflect files available on the server and that removal operations are handled securely.
+
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 <SfUploader ID="UploadFiles" AutoUpload=false>
@@ -288,4 +298,4 @@ The uploader component allows you to pre-load the list of files that are uploade
 
 ## See Also
 
-* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor)
+* [Upload files to Database in Blazor](https://github.com/SyncfusionExamples/how-to-upload-files-to-database-in-blazor)
\ No newline at end of file
diff --git a/blazor/file-upload/chunk-upload.md b/blazor/file-upload/chunk-upload.md
index 29e9dfcf8c..f5be4bbce6 100644
--- a/blazor/file-upload/chunk-upload.md
+++ b/blazor/file-upload/chunk-upload.md
@@ -9,17 +9,17 @@ documentation: ug
 
 # Chunk Upload in Blazor File Upload Component
 
-The Uploader sends the large file split into small chunks and transmits to the server using AJAX. You can also pause, resume, and retry the failed chunk file.
+The Uploader component supports uploading large files by splitting them into smaller chunks and sending them to the server using AJAX. Chunking improves reliability on unstable networks and enables pause, resume, and retry for failed chunks.
 
-N> The chunk upload works in asynchronous upload only.
+N> The chunk upload works only with asynchronous upload.
 
-To enable the chunk upload, set the size to [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) option of the upload and it receives the value in `bytes`. The [OnChunkUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart) event is triggered at the start of chunk upload process.
+To enable chunk upload, configure the [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) option with a value in bytes. The [OnChunkUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnChunkUploadStart) event is triggered at the beginning of the chunk upload process. Ensure the server endpoint specified in SaveUrl can accept and append chunk data and finalize the file when all chunks are received.
 
 ## Save and remove action for Blazor (ASP.NET Core hosted) application
 
-The server-side implementation entirely depends on the application requirements and logic. The following code snippet provides the server-side logic to handle the chunk upload using the FileUpload components.
+The server-side implementation depends on application requirements. The following code demonstrates handling chunk uploads using the File Upload component.
 
->The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request.
+> The `chunk-index` and `total-chunk` values are accessible through the form data using `Request.Form`, which retrieves these details from the incoming request.
 * `chunk-index` - Indicates the index of the current chunk being received.
 * `total-chunk` - Represents the total number of chunks for the file being uploaded.
 
@@ -139,12 +139,11 @@ public async Task<IActionResult> Remove(string UploadFiles)
 }
 ```
 
-
 ![Blazor FileUpload with Chunk Upload](./images/blazor-fileupload-with-chunk-upload.png)
 
-The chunk upload functionality separates the selected files into blobs of the data or chunks. These chunks are transmitted to the server using an AJAX request. The chunks are sent in **sequential** order, and the next chunk can be sent to the server according to the success of the previous chunk. If any one of the chunks failed, then the remaining chunk cannot be sent to the server. The [ChunkSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkSuccess) or [ChunkFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkFailure) event will be triggered when the chunk is sent to the server successfully or failed. If all the chunks are sent to the server successfully, the uploader [Success](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success) event is triggered.
+Chunk upload splits selected files into data blobs (chunks) and sends them via AJAX requests. Chunks are sent in sequential order, and the next chunk is sent only after the previous one succeeds. If any chunk fails, remaining chunks are not sent. The [ChunkSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkSuccess) or [ChunkFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_ChunkFailure) event is triggered after each chunk transfer. When all chunks are successfully uploaded and combined on the server, the uploader [Success](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success) event is triggered. For production scenarios, validate file size and type on the server, generate unique file names, write to a dedicated uploads directory, and sanitize user inputs.
 
-N> Chunk upload will work when the selected file size is greater than the specified chunk size. otherwise, it upload the files normally.
+N> Chunk upload works when the selected file size is greater than the specified chunk size; otherwise, files are uploaded using the default behavior.
 
 ## Save action configuration in server-side blazor
 
@@ -189,16 +188,13 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 
 ## Additional configurations
 
-To modify the chunk upload, the following options can be used.
-
-* **RetryAfterDelay**: If error occurs while sending any chunk request from JavaScript, hold the operation for 500 milliseconds (by default), and retry the operation using chunk. This can be achieved by using the [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) property. You can modify the holding time interval in milliseconds.
+To modify chunk upload behavior, the following options can be used.
 
-* **RetryCount**: Specifies the number of retry actions performed when the file fails to upload. By default, retry action is performed 3 times. If the file fails to upload continuously, the request is
-aborted and the uploader [Failure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Failure) event will trigger.
+* **RetryAfterDelay**: If an error occurs while sending any chunk request from JavaScript, the operation is held for 500 milliseconds (by default) and then retried. This can be configured through the [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AsyncSettings) property by specifying the interval in milliseconds.
 
-The following sample specifies the chunk upload delay with 3000 milliseconds and the retry count is 5. The failure event is triggered as the wrong saveUrl is used.
+* **RetryCount**: Specifies the number of retry attempts when a file fails to upload. By default, the retry action is performed 3 times. If the file continues to fail, the request is aborted and the uploader [Failure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Failure) event triggers.
 
-`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
+The following sample sets the chunk upload delay to 3000 milliseconds and the retry count to 5. The failure event triggers because an incorrect saveUrl is used.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -211,11 +207,9 @@ The following sample specifies the chunk upload delay with 3000 milliseconds and
 
 ## Resumable upload
 
-Allows you to resume an upload operation after a network failure or manually interrupts (pause) the upload. You can perform pause and resume upload actions using public methods (pause and resume) and UI interaction. The pause icon is enabled after the upload begins. The [Paused](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused) event is triggered when we pause the uploading file, and the [OnResume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume) event is triggered when we click the resume icon to upload the remaining file.
-
-N> The pause and resume features are available only when the chunk upload is enabled.
+Chunk upload allows resuming an interrupted upload after a network failure or a manual pause. Pause and resume can be performed using public methods (`pause` and `resume`) as well as UI interactions. The pause icon becomes available after the upload begins. The [Paused](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Paused) event is triggered when pausing an upload, and the [OnResume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnResume) event is triggered when resuming to upload the remaining file. Ensure the server appends chunks consistently so that resume continues from the last successful chunk.
 
-`SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload/#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
+N> The pause and resume features are available only when chunk upload is enabled.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -237,16 +231,15 @@ N> The pause and resume features are available only when the chunk upload is ena
 }
 ```
 
-
 ![Resuming File Uploads in Blazor FileUpload](./images/blazor-fileupload-resume-file-upload.png)
 
 ## Cancel upload
 
-The uploader component allows you to cancel the uploading file. This can be achieved by clicking the cancel icon or using the `Cancel` method. The [Canceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Canceling) event will be fired whenever the file upload request is canceled. While canceling the upload request, the partially uploaded file is removed from the server.
+The uploader component allows canceling an uploading file. This can be done by selecting the cancel icon or by using the `Cancel` method. The [Canceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_Canceling) event fires whenever the upload request is canceled. When canceling, any partially uploaded file data is removed from the server according to the server implementation.
 
-When the request fails, the pause icon is changed to retry icon. By clicking the retry icon, sends the failed chunk request again to the server and upload started from where it is failed. You can retry the canceled upload request again using retry UI or `Retry` methods. But, if you retry this, the file upload action again starts from initial.
+When a request fails, the pause icon changes to a retry icon. Selecting the retry icon resends the failed chunk request and continues from the failure point. The canceled upload request can also be retried using the retry UI or `Retry` methods; in that case, the upload starts from the beginning.
 
-The following example explains about chunk upload with cancel support.
+The following example demonstrates chunk upload with cancel support.
 
 `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
 
@@ -259,9 +252,8 @@ The following example explains about chunk upload with cancel support.
 </SfUploader>
 ```
 
-
 ![Canceling File Uploads in Blazor FileUpload](./images/blazor-fileupload-cancel-file-upload.png)
 
-N> The retry action has different working behavior for chunk upload and default upload.
-<br/> * Chunk upload: Retries to upload the failed request where it is failed previously.
-<br/> * Default upload: Retries to upload the failed file again from initial.
\ No newline at end of file
+N> The retry action has different behavior for chunk upload and default upload.
+<br/> * Chunk upload: Retries the failed request from the point of failure.
+<br/> * Default upload: Retries the failed file from the beginning.
\ No newline at end of file
diff --git a/blazor/file-upload/file-source.md b/blazor/file-upload/file-source.md
index 7eda3cace4..807403571f 100644
--- a/blazor/file-upload/file-source.md
+++ b/blazor/file-upload/file-source.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Directory upload
 
-The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component allows you to upload all files in the folders to server by using the [DirectoryUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DirectoryUpload) property. When this property is enabled, the uploader component processes the files by iterating through the files and sub-directories in a directory. It allows you to select only folders instead of files to upload.
+The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component can upload all files within a selected folder (including subfolders) to the server by enabling the [DirectoryUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DirectoryUpload) property. When enabled, the Uploader iterates through files and subdirectories in the chosen folder and queues them for upload. The folder picker is shown instead of a file picker, allowing selection of folders only.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -23,7 +23,7 @@ The [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-fil
 
 ### Save action configuration in server-side blazor
 
-The uploader save action configuration in server-side blazor application, using MVC via `UseMvcWithDefaultRoute` in ASP.NET Core 3.0 and `services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)` on IServiceCollection requires an explicit opt-in inside **Startup.cs** page. This is required because MVC must know whether it can rely on the authorization and CORS Middle ware during initialization.
+The uploader save action configuration in a server-side Blazor application using MVC via `UseMvcWithDefaultRoute` in ASP.NET Core 3.0 and `services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)` on IServiceCollection requires an explicit opt-in inside the **Startup.cs** file. This is necessary so MVC can determine whether to rely on authorization and CORS middleware during initialization.
 
 ```csharp
 using Microsoft.AspNetCore.Mvc;
@@ -64,6 +64,8 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 
 ### Server-side configuration for save the files of folders
 
+The following example demonstrates receiving uploaded files from selected folders and creating corresponding directories before saving files. In production, validate and sanitize path segments to prevent path traversal, and write to a dedicated uploads directory with appropriate permissions.
+
 ```csharp
 private IHostingEnvironment hostingEnv;
 public SampleDataController(IHostingEnvironment env)
@@ -141,11 +143,11 @@ public void Remove(IList<IFormFile> UploadFiles)
 
 ## Drag and drop
 
-The uploader component allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area. By default, the uploader component act as drop area element. The drop area gets highlighted when you drag the files over drop area.
+The Uploader component supports drag-and-drop to add files to the upload queue. Drag files from the file explorer and drop them onto the drop area. By default, the Uploader acts as its own drop area and highlights the drop zone when files are dragged over it. Keyboard users can still browse using the built-in button.
 
 ### Custom drop area
 
-The uploader component allows you to set external target element as drop area using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The element can be represented as HTML element or element’s ID.
+The Uploader can target an external element as the drop zone using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_DropArea) property. The target can be specified as an HTML element or by element ID. This replaces the default drop zone and visually confines drop interactions to the specified area.
 
 `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
 
@@ -187,7 +189,6 @@ body .e-upload-drag-hover {
 </style>
 ```
 
-
 ![Customizing Drop Area in Blazor FileUpload](./images/blazor-fileupload-drop-area-customization.png)
 
-N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=bootstrap5) to understand how to browse the files which you want to upload to the server.
\ No newline at end of file
+N> You can also explore our [Blazor File Upload example](https://blazor.syncfusion.com/demos/file-upload/default-functionalities?theme=bootstrap5) to understand how to browse the files that need to be uploaded to the server.
\ No newline at end of file
diff --git a/blazor/file-upload/getting-started-with-maui-app.md b/blazor/file-upload/getting-started-with-maui-app.md
index 14e48a676b..17bef75671 100644
--- a/blazor/file-upload/getting-started-with-maui-app.md
+++ b/blazor/file-upload/getting-started-with-maui-app.md
@@ -3,13 +3,13 @@ layout: post
 title: Getting Started with FileUpload in Blazor MAUI App | Syncfusion
 description: Checkout and learn about the documentation for getting started with Blazor FileUpload Component in Blazor MAUI App.
 platform: Blazor
-control: FileUpload
+control: File Upload
 documentation: ug
 ---
 
 # Getting Started with Blazor File Upload Component
 
-This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This guide describes how to integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component into a .NET MAUI Blazor application. It covers setup using Visual Studio and Visual Studio Code, adding required packages, registering resources, and rendering the component.
 
 {% tabcontents %}
 
@@ -17,15 +17,21 @@ This section explains you through the step-by-step process of integrating the Sy
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For details, refer to the .NET MAUI installation instructions or the Syncfusion Blazor extension documentation.
+
+- .NET MAUI installation: https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin
+- Syncfusion Blazor Extension: https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
 
-To add **Blazor File Upload**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To use the Blazor File Upload component, install the following packages via the NuGet Package Manager (Tools → NuGet Package Manager → Manage NuGet Packages for Solution):
+
+- Syncfusion.Blazor.Inputs
+- Syncfusion.Blazor.Themes
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -44,11 +50,14 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Ensure the .NET MAUI workload is installed. Visual Studio Code uses the .NET CLI to create and manage projects. For details, see the .NET MAUI installation guide and the Syncfusion Blazor extension documentation for VS Code.
+
+- .NET MAUI installation: https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code
+- Syncfusion Blazor Extension (VS Code): https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
@@ -74,7 +83,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -125,7 +134,7 @@ namespace MauiBlazorWindow;
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and scripts are provided via Static Web Assets from NuGet. Add the references to the head section of ~/wwwroot/index.html in the MAUI project.
 
 ```html
 <head>
@@ -159,27 +168,21 @@ The most basic way to render the File Upload component is by adding the `<SfUplo
 
 ### How to Run the Sample on Windows
 
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+Run the sample in Windows Machine mode to host the .NET MAUI Blazor app on Windows.
 
 ![Blazor FileUpload Component](./images/blazor-fileupload-maui-app.png)
 
 ### How to Run the Sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor File Upload component in an Android .NET MAUI app using the Android emulator, follow these steps:
 
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
+- Install and launch the Android emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If issues occur with the Android Emulator, see Troubleshooting Android Emulator for guidance: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting.
 
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %}
-
-*   Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor FileUpload Component](./images/blazor-fileupload-component.png)" %}
-
 ![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif)
 
 ## Use ValueChange Event
@@ -239,11 +242,8 @@ This example demonstrates how to use the [`ValueChange`](https://help.syncfusion
 
 N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
 ![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif)
 
-
 ## Memory stream
 
 When you need to process uploaded files in memory—perhaps for resizing images, reading content, or sending them to another service without saving them to disk first—using a `MemoryStream` is an efficient approach. This is particularly useful for temporary processing or when dealing with sensitive data that shouldn't persist on the file system.
@@ -311,8 +311,6 @@ This example demonstrates how to read the content of an uploaded file into a [Me
 
 N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
 ![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif)
 
 
@@ -352,8 +350,6 @@ This example shows how to use the [`Created`](https://help.syncfusion.com/cr/bla
 
 N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
 ![Blazor File Upload Created Example](images/blazor-fileupload-created.gif)
 
 
@@ -407,8 +403,6 @@ This example demonstrates how to use the [FileSelected Event](https://help.syncf
 
 N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
 ![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif)
 
 
@@ -441,7 +435,7 @@ This example demonstrates how to use [`OnFileListRender`](https://help.syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload).
+N> View the sample on GitHub for a complete getting-started example: https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FileUpload.
 
 ## See also
 
diff --git a/blazor/file-upload/getting-started-with-server-app.md b/blazor/file-upload/getting-started-with-server-app.md
index f74d7ecccf..d768c9f85d 100644
--- a/blazor/file-upload/getting-started-with-server-app.md
+++ b/blazor/file-upload/getting-started-with-server-app.md
@@ -3,7 +3,7 @@ layout: post
 title: Getting Started with Blazor FileUpload Component | Syncfusion
 description: Checkout and learn about getting started with Blazor FileUpload component in Blazor Server Application.
 platform: Blazor
-control: FileUpload
+control: File Upload
 documentation: ug
 ---
 
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a full list of packages and component details, see the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic.
 
 {% endtabcontent %}
 
@@ -50,9 +50,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, you can create a server application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>). Depending on the SDK version, commands may vary between classic Blazor Server and Blazor Web App templates.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). If previously installed, verify the version with the following command.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -130,7 +130,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details.
 
 {% endtabcontent %}
 
@@ -138,7 +138,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 ```cshtml
 
@@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below:
+The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below.
 
 ```html
 <head>
@@ -190,7 +190,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 </body>
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For adding scripts, refer to [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Syncfusion® Blazor File Upload component
 
@@ -200,9 +200,9 @@ The Syncfusion Blazor File Upload component allows you to seamlessly integrate f
 
 The most basic way to render the File Upload component is by adding the `<SfUploader>` tag to your `.razor` page. By default, this component provides a clean interface for users to select files locally.
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page.
 
-N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
+N> If the interactivity location is set to `Global` and the **Render Mode** is `Server`, the render mode is configured in the `App.razor` file by default.
 
 ```
 @* desired render mode define here *@
diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md
index e40b214485..6073341932 100644
--- a/blazor/file-upload/getting-started-with-web-app.md
+++ b/blazor/file-upload/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor File Upload Component in Web App
 
-This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and .NET CLI.
+This section briefly explains how to include the [Blazor File Upload](https://www.syncfusion.com/blazor-components/blazor-file-upload) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains how to include the [Blazor File Upload](https://ww
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the Blazor Web App
 
-To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor File Upload** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 *   Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 *   Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,7 +92,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -100,7 +100,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
 {% tabs %}
 {% highlight C# tabtitle=".NET CLI" %}
@@ -128,13 +128,13 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-This command creates a new Blazor Web app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+This command creates a new Blazor Web app project and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 Here's an example of how to add the **Blazor File Upload** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 {% tabs %}
 {% highlight C# tabtitle=".NET CLI" %}
@@ -146,7 +146,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -165,11 +165,11 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-<h2>Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service</h2>
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight C# tabtitle="Server (~/Program.cs)" hl_lines="3 11" %}
@@ -203,7 +203,7 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-<h2>Add stylesheet and script resources</h2>
+## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
 
@@ -257,11 +257,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-*   Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+*   Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in the default web browser.
 
-![Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJXsrOqbMEOurR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Basic Component](images/blazor-fileupload-basic.gif)" %}
 
 ## Use ValueChange Event
 
@@ -320,9 +318,7 @@ This example demonstrates how to use the [`ValueChange`](https://help.syncfusion
 
 N> When saving files directly in a Blazor Server application using [`ValueChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [`AutoUpload`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload), the files are saved on the server where the Blazor Server app is running, not on the client's machine. You need appropriate file system permissions for the server process to write to the specified directory. Also, ensure the target directory (`wwwroot/uploads` in this example) exists or is created programmatically. In a production environment, consider secure storage solutions for uploaded files.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVyZkrqBvaSlvht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload ValueChange Event](images/blazor-fileupload-valuechange.gif)" %}
 
 
 ## Memory stream
@@ -392,9 +388,7 @@ This example demonstrates how to read the content of an uploaded file into a [Me
 
 N> When using `MemoryStream` for large files, be mindful of server memory consumption. If you expect very large files, consider processing them in chunks or saving them to temporary storage before processing to avoid out-of-memory exceptions. The `long.MaxValue` in `OpenReadStream` indicates the maximum buffer size. In a Blazor Server app, `Stream` operations occur on the server.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreNaLUhdwxzvHS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Memory Stream Example](images/blazor-fileupload-memorystream.gif)" %}
 
 
 ## Created Event
@@ -433,9 +427,7 @@ This example shows how to use the [`Created`](https://help.syncfusion.com/cr/bla
 
 N> The [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Created) event is useful for client-side JavaScript interop if you need to manipulate the DOM elements of the uploader component immediately after it's ready. However, for most Blazor-specific customizations (like custom templates), you should use the built-in Blazor features.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor File Upload Created Example](images/blazor-fileupload-created.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLyNuVUBGtPZrdo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload Created Example](images/blazor-fileupload-created.gif)" %}
 
 
 ## File Selected Event
@@ -488,9 +480,7 @@ This example demonstrates how to use the [FileSelected Event](https://help.syncf
 
 N> Setting `args.Cancel = true` in the `FileSelected` event will prevent the file (or files if `args.Files` contains multiple) from being added to the uploader's internal file list. This is a client-side validation and should be complemented with server-side validation for robust security and data integrity.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLIZuBUVwEJoJpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor File Upload File Selected Example](images/blazor-fileupload-fileselected.gif)" %}
 
 
 ## OnFileListRender
diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md
index 4b2ec2aca6..1074a2b451 100644
--- a/blazor/file-upload/getting-started.md
+++ b/blazor/file-upload/getting-started.md
@@ -50,7 +50,7 @@ N> Syncfusion<sup>&reg;</sup> Blazor components are available in [nuget.org](htt
 
 You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup>&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -89,7 +89,7 @@ N> Syncfusion<sup>&reg;</sup> Blazor components are available in [nuget.org](htt
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If already installed, check the version using the following command in a terminal or command prompt.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -136,7 +136,7 @@ N> Syncfusion<sup>&reg;</sup> Blazor components are available in [nuget.org](htt
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -173,7 +173,7 @@ await builder.Build().RunAsync();
 
 ## Add Stylesheet and Script Resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are available via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the references in the `<head>` section of **~/index.html**.
 
 ```html
 <head>
@@ -185,7 +185,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <!-- <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-uploader.min.js" type="text/javascript"></script> -->
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For scripts, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). When using the consolidated Syncfusion script, separate per-component scripts are typically not required.
 
 ## Add Syncfusion® Blazor File Upload component
 
diff --git a/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md b/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md
index 7139ed5c13..611656877a 100644
--- a/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md
+++ b/blazor/file-upload/how-to/getting-started-with-blazor-webassembly.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Stared with Blazor File Upload in WebAssembly | Syncfusion
+title: Getting Started with Blazor File Upload in WebAssembly | Syncfusion
 description: Checkout and learn about getting started with Blazor WebAssembly App and Blazor File Upload Component in Visual Studio and much more.
 platform: Blazor
 control: File Upload
@@ -9,7 +9,7 @@ documentation: ug
 
 # Blazor File Upload Component in WebAssembly App using Visual Studio
 
-This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor File Upload component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+This article provides step-by-step instructions for building a Blazor WebAssembly app with the Blazor File Upload component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
 
 ## Prerequisites
 
@@ -17,11 +17,11 @@ This article provides a step-by-step instructions for building Blazor WebAssembl
 
 ## Create a Blazor WebAssembly App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add Blazor File Upload component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor File Upload component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -33,11 +33,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details.
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -48,7 +48,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
@@ -74,7 +74,7 @@ await builder.Build().RunAsync();
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
 
-* For Blazor WebAssembly app, include it in the **~/index.html** file.
+* For Blazor WebAssembly app, include them in the **~/index.html** file.
 
 ```html
 <head>
@@ -83,7 +83,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for multiple ways to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). references in your Blazor application.
 
 ## Add Blazor File Upload component
 
@@ -97,17 +97,17 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload comp
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Upload component in your default web browser.
 
-![Blazor Upload](../images/blazor-fileupload-component.png)
+![Blazor Uploader rendered in a WebAssembly app](../images/blazor-fileupload-component.png)
 
 ## Without server-side API endpoint
 
-You can upload the files and files of folders in the Blazor application without specifying the server-side API end point using [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html).
+Upload files (and folder contents) in a Blazor application without specifying a server-side API endpoint by configuring [AsyncSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html).
 
 ### Save and Remove actions
 
-You can get the uploaded files as file stream in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange)  event argument. Now, you can write the save handler inside ValueChange event to save the files to desired location. Find the save action code below.
+Uploaded files as streams in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event arguments. Implement the save logic within the `ValueChange` handler to process files as needed. The concept is illustrated below.
 
 {% tabs %}
 {% highlight razor %}
@@ -140,9 +140,9 @@ You can get the uploaded files as file stream in the [ValueChange](https://help.
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor FileUpload displays Updated Files](../images/blazor-fileupload-with-updated-files.png)
+![Uploader showing an updated file list after selection](../images/blazor-fileupload-with-updated-files.png)
 
-While clicking on the remove icon in the file list, you will get the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event with removing file name as argument. So, you can write the remove handler inside OnRemove event to remove the particular file from desired location. Find the remove action code below.
+When clicking the remove icon in the file list, the [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) event provides the file name(s) being removed. Implement the remove logic in the `OnRemove` handler to remove files from the target location as needed in your application.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -163,16 +163,16 @@ Private void onRemove(RemovingEventArgs args)
 
 ## With server-side API endpoint
 
-The upload process requires save and remove action URL to manage the upload process in the server.
+The upload process can use server endpoints for save and remove actions.
 
-N> * The save action is necessary to handle the upload operation.
-<br/> * The remove action is optional, one can handle the removed files from server.
+N> * The save action is required to handle the upload operation.
+<br/> * The remove action is optional for deleting files on the server.
 
-The save action handler upload the files that needs to be specified in the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property.
+Specify the save action URL with the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_SaveUrl) property.
 
-The save handler receives the submitted files and manages the save process in server. After uploading the files to server location, the color of the selected file name changes to green and the remove icon is changed as bin icon.
+The save handler receives the submitted files and manages the save process on the server. After uploading files to the server location, the color of the selected file name changes to green and the remove icon switches to a bin icon.
 
-The remove action is optional. The remove action handler removes the files that needs to be specified in the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property.
+Specify the remove action URL with the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderAsyncSettings.html#Syncfusion_Blazor_Inputs_UploaderAsyncSettings_RemoveUrl) property to handle server-side deletes.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -253,17 +253,17 @@ public void Remove(IList<IFormFile> UploadFiles)
 
 ## Configure allowed file types
 
-You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderModel.html#Syncfusion_Blazor_Inputs_UploaderModel_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element.
+Allow only specific file types to be uploaded using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions) property. Provide extensions as a comma-separated list. The uploader filters selected or dropped files against the specified file types and proceeds with the upload operation. Validation also applies when specifying the native input’s accept attribute.
 
 {% tabs %}
 {% highlight razor %}
 
-<SfUploader AllowedExtensions=".doc, docx, .xls, xlsx"></SfUploader>
+<SfUploader AllowedExtensions=".doc, .docx, .xls, .xlsx"></SfUploader>
 
 {% endhighlight %}
 {% endtabs %}
 
-![Allowing Specific Files in Blazor FileUpload](../images/blazor-fileupload-allow-specific-file.png)
+![Uploader filtering to allow only specific file types](../images/blazor-fileupload-allow-specific-file.png)
 
 ## See Also
 
diff --git a/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md b/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md
index a6db5573fe..29362e669d 100644
--- a/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md
+++ b/blazor/file-upload/how-to/how-to-prevent-to-upload-or-remove-upload-file.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: How to Prevent Uploading or Removing in Uploader | Syncfusion
+title: How to prevent uploading or removing in Uploader | Syncfusion
 description: Checkout and learn here how to Preventing File Upload or Removal in Uploader Component in Syncfusion Blazor File Upload component and more.
 platform: Blazor
 control: File Upload
 documentation: ug
 ---
 
-# How to Preventing File Upload and Removal in Uploader Component
+# How to prevent uploading or removing files in Uploader component
 
-We can prevent the selected file from being uploaded and also prevent the removal of the file when the remove button is clicked on the Uploader component. The [BeforeUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeUpload) event is triggered before the upload process begins, allowing us to add additional parameters to the upload request. Similarly, the [BeforeRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeRemove) event is triggered when a file is being removed. This event can be used to obtain confirmation before deleting the file from the server.
+Prevent selected files from being uploaded and block removal when the remove button is clicked by handling Uploader events. The [BeforeUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeUpload) event fires before the upload begins and can be used to cancel the operation or add custom parameters. The [BeforeRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeRemove) event fires when a file is about to be removed and can be used to cancel removal (for example, after confirming with the user).
 
 ### With server-side API endpoint
 
diff --git a/blazor/file-upload/how-to/how-to-preview-uploaded-image.md b/blazor/file-upload/how-to/how-to-preview-uploaded-image.md
index bdf95b8d9e..32576d7077 100644
--- a/blazor/file-upload/how-to/how-to-preview-uploaded-image.md
+++ b/blazor/file-upload/how-to/how-to-preview-uploaded-image.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # How to preview the uploaded image
 
-The below code snippet demonstrates a Blazor file upload example with image preview functionality using the Syncfusion<sup style="font-size:70%">&reg;</sup> Uploader component. It includes a custom template to display the uploaded image, file name, and size. The OnChange event handler converts the selected image to a base64-encoded string.
+The following example shows how to preview a selected image in the Syncfusion Uploader component by using a custom template to display the image, file name, and size. The ValueChange (OnChange handler) converts the selected image to a base64-encoded string and updates the preview. This approach works client-side and does not require a server endpoint for preview.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/file-upload/how-to/html-attributes.md b/blazor/file-upload/how-to/html-attributes.md
index a4736d5f34..a360769571 100644
--- a/blazor/file-upload/how-to/html-attributes.md
+++ b/blazor/file-upload/how-to/html-attributes.md
@@ -7,11 +7,11 @@ control: File Upload
 documentation: ug
 ---
 
-# Adding HTML Attributes in Blazor File Upload Component
+# Adding HTML attributes in Blazor File Upload component
 
-You can add the additional HTML attributes such as disabled, value, name, and more to the element using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property. If you configure both the property and equivalent HTML attribute, then the component will consider the property value.
+Add additional HTML attributes (such as disabled, value, name, and more) to the uploader element by using the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HtmlAttributes) property. When both a component property and an equivalent HTML attribute are configured, the component property value takes precedence. Use this approach to set native input attributes or boolean flags (for example, “disabled”) directly on the underlying element.
 
-The following example demonstrates how to set attributes in the HtmlAttributes property in the Uploader.
+The following example demonstrates how to set attributes through the HtmlAttributes property in the uploader.
 
 ```cshtml
 
@@ -30,4 +30,4 @@ The following example demonstrates how to set attributes in the HtmlAttributes p
         };
 }
 
-```
+```
\ No newline at end of file
diff --git a/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md b/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md
index 39b89dfb1d..8fec9f9595 100644
--- a/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md
+++ b/blazor/file-upload/how-to/resizing-the-image-before-sending-to-the-server.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Resizing the Image Before Sending to the Server | Syncfusion
+title: Resizing the image before sending to the server | Syncfusion
 description: Learn here all about Resizing the Image Before Sending to the Server in Blazor File Upload Component and more details.
 platform: Blazor
 control: File Upload
@@ -74,4 +74,4 @@ public async Task Post([FromBody] ImageFile[] files)
 }
 
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/file-upload/http-client.md b/blazor/file-upload/http-client.md
index 09de64864f..dc3d2a0a19 100644
--- a/blazor/file-upload/http-client.md
+++ b/blazor/file-upload/http-client.md
@@ -9,9 +9,15 @@ documentation: ug
 
 # HTTP Client in Blazor File Upload Component
 
-The File Upload component in Blazor enables you to utilize the [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations.
+The File Upload component supports configuring a custom HTTP pipeline for its network requests via the  [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations.
 
-The following example illustrates how to configure the File Upload component with HttpClient in a Blazor application.
+The following example illustrates how to configure the File Upload component to use a specific HttpClient instance for SaveUrl and RemoveUrl requests in a Blazor application. This approach applies to Blazor Server and Blazor Web App (Server/Auto). In Blazor WebAssembly, an HttpClient is available by default; register headers either via DI (for a scoped client) or on a per-request basis.
+
+N> - Ensure the API configured in SaveUrl/RemoveUrl permits cross-origin requests if it runs on a different domain (CORS).
+- Prefer standard Authorization headers (for example, Bearer tokens) and avoid hard coding secrets.
+- Consider IHttpClientFactory or named clients for production scenarios to manage handlers, retries, and resilience.
+- To append additional form data for each file (for example, metadata), use Uploader events such as Uploading/BeforeUpload; headers should be used for auth and routing concerns.
+- Handle failures using Uploader events (for example, OnFailure/Success) to surface authorization or validation errors returned by the API.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/file-upload/localization.md b/blazor/file-upload/localization.md
index bd91e668f1..99d8e8d5d4 100644
--- a/blazor/file-upload/localization.md
+++ b/blazor/file-upload/localization.md
@@ -18,4 +18,4 @@ The following UI elements of the File Upload component can be localized:
 *   **File status messages:** Text indicating success, failure, or upload progress.
 *   **Action button tooltips:** Tooltips for buttons like "Clear" and "Upload."
 
-To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic.
\ No newline at end of file
+To learn more about localizing Syncfusion Blazor components, refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) documentation topic.
diff --git a/blazor/file-upload/style-appearance.md b/blazor/file-upload/style-appearance.md
index 4bca884a09..b477f606b8 100644
--- a/blazor/file-upload/style-appearance.md
+++ b/blazor/file-upload/style-appearance.md
@@ -134,4 +134,4 @@ Provide a consistent look during file uploads by customizing the progress bar an
 * [How to create a responsive, full-height file uploader](https://support.syncfusion.com/kb/article/21232/how-to-create-a-responsive-full-height-file-uploader-in-blazor)
 * [How to customize button text](https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component)
 * [How to center the Clear and Upload buttons](https://support.syncfusion.com/kb/article/17534/how-to-center-the-clear-and-upload-buttons-in-blazor-file-upload)
-* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload)
\ No newline at end of file
+* [How to customize the tooltip for the browse button](https://support.syncfusion.com/kb/article/16150/how-to-customize-tooltip-for-browse-button-in-blazor-file-upload)
diff --git a/blazor/file-upload/template.md b/blazor/file-upload/template.md
index 27c5a36929..7ce7a4e5b3 100644
--- a/blazor/file-upload/template.md
+++ b/blazor/file-upload/template.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Template in Blazor File Upload Component | Syncfusion
-description: Checkout and learn here about Template in Syncfusion Blazor File Upload component and much more details.
+description: Learn how to customize the Syncfusion Blazor File Upload component's appearance using templates, including how to add a progress bar.
 platform: Blazor
 control: File Upload
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Template in Blazor File Upload Component
 
-The template in the code snippet allows for the customization of how file details are displayed in the uploader's UI. It provides flexibility to define the structure and styling of individual file elements, such as file name, size, and status. This allows to create a tailored and visually appealing file upload interface that aligns with their application's design and user experience requirements.
+The Blazor File Upload component allows for the customization of the file list items by using a template. This provides the flexibility to define the structure and styling of individual file elements, such as the file name, size, and status. A custom template can create a tailored and visually appealing file upload interface that aligns with an application's design and user experience requirements.
 
 ### With server-side API endpoint
 
@@ -20,10 +20,12 @@ The template in the code snippet allows for the customization of how file detail
     <UploaderAsyncSettings SaveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Save"
                            RemoveUrl="https://blazor.syncfusion.com/services/production/api/FileUploader/Remove"></UploaderAsyncSettings>
     <UploaderTemplates>
-        <Template>
-            <div class="name file-name" title="@(context.Name)">File Name : @(context.Name)</div>
-            <div class="file-size">File Size : @(context.Size)</div>
-            <div class="e-file-status">File Status : @(context.Status)</div>
+        <Template Context="context">
+            <div style="padding: 10px;">
+                <div class="name file-name" title="@context.Name">File Name : @context.Name</div>
+                <div class="file-size">File Size : @context.Size</div>
+                <div class="e-file-status">File Status : @context.Status</div>
+            </div>
         </Template>
     </UploaderTemplates>
 </SfUploader>
@@ -35,28 +37,33 @@ The template in the code snippet allows for the customization of how file detail
 
 <SfUploader ID="Files" AutoUpload="false">
     <UploaderTemplates>
-        <Template>
-            <div class="name file-name" title="@(context.Name)">File Name : @(context.Name)</div>
-            <div class="file-size">File Size : @(context.Size)</div>
-            <div class="e-file-status">File Status : @(context.Status)</div>
+        <Template Context="context">
+            <div style="padding: 10px;">
+                <div class="name file-name" title="@context.Name">File Name : @context.Name</div>
+                <div class="file-size">File Size : @context.Size</div>
+                <div class="e-file-status">File Status : @context.Status</div>
+            </div>
         </Template>
     </UploaderTemplates>
 </SfUploader>
 ```
 
-### Adding progressbar using template
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrSZOLhhmAhbeZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-When using the file upload template, the progress bar does not display in the UI. We can add the progress bar using template and then show the progress while reading and writing to the stream in the ValueChange event. The code snippet below demonstrates a Blazor file upload example with a progress bar using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
+## Adding a progress bar using a template
+
+When using a file upload template, the default progress bar is not displayed in the UI. A progress bar can be added within the template, and its progress can be updated by reading and writing to the stream in the `ValueChange` event. The following code snippet demonstrates how to add a progress bar to a Blazor File Upload component using a custom template. The custom template includes elements to display the file name, size, progress bar, and file status.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 @using Syncfusion.Blazor.ProgressBar
-<SfUploader @ref="@uploderObj" ID="UploadFiles" MaxFileSize="100000000000" ShowProgressBar = "false">
-    <UploaderEvents BeforeUpload="onBeforeUpload" Success="onSuccess" ValueChange="onChange"></UploaderEvents>
+
+<SfUploader @ref="@uploaderObj" ID="UploadFiles" MaxFileSize="100000000000" ShowProgressBar="false">
+    <UploaderEvents BeforeUpload="OnBeforeUpload" Success="OnSuccess" ValueChange="OnChange"></UploaderEvents>
     <UploaderTemplates>
-        <Template>
+        <Template Context="context">
             <span class="e-file-container">
-                <span class="e-file-name" title="@(context.Name)">@this.GetFileName(context.Name)</span>
+                <span class="e-file-name" title="@context.Name">@GetFileName(context.Name)</span>
                 <span class="e-file-type">@("." + context.Type)</span>
                 @if (context.Size > 0)
                 {
@@ -67,9 +74,9 @@ When using the file upload template, the progress bar does not display in the UI
                 {
                     <span class="e-upload-progress-wrap">
                         <span class="e-progress-inner-wrap">
-                            <progressbar class="@("e-upload-progress-bar" + " " + "e-upload-progress")" value="0" max="100" style="width: @(ProgressValue.ToString() + "%")"></progressbar>
+                            <progress class="@("e-upload-progress-bar" + " " + "e-upload-progress")" value="0" max="100" style="width: @(ProgressValue + "%")"></progress>
                         </span>
-                        <span class="e-progress-bar-text">@(ProgressValue.ToString() + "%")</span>
+                        <span class="e-progress-bar-text">@(ProgressValue + "%")</span>
                     </span>
                 }
                 @if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
@@ -86,52 +93,50 @@ When using the file upload template, the progress bar does not display in the UI
                 }
                 @if (fileStates.ContainsKey(context.Name) && fileStates[context.Name] && context.Status == "File uploaded successfully")
                 {
-                    <span class="e-icons e-file-delete-btn @this.RemoveIconDisable" id="deleteIcon" title="Delete" @onclick="(args) => ClickHandler(context)"></span>
+                    <span class="e-icons e-file-delete-btn @RemoveIconDisable" id="deleteIcon" title="Delete" @onclick="(args) => ClickHandler(context)"></span>
                 }
                 else
                 {
-                    <span class="e-icons e-file-remove-btn @this.RemoveIconDisable" id="removeIcon" title="Remove" @onclick="(args) => ClickHandler(context)"></span>
+                    <span class="e-icons e-file-remove-btn @RemoveIconDisable" id="removeIcon" title="Remove" @onclick="(args) => ClickHandler(context)"></span>
                 }
             </span>
-            
         </Template>
     </UploaderTemplates>
 </SfUploader>
+
 @code {
-    private SfUploader uploderObj;
-    public bool isVisible { get; set; } = false;
-    private FileInfo CurrentFile {get; set;}
+    private SfUploader uploaderObj;
+    private FileInfo CurrentFile { get; set; }
     public string fileSize { get; set; } = "0";
     public string RemoveIconDisable = string.Empty;
-#pragma warning disable CA2213 // Disposable fields should be disposed
     private readonly SemaphoreSlim FileSemaphore = new SemaphoreSlim(1);
-#pragma warning restore CA2213 // Disposable fields should be disposed
     private decimal ProgressValue { get; set; } = 0;
     private Dictionary<string, bool> fileStates = new Dictionary<string, bool>();
+
     public string CalculateFileSize(double size)
     {
-        string fileSizeStr = "";
         if (size >= 1024 * 1024)
         {
-            return fileSizeStr = $"{size / (1024f * 1024f):0.00} MB";
+            return $"{size / (1024f * 1024f):0.00} MB";
         }
         else if (size >= 1024)
         {
-            return fileSizeStr = $"{size / 1024f:0.00} KB";
+            return $"{size / 1024f:0.00} KB";
         }
         else
         {
-            return fileSizeStr = $"{size} bytes";
+            return $"{size} bytes";
         }
     }
+
     private string GetFileName(string fileName)
     {
         string type = GetFileType(fileName);
         string[] names = fileName.Split(new string[] { "." + type }, StringSplitOptions.None);
         return names[0];
     }
+
     private string GetFileType(string name)
-#pragma warning restore CA1822 // Mark members as static
     {
         string extension = string.Empty;
         int index = name.LastIndexOf('.');
@@ -139,51 +144,45 @@ When using the file upload template, the progress bar does not display in the UI
         {
             extension = name.Substring(index + 1);
         }
-
-        return (!string.IsNullOrEmpty(extension)) ? extension : string.Empty;
-    }
-    private async Task onFileRemove()
-    {
-        await uploderObj.RemoveAsync();
+        return !string.IsNullOrEmpty(extension) ? extension : string.Empty;
     }
+
     public async Task ClickHandler(FileInfo context)
     {
-        await uploderObj.RemoveAsync(new FileInfo[] { context });
+        await uploaderObj.RemoveAsync(new FileInfo[] { context });
     }
-    public void onBeforeUpload(BeforeUploadEventArgs args)
+
+    public void OnBeforeUpload(BeforeUploadEventArgs args)
     {
         foreach (var file in args.FilesData)
         {
             fileStates[file.Name] = false;
         }
     }
-    public void onSuccess(SuccessEventArgs args)
+
+    public void OnSuccess(SuccessEventArgs args)
     {
-        //fileStates[args.File.Name] = false;
-        isVisible = false;
-        this.ProgressValue = 0;
+        ProgressValue = 0;
     }
-   
-    public async Task onChange(UploadChangeEventArgs args)
+
+    public async Task OnChange(UploadChangeEventArgs args)
     {
         await FileSemaphore.WaitAsync();
         try
         {
             foreach (var file in args.Files)
             {
-                var path = @"" + file.FileInfo.Name;
+                var path = Path.Combine(Path.GetTempPath(), file.FileInfo.Name);
                 CurrentFile = file.FileInfo;
                 CurrentFile.Status = "Uploading";
                 await using FileStream writeStream = new(path, FileMode.Create);
                 using var readStream = file.File.OpenReadStream(file.File.Size);
                 var bytesRead = 0;
-                var totalRead = 0;
                 var buffer = new byte[1024 * 10];
 
                 while ((bytesRead = await readStream.ReadAsync(buffer)) != 0)
                 {
                     RemoveIconDisable = "e-disabled";
-                    totalRead += bytesRead;
                     await writeStream.WriteAsync(buffer, 0, bytesRead);
                     ProgressValue = (long)((decimal)readStream.Position * 100) / readStream.Length;
                     StateHasChanged();
@@ -191,7 +190,6 @@ When using the file upload template, the progress bar does not display in the UI
                 CurrentFile.Status = "File uploaded successfully";
                 RemoveIconDisable = string.Empty;
                 fileStates[file.FileInfo.Name] = true;
-
             }
         }
         catch (Exception ex)
@@ -207,4 +205,6 @@ When using the file upload template, the progress bar does not display in the UI
 }
 ```
 
-![Blazor FileUpload with Chunk Upload](./images/blazor-template-progressbar.gif)
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLytYhhLmmEGpkj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor File Upload with a custom template and progress bar](./images/blazor-template-progressbar.gif)
\ No newline at end of file
diff --git a/blazor/file-upload/validation.md b/blazor/file-upload/validation.md
index e9dade9363..642764c5a2 100644
--- a/blazor/file-upload/validation.md
+++ b/blazor/file-upload/validation.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Validation in Blazor File Upload Component
 
-The uploader component validate the selected files size and extension using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions), [MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) and [MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) properties. The files can be validated before uploading to the server and can be ignored on uploading. Also, you can validate the files by setting the HTML attributes to the original input element. The validation process occurs on drag-and-drop the files also.
+The File Upload component validates selected files by type and size using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions), [MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize), and [MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) properties. Validation is applied when files are selected or dragged and dropped. Files that do not meet the criteria can be prevented from uploading. In addition, file type filtering can be reinforced by setting the accept attribute on the underlying input element. Always perform server-side validation as a defense-in-depth measure.
 
 ## File type
 
-You can allow the specific files alone to upload using the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions) property. The extension can be represented as collection by comma separators. The uploader component filters the selected or dropped files to match against the specified file types and processes the upload operation. The validation happens when you specify value to inline attribute to accept the original input element.
+Allow only specific file types by setting the [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AllowedExtensions) property to a comma-separated list of extensions (typically with leading dots). The Uploader filters selected or dropped files against the specified types and proceeds only with matches. Client-side filtering can also be aligned by setting the input’s accept attribute to the same extensions. Matching is case-insensitive.
 
 `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
 
@@ -26,12 +26,11 @@ You can allow the specific files alone to upload using the [AllowedExtensions](h
 </SfUploader>
 ```
 
-
 ![Validation in Blazor FileUpload](./images/blazor-fileupload-validation.png)
 
 ## File size
 
-The uploader component allows you to validate the files based on its size. The validation helps to restrict uploading large files or empty files to the server. The size can be represented in `bytes`. By default, the uploader component allows you to upload **minimum file size** as 0 byte and **maximum file size** as 28.4 MB using the [MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) and [MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize) properties.
+Validate files based on size (in bytes) to prevent empty or very large uploads. By default, the minimum file size is 0 bytes and the maximum is 28.4 MB, which can be overridden using [MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MinFileSize) and [MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_MaxFileSize). Be aware that server infrastructure (for example, Kestrel/IIS/request limits) can impose additional caps, so align client-side limits with server-side configuration.
 
 `SaveUrl` and `RemoveUrl` actions are explained in this [link](./chunk-upload#save-and-remove-action-for-blazor-aspnet-core-hosted-application).
 
@@ -44,7 +43,6 @@ The uploader component allows you to validate the files based on its size. The v
 </SfUploader>
 ```
 
-
 ![Validating File Size in Blazor FileUpload](./images/blazor-fileupload-size-validation.png)
 
 ## File Validation within Edit Form
diff --git a/blazor/floating-action-button/accessibility.md b/blazor/floating-action-button/accessibility.md
index 96f8752028..78ef787398 100644
--- a/blazor/floating-action-button/accessibility.md
+++ b/blazor/floating-action-button/accessibility.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor Floating Action Button component
 
-The Blazor Floating Action Button component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Floating Action Button component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor Floating Action Button component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
 
 <style>
     .post .post-content img {
@@ -30,33 +30,34 @@ The accessibility compliance for the Blazor Floating Action Button component is
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Supported"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially supported"> - Some features of the component do not fully meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor Floating action button component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Floating action button component:
+The Blazor Floating Action Button component follows the [WAI-ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) to meet accessibility requirements. The following ARIA attribute is used in the Blazor Floating Action Button component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `aria-label` | Provides an accessible name for the icon only floating action button. |
+| `aria-label` | Provides an accessible name for an icon-only floating action button. |
 
 ## Keyboard interaction
 
-The Blazor Floating action button component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Floating action button component.
+The Blazor Floating Action Button component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#keyboardinteraction) guideline, making it accessible to people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Floating Action Button component.
+
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Space</kbd> | <kbd>Space</kbd> | When the floating action button has focus, pressing the space key changes the state of the floating action button. |
+| <kbd>Space</kbd> | <kbd>Space</kbd> | When the floating action button has focus, activates the button (fires click). |
 
 ## Ensuring accessibility
 
-The Blazor Floating Action Button component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Floating Action Button component's accessibility levels are ensured through [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor Floating Action Button component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/fab) in a new window to evaluate the accessibility of the Blazor Floating action button component with accessibility tools.
+The accessibility compliance of the Blazor Floating Action Button component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/fab) in a new window to evaluate the accessibility of the Blazor Floating Action Button component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/floating-action-button/events.md b/blazor/floating-action-button/events.md
index 1a731ccbbb..e026e9566d 100644
--- a/blazor/floating-action-button/events.md
+++ b/blazor/floating-action-button/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Floating Action Button Component
 
-This section explains the available events in Floating Action Button Component.
+This section explains the events available in the Floating Action Button component. The following events are covered: Created and OnClick.
 
 ## Created
 
-Event triggers after the creation of Floating Action Button.
+Raised after the Floating Action Button has been created and its initial rendering is complete. Use this event to run setup logic or access the component once it is available in the UI.
 
 ```cshtml
 
@@ -32,7 +32,7 @@ Event triggers after the creation of Floating Action Button.
 
 ## OnClick
 
-Event triggers when the Floating Action Button is clicked. Below example shows the Click event of the Floating Action Button.
+Raised when the Floating Action Button is activated by a user action, including mouse click, keyboard activation (Enter/Space), or touch. The example below demonstrates handling the click event.
 
 ```cshtml
 
@@ -52,7 +52,4 @@ Event triggers when the Floating Action Button is clicked. Below example shows t
     }
 }
 
-```
-
-
-
+```
\ No newline at end of file
diff --git a/blazor/floating-action-button/getting-started-with-web-app.md b/blazor/floating-action-button/getting-started-with-web-app.md
index 2802d53161..5273c6ce6b 100644
--- a/blazor/floating-action-button/getting-started-with-web-app.md
+++ b/blazor/floating-action-button/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Floating Action Button Component in WebApp
 
-This section briefly explains about how to include [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Floating Action Button](https://www.syncfusion.com/blazor-components/blazor-fab) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor Floating Action Butto
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the Blazor Web App
 
-To add **Blazor Floating Action Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Floating Action Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+
+Here's an example of how to add **Blazor Floating Action Button** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -225,15 +254,15 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Floating Action Button Component](./images/blazor-fab-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Floating Action Button Component](./images/blazor-fab-component.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton).
 
 ## Event Click In Blazor Floating Action Button
 
-The floating action button control triggers the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event when you click on the floating action button. You can use this event to perform the required action.
+The floating action button control triggers the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_OnClick) event when you click on the floating action button. Use this event to perform the required action.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/floating-action-button/getting-started.md b/blazor/floating-action-button/getting-started.md
index 39711878fe..c567bf5dc3 100644
--- a/blazor/floating-action-button/getting-started.md
+++ b/blazor/floating-action-button/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor Floating Action Button Component
 
-This section briefly explains about how to include Blazor Floating Action Button component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This guide explains how to add the Blazor Floating Action Button component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Floating Action Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton) sample.
+To get started quickly with the Floating Action Button component in Blazor, watch this video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/FloatingActionButton) sample.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=own8zVAakTk"%}
@@ -26,11 +26,11 @@ To get start quickly with Floating Action Button Component using Blazor, you can
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor Floating Action Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor Floating Action Button component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,8 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory where your `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -138,11 +138,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to adding script references.
 
 ## Add Blazor Floating Action Button component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component to the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight razor %}
@@ -156,13 +156,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTtsVaAldOGCVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "![Blazor Floating Action Button Component](./images/blazor-fab-component.png)" %}
 
 ## Event Click In Blazor Floating Action Button
 
-The floating action button control triggers the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event when you click on the floating action button. You can use this event to perform the required action.
+The floating action button control triggers the [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_OnClick) event when you click the floating action button. Use this event to perform the required action.
 
 {% tabs %}
 {% highlight razor %}
@@ -183,4 +183,4 @@ The floating action button control triggers the [OnClick](https://help.syncfusio
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDBTtMrOqlmTgqWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Floating Action Button Component](./images/blazor-fab-event-click-sample.png)" %}
 
-N> You can also explore our [Blazor Floating Action Button example](https://blazor.syncfusion.com/demos/fab/overview?theme=bootstrap5) that shows how to render and configure the button.
+N> You can also explore our [Blazor Floating Action Button example](https://blazor.syncfusion.com/demos/fab/overview?theme=bootstrap5) that shows how to render and configure the button.
\ No newline at end of file
diff --git a/blazor/floating-action-button/icons.md b/blazor/floating-action-button/icons.md
index 34193cd3cf..f871b5ffff 100644
--- a/blazor/floating-action-button/icons.md
+++ b/blazor/floating-action-button/icons.md
@@ -13,7 +13,7 @@ You can customize the icon and text of Blazor Floating Action Button(FAB) using
 
 ## FAB with icon
 
-You can show icon only in Floating Action Button by setting [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IconCss) property. You can show tooltip on hover to show additional details to end-user by setting `title` attribute.
+Display an icon-only FAB by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_IconCss) property and omitting Content. The sample below also demonstrates including a custom icon font via @font-face.
 
 ```cshtml
 
@@ -99,7 +99,7 @@ You can show icon along with text in Floating Action Button by setting [IconCss]
 
 ### Icon position
 
-You can change the position of icon when showing along with content by setting [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IconPosition) property. By default, the icon is positioned on the left side together with text.
+Change the icon position relative to the text using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IconPosition) property. By default, the icon appears to the left of the text; set IconPosition to Right to place the icon after the text.
 
 Below example demonstrates a FAB with icon and text.
 
diff --git a/blazor/floating-action-button/images/blazor-create-web-app.png b/blazor/floating-action-button/images/blazor-create-web-app.png
new file mode 100644
index 0000000000..7dd6e612d2
Binary files /dev/null and b/blazor/floating-action-button/images/blazor-create-web-app.png differ
diff --git a/blazor/floating-action-button/positions.md b/blazor/floating-action-button/positions.md
index 2bb3cb4269..08a3b5e924 100644
--- a/blazor/floating-action-button/positions.md
+++ b/blazor/floating-action-button/positions.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Positions in Blazor Floating Action Button Component
 
-The floating action button can be positioned anywhere on the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_Position) property. If the `Target` is not defined, then FAB is positioned based on the browser viewport.
+The Floating Action Button (FAB) can be positioned anywhere within the specified [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_Position) property. If `Target` is not defined, the FAB is positioned relative to the browser viewport. When using `Target`, ensure the container is positioned (for example, `position: relative`) so the FAB aligns within its bounds.
 
-The position values of Floating Action Button are as follows:
+The available position values for the Floating Action Button are:
 
 * TopLeft
 * TopCenter
@@ -23,7 +23,7 @@ The position values of Floating Action Button are as follows:
 * BottomCenter
 * BottomRight
 
-Below example demonstrates Bottom Left position of FAB.
+The following example demonstrates the Bottom Left position of the FAB.
 
 ```cshtml
 
@@ -62,9 +62,9 @@ Below example demonstrates Bottom Left position of FAB.
 
 ```
 
-![Blazor FAB Component with Bottom Left Position](./images/BottomLeftPosition.png)
+![Blazor FAB component at bottom-left position](./images/BottomLeftPosition.png)
 
-Below example demonstrates different supported positions of FAB.
+The following example demonstrates multiple supported positions of the FAB.
 
 ```cshtml
 
@@ -111,11 +111,11 @@ Below example demonstrates different supported positions of FAB.
 
 ```
 
-![Blazor FAB Component with different positions](./images/FabPositions.png)
+![Blazor FAB component demonstrating all built-in positions](./images/FabPositions.png)
 
 ## Custom position
 
-You can define the custom position of the Floating Action Button by override the `top`, `left`, `right`, and `bottom` CSS properities using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass).
+Define a custom position for the Floating Action Button by overriding the `top`, `left`, `right`, and `bottom` CSS properties using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfFab.html#Syncfusion_Blazor_Buttons_SfFab_CssClass) property.
 
 ```cshtml
 
@@ -136,4 +136,4 @@ You can define the custom position of the Floating Action Button by override the
 
 ```
 
-![Blazor FAB Component with Custom position](./images/CustomPosition.png)
+![Blazor FAB component with custom position](./images/CustomPosition.png)
\ No newline at end of file
diff --git a/blazor/floating-action-button/styles.md b/blazor/floating-action-button/styles.md
index ff0da01a89..8c90723891 100644
--- a/blazor/floating-action-button/styles.md
+++ b/blazor/floating-action-button/styles.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Styles in Blazor Floating Action Button Component
 
-This section explains the different styles of Floating Action Button.
+This section explains the style options for the Blazor Floating Action Button (FAB), including predefined style classes, custom CSS, showing text on hover, and outline customization.
 
 ## FAB styles
 
@@ -17,11 +17,11 @@ The Blazor Floating Action Button supports the following predefined styles that
 
 | Class | Description |
 | -------- | -------- |
-| e-success | Used to represent a positive action. |
-| e-outline |  Used to represent an appearance of button with outline. |
-| e-info |  Used to represent an informative action. |
-| e-warning | Used to represent an action with caution. |
-| e-danger | Used to represent a negative action. |
+| e-success | Represents a positive action. |
+| e-outline | Represents an outlined button appearance. |
+| e-info | Represents an informative action. |
+| e-warning | Represents an action with caution. |
+| e-danger | Represents a negative action. |
 
 ```csharp
 
@@ -33,23 +33,23 @@ The Blazor Floating Action Button supports the following predefined styles that
 
 ![Blazor FAB Component with Styles](./images/Style.png)
 
-N> Predefined Floating Action Button styles provide only the visual indication. So, Floating Action Button [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_Content) property should define the Floating Action Button style for the users of assistive technologies such as screen readers.
+N> Predefined Floating Action Button styles provide only visual indication. So, Floating Action Button [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_Content) property should define the Floating Action Button style for the users of assistive technologies such as screen readers.
 
 ## Styles customization
 
-To modify the Floating Action Button appearance, you need to override the default CSS of Floating Action Button component. Please find the list of CSS classes and its corresponding section in Floating Action Button component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/).
+To modify the FAB appearance beyond predefined styles, override the component’s default CSS. The following CSS classes map to common styling scenarios. You can also create a custom theme using the [Theme Studio](https://blazor.syncfusion.com/themestudio).
 
 | CSS Class | Purpose of Class |
 |-----|----- |
-|.e-fab.e-btn|To customize the FAB.|
-|.e-fab.e-btn:hover|To customize the FAB on hover.|
-|.e-fab.e-btn:focus|To customize the FAB on focus.|
-|.e-fab.e-btn:active|To customize the FAB on active.|
-|.e-fab .e-btn-icon|To customize the style of FAB icon.|
+| .e-fab.e-btn | Customize the FAB. |
+| .e-fab.e-btn:hover | Customize the FAB on hover. |
+| .e-fab.e-btn:focus | Customize the FAB on focus. |
+| .e-fab.e-btn:active | Customize the FAB on active state. |
+| .e-fab .e-btn-icon | Customize the style of the FAB icon. |
 
 ## Show text on hover
 
-By using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass), you can customize the Floating Action Button to show text on hover with applied transition effect.
+By using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass), customize the Floating Action Button to show text on hover with applied transition effect.
 
 ```csharp
 
diff --git a/blazor/gantt-chart/editing-tasks.md b/blazor/gantt-chart/editing-tasks.md
index 64d9fc1dd9..f568747584 100644
--- a/blazor/gantt-chart/editing-tasks.md
+++ b/blazor/gantt-chart/editing-tasks.md
@@ -444,4 +444,4 @@ Update tasks programmatically using the [UpdateRecordByIDAsync](https://help.syn
 ## See also
 - [How to add new tasks?](https://blazor.syncfusion.com/documentation/gantt-chart/adding-new-tasks)
 - [How to manage task dependencies?](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
-- [How to configure critical path?](https://blazor.syncfusion.com/documentation/gantt-chart/criticalpath)
\ No newline at end of file
+- [How to configure critical path?](https://blazor.syncfusion.com/documentation/gantt-chart/criticalpath)
diff --git a/blazor/gantt-chart/event-markers.md b/blazor/gantt-chart/event-markers.md
index 1a274bdf67..98288c19ea 100644
--- a/blazor/gantt-chart/event-markers.md
+++ b/blazor/gantt-chart/event-markers.md
@@ -98,4 +98,4 @@ The following implementation demonstrates event marker integration within a Gant
 
 * [Display Striplines in Blazor Gantt](https://www.syncfusion.com/forums/175385/display-striplines-in-blazor-gantt)
 
-N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
\ No newline at end of file
+N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
diff --git a/blazor/gantt-chart/filtering.md b/blazor/gantt-chart/filtering.md
index 41a314c224..56ae25971a 100644
--- a/blazor/gantt-chart/filtering.md
+++ b/blazor/gantt-chart/filtering.md
@@ -778,4 +778,4 @@ The following `Filtering` event cancels the filter action for the **TaskName** c
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCDDyykKaWddG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByCDDyykKaWddG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-combine-cells.png b/blazor/gantt-chart/images/blazor-gantt-chart-combine-cells.png
deleted file mode 100644
index 2a338984c1..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-combine-cells.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-zooming-levels.gif b/blazor/gantt-chart/images/blazor-gantt-chart-custom-zooming-levels.gif
deleted file mode 100644
index 5798330266..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-zooming-levels.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-default-toolbar.png b/blazor/gantt-chart/images/blazor-gantt-chart-default-toolbar.png
deleted file mode 100644
index 4096657ac4..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-default-toolbar.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-in-chart.png b/blazor/gantt-chart/images/blazor-gantt-chart-editing-in-chart.png
deleted file mode 100644
index 8abb5acdb2..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-editing-in-chart.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-enable-toolbar.png b/blazor/gantt-chart/images/blazor-gantt-chart-enable-toolbar.png
deleted file mode 100644
index d316fa9441..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-enable-toolbar.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-event-markers.png b/blazor/gantt-chart/images/blazor-gantt-chart-event-markers.png
deleted file mode 100644
index 4721e6cb6b..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-event-markers.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-month-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-month-mode.png
deleted file mode 100644
index 3b04dd2196..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-month-mode.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-time-line-width.png b/blazor/gantt-chart/images/blazor-gantt-chart-time-line-width.png
deleted file mode 100644
index 7621982feb..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-time-line-width.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-top-bottom-tier.png b/blazor/gantt-chart/images/blazor-gantt-chart-top-bottom-tier.png
deleted file mode 100644
index a10d610793..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-top-bottom-tier.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-custom-toolbar.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-custom-toolbar.png
deleted file mode 100644
index f0efb5f59e..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-custom-toolbar.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-zooming-reset.gif b/blazor/gantt-chart/images/blazor-gantt-chart-zooming-reset.gif
deleted file mode 100644
index f2f5c8641d..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-zooming-reset.gif and /dev/null differ
diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-zooming.png b/blazor/gantt-chart/images/blazor-gantt-chart-zooming.png
deleted file mode 100644
index e290dfadb5..0000000000
Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-zooming.png and /dev/null differ
diff --git a/blazor/gantt-chart/images/customToolbar.png b/blazor/gantt-chart/images/customToolbar.png
deleted file mode 100644
index 30b3ee1e73..0000000000
Binary files a/blazor/gantt-chart/images/customToolbar.png and /dev/null differ
diff --git a/blazor/gantt-chart/row-selection.md b/blazor/gantt-chart/row-selection.md
index ccc2a86569..7a22422729 100644
--- a/blazor/gantt-chart/row-selection.md
+++ b/blazor/gantt-chart/row-selection.md
@@ -468,4 +468,4 @@ To access selected row details in the Blazor Gantt Chart component:
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhyCXWeRNkmGqpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhyCXWeRNkmGqpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/gantt-chart/tool-bar.md b/blazor/gantt-chart/tool-bar.md
index 047967f9c6..a3a03405f9 100644
--- a/blazor/gantt-chart/tool-bar.md
+++ b/blazor/gantt-chart/tool-bar.md
@@ -319,4 +319,4 @@ You can control toolbar items dynamically using the [EnableItems](https://help.s
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLyiDLTLJawoAQK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
\ No newline at end of file
+N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md
index 7a1b1f40e5..6aad51772a 100644
--- a/blazor/getting-started/blazor-web-app.md
+++ b/blazor/getting-started/blazor-web-app.md
@@ -46,7 +46,7 @@ Configure the appropriate [Interactive render mode](https://learn.microsoft.com/
 
 ### Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid and Themes NuGet in the Blazor Web App
 
-To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
 If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
@@ -241,7 +241,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ### Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` component, as follows:
 
 <table style="width:100%">
 <tr>
diff --git a/blazor/in-place-editor/accessibility.md b/blazor/in-place-editor/accessibility.md
index 4ec4f3c8f7..982738e2f2 100644
--- a/blazor/in-place-editor/accessibility.md
+++ b/blazor/in-place-editor/accessibility.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor In-place editor component
 
-The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor In-place editor component is outlined below.
+The accessibility compliance for the Blazor In-place Editor component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirements"> |
 
 <style>
     .post .post-content img {
@@ -30,26 +30,26 @@ The accessibility compliance for the Blazor In-place editor component is outline
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets all requirements"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirements"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Does not meet requirements"> - The component does not meet the requirement.</div>
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor In-place editor without interruptions:
+Use the following key shortcuts to operate the Blazor In-place Editor efficiently with a keyboard:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Helps in focusing the Inplace editor on the page and switching between the consecutive Inplace editor bars. |
-| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Helps in focusing the previous Inplace editor bar element on the Inplace editor. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Move focus to the In-place Editor on the page and navigate forward between consecutive In-place Editor instances. |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus to the previous In-place Editor instance or to the previous focusable element. |
 
 ## Ensuring accessibility
 
 The Blazor In-place editor component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
 
-The accessibility compliance of the Inplace editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/inplace-editor) in a new window to evaluate the accessibility of the Inplace editor component with accessibility tools.
+The accessibility compliance of the In-place Editor component is shown in the following sample. Open the sample (https://blazor.syncfusion.com/accessibility/inplace-editor) in a new window to evaluate the accessibility of the In-place Editor component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/in-place-editor/buttons.md b/blazor/in-place-editor/buttons.md
index fcc0ea8aa8..a9ad0c7e28 100644
--- a/blazor/in-place-editor/buttons.md
+++ b/blazor/in-place-editor/buttons.md
@@ -3,7 +3,7 @@ layout: post
 title: Buttons in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Buttons in Syncfusion Blazor In-place Editor component and much more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor
 documentation: ug
 ---
 
diff --git a/blazor/in-place-editor/configuration.md b/blazor/in-place-editor/configuration.md
index c4a1ee580c..d2a2755f54 100644
--- a/blazor/in-place-editor/configuration.md
+++ b/blazor/in-place-editor/configuration.md
@@ -3,7 +3,7 @@ layout: post
 title: Configuration in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Configuration in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor
 documentation: ug
 ---
 
@@ -11,18 +11,17 @@ documentation: ug
 
 ## Rendering modes
 
-This section explains the supported rendering modes of the In-place Editor. The possible Rendering modes are:
+This section explains the supported rendering modes of the In-place Editor. Supported rendering modes:
 
-* Popup
-* Inline
+- Popup
+- Inline
 
-N> By default, `Inline` mode will be rendered when opening an editor.
+N> Inline mode is the default when the editor opens.
 
-* For `Popup` mode, the editable container displays as like tooltip or popover above the element.
+- Popup mode displays the editable container like a tooltip or popover above the target element.
+- Inline mode replaces the element with the editable container. To open the editor in Inline mode, set Mode to Inline.
 
-* For `Inline` mode, the editable container displays instead of the element. To render `Inline` mode while opening the editor, specify `Mode` as `Inline`.
-
-In the following code block, the In-place Editor renders with `Inline` mode. You can dynamically switch into another mode by changing the drop-down item value.
+In the following example, the In-place Editor renders in Inline mode. The rendering mode can be switched dynamically by changing the drop-down value.
 
 ```cshtml
 
@@ -96,11 +95,11 @@ In the following code block, the In-place Editor renders with `Inline` mode. You
 
 ```
 
-### Pop-up customization
+### Popup customization
 
-In-place Editor popup mode can be customized by using the `InPlaceEditorPopupSettings` tag.
+Popup mode can be customized by using the `InPlaceEditorPopupSettings` tag.
 
-Popup mode is rendered by using the Blazor Tooltip component, so you can use the tooltip properties and events to customize the behavior of popup via the `InPlaceEditorPopupSettings` by configuring tooltip properties.
+Popup mode is rendered using the Blazor Tooltip component, so tooltip properties and events can be used to customize popup behavior through `InPlaceEditorPopupSettings` by configuring tooltip properties
 
 N> For more details, refer to the tooltip documentation [section](../tooltip/getting-started-webapp).
 
@@ -109,11 +108,11 @@ N> For more details, refer to the tooltip documentation [section](../tooltip/get
 The event action of the editor will be enabled in the edit mode based on the `EditableOn` property. By default, `Click` is enabled.
 The following options are also supported:
 
-* **Click**: The editor will be opened on single-click actions.
-* **DoubleClick**: The editor will be opened on double-click actions and it is not applicable for the edit icon.
-* **EditIconClick**: Disables the editing of event action of input and allows the users to edit only through edit icon.
+* **Click**:  Opens the editor on a single click.
+* **DoubleClick**: Opens the editor on a double click. This option does not apply to the edit icon.
+* **EditIconClick**: Disables input-triggered editing and allows editing only through the edit icon.
 
-N> In-place Editor gets focus by pressing the `tab` key from the previous focusable DOM element. The editor can be opened by pressing the `enter` key.
+N> The In-place Editor receives focus by pressing the Tab key from the previous focusable element. Press `Enter`to open the editor.
 
 In the following code block, when switching the drop-down item, the selected value is assigned to the `EditableOn` property. The editor will be opened when you double click on the input.
 
@@ -206,14 +205,13 @@ In the following code block, when switching the drop-down item, the selected val
 
 ## Action on focus out
 
-Action will be performed when the user clicks outside the container. That means, focusing out of the editable content can be handled by the `ActionOnBlur` property. By default,  `Submit` is enabled.
-It also has the following options.
+An action can be performed when clicking outside the editor container. This is controlled by the ActionOnBlur property. By default, Submit is enabled. The following options are supported:
 
-* **Cancel**: Cancels the editing and resets the old content.
-* **Submit**: Submits the edited content to the server.
-* **Ignore**: No action will be performed with this type.
+- Cancel: Cancels editing and restores the previous content.
+- Submit: Saves the edited content.
+- Ignore: Performs no action.
 
-In the following code block, when switching drop-down items, the selected value is assigned to the `ActionOnBlur` property.
+In the following example, the selected drop-down value is assigned to ActionOnBlur.
 
 ```cshtml
 @using Syncfusion.Blazor.InPlaceEditor
@@ -301,7 +299,7 @@ In the following code block, when switching drop-down items, the selected value
 
 By default, the In-place Editor input element is highlighted with a dotted underline. To remove dotted underline from input element, add `{"data-underline", "false" }` attribute at In-place Editor root element.
 
-The following code block indicates the intractable and normal display modes with different examples.
+The following example shows interactive and normal display modes.
 
 ```cshtml
 
@@ -365,7 +363,7 @@ The following code block indicates the intractable and normal display modes with
 
 ```
 
-![Blazor In-place Editor Text with Underline](./images/blazor-inplace-editor-text-with-under-line.png)
+![Blazor In-place Editor text with underline](./images/blazor-inplace-editor-text-with-under-line.png)
 
 ## See Also
 
diff --git a/blazor/in-place-editor/controls.md b/blazor/in-place-editor/controls.md
index d04fc6d571..78af4749bf 100644
--- a/blazor/in-place-editor/controls.md
+++ b/blazor/in-place-editor/controls.md
@@ -3,15 +3,15 @@ layout: post
 title: List of Components in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about List of Components in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # List of Components in Blazor In-place Editor Component
 
-In-place Editor renders various components based on the `Type` property and the Editor components should be rendered inside the In-place Editor. Also, the two-way binding between the In-place Editor and its EditorComponent needs to be configured. It is used to update the EditorComponent value into the In-place Editor component.
+The In-place Editor renders different editor components based on the `Type` property. Each editor component must be placed inside the In-place Editor and configured with two-way data binding between the In-place Editor and the embedded editor component to keep values in sync.
 
-The following table explains Editor components name and their configurations.
+The following table lists the supported editor components and their corresponding Type values.
 
 | [AutoComplete](../autocomplete/getting-started)  (`AutoComplete`)        | [TextBox](../textbox/getting-started)  (`Text`)             |
 | [ComboBox](../combobox/getting-started)  (`ComboBox`)              | [DatePicker](../datepicker/getting-started)  (`Date`)        |
diff --git a/blazor/in-place-editor/data-binding.md b/blazor/in-place-editor/data-binding.md
index a8d9573c17..5256152093 100644
--- a/blazor/in-place-editor/data-binding.md
+++ b/blazor/in-place-editor/data-binding.md
@@ -3,7 +3,7 @@ layout: post
 title: Data Binding in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Data Binding in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
diff --git a/blazor/in-place-editor/events.md b/blazor/in-place-editor/events.md
index 9936ff5485..896d8c4483 100644
--- a/blazor/in-place-editor/events.md
+++ b/blazor/in-place-editor/events.md
@@ -3,17 +3,17 @@ layout: post
 title: Events in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Events in Syncfusion Blazor In-place Editor component and much more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor  
 documentation: ug
 ---
 
 # Events in Blazor In-place Editor Component
 
-This section explains the list of events of the In-place Editor's component which will be triggered for appropriate In-place Editor's actions.
+This section describes the events available in the In-place Editor component and when they are raised during typical actions. The events include: Created, OnActionBegin, OnActionSuccess, OnActionFailure, ValueChange, and Destroyed.
 
 ## Created
 
-`Created` event triggers once the component rendering is completed.
+`Created` event is raised after the component has completed rendering.
 
 ```cshtml
 
@@ -34,7 +34,7 @@ This section explains the list of events of the In-place Editor's component whic
 
 ## OnActionBegin
 
-`OnActionBegin` event triggers before the data submitted to the server.
+`OnActionBegin` event is raised before data is submitted to the server as part of a save/update action. Use this event for preprocessing tasks such as validation or modifying the request.
 
 ```cshtml
 
@@ -55,7 +55,7 @@ This section explains the list of events of the In-place Editor's component whic
 
 ## OnActionSuccess
 
-`OnActionSuccess` event triggers when data is submitted successfully to the server.
+`OnActionSuccess` event is raised when data is successfully submitted to the server and a successful response is received.
 
 ```cshtml
 
@@ -76,7 +76,7 @@ This section explains the list of events of the In-place Editor's component whic
 
 ## OnActionFailure
 
-`OnActionFailure` event triggers when data submission failed.
+`OnActionFailure` event is raised when a data submission fails.
 
 ```cshtml
 
@@ -97,7 +97,7 @@ This section explains the list of events of the In-place Editor's component whic
 
 ## ValueChange
 
-`ValueChange` event triggers when the integrated component value has changed that render based on the `type` property in the In-place editor.
+`ValueChange` event is raised when the value of the integrated editor changes, regardless of the editor rendered via the `Type` property.
 
 ```cshtml
 
@@ -118,7 +118,7 @@ This section explains the list of events of the In-place Editor's component whic
 
 ## Destroyed
 
-`Destroyed` event  triggers when the component gets destroyed.
+`Destroyed` event is raised when the component is disposed.
 
 ```cshtml
 
diff --git a/blazor/in-place-editor/getting-started-with-web-app.md b/blazor/in-place-editor/getting-started-with-web-app.md
index 637f4de379..ef64c67c0c 100644
--- a/blazor/in-place-editor/getting-started-with-web-app.md
+++ b/blazor/in-place-editor/getting-started-with-web-app.md
@@ -11,7 +11,7 @@ documentation: ug
 
 # Getting Started with Blazor In-place Editor Component in Web App
 
-This section briefly explains about how to include [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -23,15 +23,17 @@ This section briefly explains about how to include [Blazor In-place Editor](http
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InPlaceEditor and Themes NuGet in the Blazor Web App
 
-To add **Blazor In-place Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor In-place Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -44,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -56,9 +58,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -72,11 +74,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InPlaceEditor and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -94,20 +94,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InPlaceEditor and Themes NuGet in the App
+
+Here's an example of how to add **Blazor In-place Editor** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.InPlaceEditor --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace.
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -118,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InPlaceEditor` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -154,27 +205,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -195,16 +225,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -242,9 +271,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-N> The type of component editor must be configured in the 'Type' Editor In-place property. Also, the two-way binding between the In-place Editor and its EditorComponent should be configured. It's used to update the editor component value into the In-place Editor component.
+N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) when using non-default editors (for example, `DropDownList`, `Date`, or `AutoComplete`). Configure two-way binding between the In-place Editor and its editor component to synchronize values.
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %}
 
@@ -306,7 +335,7 @@ The following code explains how to initialize a simple In-place Editor with popu
 
 ## Configuring DropDownList
 
-You can render the Blazor DropDownList by changing the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) property as `DropDownList` and configuring the `DropDownList` component inside the Editor component.
+Render the Blazor DropDownList by changing the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) property to `DropDownList` and configuring the `DropDownList` component inside the editor component.
 
 {% tabs %}
 {% highlight razor %}
@@ -349,7 +378,7 @@ You can render the Blazor DropDownList by changing the [Type](https://help.syncf
 
 ## Integrate DatePicker
 
-You can render the Blazor `DatePicker` by changing the `Type` property as `Date` and configuring the `DatePicker` component inside the Editor component. Also, configure its properties directly in the `Datepicker` component.
+Render the Blazor `DatePicker` by changing the `Type` property to `Date` and configuring the `DatePicker` component inside the editor component. Also configure its properties directly on the `DatePicker` component.
 
 {% tabs %}
 {% highlight razor %}
@@ -464,19 +493,18 @@ In the following code, it is configured to render the `DatePicker`, `DropDownLis
 
 ## Submitting data to the server (save)
 
-You can submit editor value to the server by configuring the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_SaveUrl), [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Adaptor) and [PrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_PrimaryKey) properties.
+Submit the editor value to the server by configuring the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_SaveUrl), [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Adaptor), and [PrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_PrimaryKey) properties.
 
 | Property   | Usage                                           |
 |------------|---------------------------------------------------------|
-| **`SaveUrl`**        | Gets the URL for server submit action.        |
-| **`Adaptor`**    | Specifies the adaptor type that is used by DataManager to communicate with DataSource.                |
-| **`PrimaryKey`** | Defines the unique primary key of editable field which can be used for saving data in the data-base.|
-
-> The `PrimaryKey` property is mandatory. If it is not set, edited data are not sent to the server.
+| **`SaveUrl`**        | Gets the URL for the server submit action.        |
+| **`Adaptor`**    | Specifies the adaptor type used by DataManager to communicate with the data source.                |
+| **`PrimaryKey`** | Defines the unique primary key of the editable field used for saving data in the database. |
 
+> The `PrimaryKey` property is mandatory. If it is not set, edited data are not sent to the server.
 ## Refresh Blazor In-place Editor with modified value
 
-The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.
+After submit, the edited data is sent to the server, and the updated value is reflected in the In-place Editor.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/in-place-editor/getting-started.md b/blazor/in-place-editor/getting-started.md
index 87b1f57647..fbe8100475 100644
--- a/blazor/in-place-editor/getting-started.md
+++ b/blazor/in-place-editor/getting-started.md
@@ -3,7 +3,7 @@ layout: post
 title: Getting Started with Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn about getting started with Blazor In-place Editor component in Blazor WebAssembly Application.
 platform: Blazor
-control: In Place Editor
+control: In-place Editor
 documentation: ug
 ---
 
@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor In-place Editor Component
 
-This section briefly explains about how to include [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the [Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with the Blazor In-place Editor in a Blazor WebAssembly app, watch the following video or explore the [GitHub](https://github.com/SyncfusionExamples/how-to-add-a-blazor-in-place-editor-to-a-blazor-webassembly-app) sample:
+To get started quickly with the Blazor In-place Editor in a Blazor WebAssembly app, watch the following video or explore the [GitHub sample](https://github.com/SyncfusionExamples/how-to-add-a-blazor-in-place-editor-to-a-blazor-webassembly-app):
 
 {% youtube "youtube:https://www.youtube.com/watch?v=yv5TvEjdjBM"%}
 
@@ -27,11 +27,11 @@ To get started quickly with the Blazor In-place Editor in a Blazor WebAssembly a
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly app** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InPlaceEditor and Themes NuGet in the App
 
-To add **Blazor In-place Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor In-place Editor** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -54,9 +54,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly app** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly app using the following commands in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -72,8 +72,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor InPlaceEditor and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.InPlaceEditor](https://www.nuget.org/packages/Syncfusion.Blazor.InPlaceEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -95,7 +95,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.InPlaceEditor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.InPlaceEditor`, and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor`, `Syncfusion.B
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -140,11 +140,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See the [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes. Also see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) for guidance on adding script references in a Blazor application.
 
 ## Add Blazor In-Place Editor component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor In-place Editor component to the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -179,11 +179,11 @@ N> The type of component editor must be configured in the 'Type' Editor In-place
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %}
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor).
+N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor).
 
 ## Render Blazor In-place Editor with popup
 
-The following code explains how to initialize a simple In-place Editor with popup in the Blazor page.
+The following example shows how to initialize a simple In-place Editor with a popup in a Blazor page.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -237,7 +237,7 @@ The following code explains how to initialize a simple In-place Editor with popu
 
 ## Configuring DropDownList
 
-You can render the Blazor DropDownList by changing the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) property as `DropDownList` and configuring the `DropDownList` component inside the Editor component.
+Render the Blazor DropDownList by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Type) property to `DropDownList` and configuring the `DropDownList` component inside the editor component.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -280,7 +280,7 @@ You can render the Blazor DropDownList by changing the [Type](https://help.syncf
 
 ## Integrate DatePicker
 
-You can render the Blazor `DatePicker` by changing the `Type` property as `Date` and configuring the `DatePicker` component inside the Editor component. Also, configure its properties directly in the `Datepicker` component.
+Render the Blazor `DatePicker` by setting the `Type` property to `Date` and configuring the `DatePicker` component inside the editor component. Configure its properties directly on the `DatePicker` component as needed.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -302,7 +302,7 @@ You can render the Blazor `DatePicker` by changing the `Type` property as `Da
 {% endhighlight %}
 {% endtabs %}
 
-In the following code, it is configured to render the `DatePicker`, `DropDownList` and `Textbox` components.
+In the following code, the `DatePicker`, `DropDownList`, and `TextBox` components are configured.
 
 {% tabs %}
 {% highlight cshtml %}
@@ -395,19 +395,19 @@ In the following code, it is configured to render the `DatePicker`, `DropDownLis
 
 ## Submitting data to the server (save)
 
-You can submit editor value to the server by configuring the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_SaveUrl), [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Adaptor) and [PrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_PrimaryKey) properties.
+Submit the editor value to the server by configuring the [SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_SaveUrl), [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_Adaptor), and [PrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_PrimaryKey) properties.
 
 | Property   | Usage                                           |
 |------------|---------------------------------------------------------|
-| **`SaveUrl`**        | Gets the URL for server submit action.        |
-| **`Adaptor`**    | Specifies the adaptor type that is used by DataManager to communicate with DataSource.                |
-| **`PrimaryKey`** | Defines the unique primary key of editable field which can be used for saving data in the data-base.|
+| **`SaveUrl`**        | Gets the URL for the server submit action.        |
+| **`Adaptor`**    | Specifies the adaptor type used by DataManager to communicate with the data source.                |
+| **`PrimaryKey`** | Defines the unique primary key of the editable field used for saving data in the database.|
 
-> The `PrimaryKey` property is mandatory. If it is not set, edited data are not sent to the server.
+> The `PrimaryKey` property is mandatory. If it is not set, edited data are not sent to the server.
 
 ## Refresh Blazor In-place Editor with modified value
 
-The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.
+After submission, the edited data is sent to the server, and the updated value is reflected in the In-place Editor.
 
 {% tabs %}
 {% highlight cshtml %}
diff --git a/blazor/in-place-editor/how-to/custom-animation.md b/blazor/in-place-editor/how-to/custom-animation.md
index ee725dd9a8..3fd4ef6e7f 100644
--- a/blazor/in-place-editor/how-to/custom-animation.md
+++ b/blazor/in-place-editor/how-to/custom-animation.md
@@ -3,7 +3,7 @@ layout: post
 title: Custom Animation for popup in Blazor In-place Editor | Syncfusion
 description: Learn here all about setting custom animation for popup mode in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor
 documentation: ug
 ---
 
@@ -11,7 +11,7 @@ documentation: ug
 
 In popup mode, the In-place Editor is rendered with the Blazor `Tooltip` component. You can use the tooltip properties and events to customize the popup by configuring properties using the `InPlaceEditorPopupSettings` tag.
 
-In the following example, popup animation can be customized by passing animation effect using the `InPlaceEditorPopupSettings` tag and the dynamic animation effect changes configured from the Blazor `DropDownList` component `ValueChange` event.
+In the following example, the popup’s open animation is configured by passing an AnimationModel to the InPlaceEditorPopupSettings tag, and the animation effect is updated at runtime from a Blazor DropDownList ValueChange event. Supported effects include None, FadeIn, FadeZoomIn, and ZoomIn as shown. Close animations can also be customized by setting the Close property on TooltipAnimationSettings. If a selected value does not match a valid Effect, parsing will fail; ensure the dropdown values match the Effect enum exactly. Consider accessibility preferences such as reduced motion when applying animations.
 
 ```cshtml
 
diff --git a/blazor/in-place-editor/how-to/disable-edit-mode.md b/blazor/in-place-editor/how-to/disable-edit-mode.md
index 0e8ee8a75b..5687cc3b00 100644
--- a/blazor/in-place-editor/how-to/disable-edit-mode.md
+++ b/blazor/in-place-editor/how-to/disable-edit-mode.md
@@ -3,7 +3,7 @@ layout: post
 title: Disable the edit mode in Blazor In-place Editor Component | Syncfusion
 description: Learn here all about Disable the edit mode specifically in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor
 documentation: ug
 ---
 
diff --git a/blazor/in-place-editor/how-to/dynamic-edit-mode.md b/blazor/in-place-editor/how-to/dynamic-edit-mode.md
index 89e9629424..201ded2fc7 100644
--- a/blazor/in-place-editor/how-to/dynamic-edit-mode.md
+++ b/blazor/in-place-editor/how-to/dynamic-edit-mode.md
@@ -3,13 +3,13 @@ layout: post
 title: Dynamically move In-place Editor to edit mode in Blazor | Syncfusion
 description: Learn here all about dynamically moving input to edit mode in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor
 documentation: ug
 ---
 
 # Dynamically Move In-place Editor to Edit Mode in Blazor
 
-At component initial load, you can open the editor state without interacting with the In-place Editor input element by configuring the `EnableEditMode` property to `true`.
+At component initialization, the In-place Editor can enter edit mode without user interaction by setting the EnableEditMode property to true. By default, EnableEditMode is false. When true, the editor opens programmatically at initial render and can also be toggled at runtime. This differs from the standard user-triggered behavior (click or focus) by immediately presenting the editor for input on page load.
 
 In the following example, editor opened at initial load and when toggling a checkbox, it will remove or open the editor.
 
diff --git a/blazor/in-place-editor/integration.md b/blazor/in-place-editor/integration.md
index 36c7e032ed..419166f13f 100644
--- a/blazor/in-place-editor/integration.md
+++ b/blazor/in-place-editor/integration.md
@@ -3,13 +3,13 @@ layout: post
 title: Integrate HTML5 Components in Blazor In-place Editor | Syncfusion
 description: Learn here all about Integrate HTML5 Components in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # Integrate HTML5 Components in Blazor In-place Editor Component
 
-The In-place Editor supports adding HTML5 input components using the `InPlaceEditorTemplate` property. The Template property can be given as follows.
+The In-place Editor supports integrating custom HTML5 input elements by using the `InPlaceEditorTemplate` property. The Template property can be given as follows.
 
 ```cshtml
 <InPlaceEditorTemplate>
@@ -20,7 +20,7 @@ The In-place Editor supports adding HTML5 input components using the `InPlaceEdi
 
 In Template mode, the `Value` property cannot be handled by the In-place Editor component. So, before sending a value to the server, you need to modify the `OnActionSuccess` event, otherwise, an empty string will be passed.
 
-In the following template sample, before submitting data to the server, the event argument and `Value` property contents are updated in the `OnActionSuccess` event handler.
+In the following template example, the input is bound and, before submitting data to the server, the event argument and `Value` are updated in the `OnActionSuccess` event handler.
 
 ```cshtml
 
@@ -68,7 +68,7 @@ In the following template sample, before submitting data to the server, the even
 ```
 
 
-![Integrating HTML Template in Blazor In-place Editor](./images/blazor-inplace-editor-html-template.png)
+![Integrating an HTML template in Blazor In-place Editor](./images/blazor-inplace-editor-html-template.png)
 
 ## See Also
 
diff --git a/blazor/in-place-editor/localization.md b/blazor/in-place-editor/localization.md
index e04533fb63..36dce59d14 100644
--- a/blazor/in-place-editor/localization.md
+++ b/blazor/in-place-editor/localization.md
@@ -3,19 +3,21 @@ layout: post
 title: Globalization in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Globalization in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # Globalization in Blazor In-place Editor Component
 
+This topic explains how to globalize the In-place Editor, including localizing UI text, enabling right-to-left (RTL) layout, and applying culture-aware formatting.
+
 ## Localization
 
-[Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+[Blazor In-place Editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) supports localization. To localize component text (such as tooltips and buttons), follow the guidance in [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization).
 
 ## Right to left
 
-Specifies the direction of the In-place Editor component using the `EnableRtl` property. For writing systems that requires Arabic, Hebrew, and more. The direction can be switched to right-to-left.
+Specify the direction of the In-place Editor using the `EnableRtl` property. Use RTL layout for right-to-left languages such as Arabic, Hebrew, and Farsi. The layout direction can be switched to right-to-left independently of the current locale.
 
 > It will not change based on the locale property.
 
@@ -43,19 +45,18 @@ Specifies the direction of the In-place Editor component using the `EnableRtl` p
 
 ```
 
-
 ![Right to Left in Blazor In-place Editor](./images/blazor-inplace-editor-right-to-left.png)
 
 ## Format
 
-Formatting is a way of representing the value in different formats. You can format the following mentioned components with its `format` property when it is directly configured in the Editor component.
+Formatting is a way of representing the value in different formats. Format the following mentioned components with its `format` property when it is directly configured in the Editor component.
 
-* [DatePicker](../datepicker/date-format/)
-* [DateRangePicker](../daterangepicker/globalization/)
-* [DateTimePicker](../datetime-picker/globalization/)
-* [NumericTextBox](../numeric-textbox/formats/#custom-formats)
-* [Slider](../range-slider/format/)
-* [TimePicker](../timepicker/globalization/)
+* [DatePicker](../datepicker/date-format)
+* [DateRangePicker](../daterangepicker/globalization)
+* [DateTimePicker](../datetime-picker/globalization)
+* [NumericTextBox](../numeric-textbox/formats)
+* [Slider](../range-slider/format)
+* [TimePicker](../timepicker/globalization)
 
 ```cshtml
 
@@ -81,5 +82,4 @@ Formatting is a way of representing the value in different formats. You can form
 
 ```
 
-
 ![Formatting in Blazor In-place Editor](./images/blazor-inplace-editor-formatting.png)
\ No newline at end of file
diff --git a/blazor/in-place-editor/server-actions.md b/blazor/in-place-editor/server-actions.md
index da1c74f6df..960519f3fc 100644
--- a/blazor/in-place-editor/server-actions.md
+++ b/blazor/in-place-editor/server-actions.md
@@ -3,24 +3,24 @@ layout: post
 title: Server Actions in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Server Actions in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # Server Actions in Blazor In-place Editor Component
 
-When sending the In-place Editor component value to a remote server, the `PrimaryKey` property value is required. Otherwise, the action will not be performed.
+When posting the In-place Editor value to a remote server, the `PrimaryKey` property is required to identify the record on the server. Without a `PrimaryKey`, the save action is not performed.
 
-If the `SaveURL` property value is empty, data changes will be handled locally. The `OnActionSuccess` event will trigger with `null` as the argument value.
+If the `SaveUrl` property is not set, data changes are handled locally by the component. In this case, the `OnActionSuccess` event still fires, but the event argument value is `null` because no server response is available.
 
-N> The following arguments are passed to the server when the submit actions are performed.
+N> The following arguments are sent to the server when a submit action is performed.
 
-| Arguments  | Explanations                                              |
+| Arguments  | Explanation                                              |
 |------------|-----------------------------------------------------------|
-| Value      | For processing edited value, like DB value updating.      |
-| PrimaryKey | For value mapping to the server, like selecting DB.       |
+| Value      | The edited value used for updating the data store.       |
+| PrimaryKey | The unique identifier used to map the edited value to a record. |
 
-Find the following sample server codes for defining models and controller functions to configure processing data.
+Find the following sample server code for defining models and controller functions to configure processing data.
 
 ```csharp
 public class SubmitModel
@@ -41,11 +41,10 @@ public IEnumerable<SubmitModel> UpdateData([FromBody]SubmitModel value)
 
 ```
 
-* Server actions successfully done, the `OnActionSuccess` event will be fired with returned server data.
+- When the server action completes successfully, the `OnActionSuccess` event is triggered with the returned server data.
+- If the server request fails (for example, network error or non-success status code), the `OnActionFailure` event is triggered. In this case, the value in the editor is not updated.
 
-* If the server is not responding, the `OnActionFailure` event will be fired with data, but value not updated in the Editor.
-
-In the following sample, the `OnActionSuccess` event will trigger once the value submitted successfully into the server.
+In the following sample, the `OnActionSuccess` event is triggered after the value is successfully submitted to the server.
 
 ```csharp
 
@@ -113,4 +112,4 @@ In the following sample, the `OnActionSuccess` event will trigger once the value
 }
 
 
-```
+```
\ No newline at end of file
diff --git a/blazor/in-place-editor/style.md b/blazor/in-place-editor/style.md
index ba83cc5890..4ea4fe064a 100644
--- a/blazor/in-place-editor/style.md
+++ b/blazor/in-place-editor/style.md
@@ -3,21 +3,21 @@ layout: post
 title: Style and appearance in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about style and appearance in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # Style and Appearance in Blazor In-place Editor Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following guidance shows the CSS selectors that can be used to customize the control’s appearance to match application branding and user preferences.
 
-To get started quickly with customizing the Blazor In-place Editor, watch the following video or explore the [GitHub](https://github.com/SyncfusionExamples/how-to-customize-the-blazor-in-place-editor-component) sample:
+To get started quickly with customizing the Blazor In-place Editor, watch the following video or explore the [GitHub sample for customizing the Blazor In-place Editor](https://github.com/SyncfusionExamples/how-to-customize-the-blazor-in-place-editor-component):
 
 {% youtube "youtube:https://www.youtube.com/watch?v=YWRsFm32Rso"%}
 
 ## Customizing the In-place Editor text
 
-Use the following CSS to customize the default In-place Editor's text content properties like font-family, font-size, color and border bottom.
+Use the following CSS to customize the default In-place Editor text content, including font family, font size, color, and underline/border. These selectors target the display state of the value before editing.
 
 ```css
 /* To change color, font family and font size */
@@ -31,7 +31,7 @@ Use the following CSS to customize the default In-place Editor's text content pr
 
 ## Customizing the In-place Editor action buttons
 
-Use the following CSS to customize the default In-place Editor's action buttons.
+Use the following CSS to customize the default action buttons (Save and Cancel) shown when the editor is active. These rules target both inline and popup (tip) modes.
 
 ```css
 /* To change icon color for save button */
@@ -60,7 +60,7 @@ Use the following CSS to customize the default In-place Editor's action buttons.
 
 ## Customizing In-place editor outer style like material filled
 
-Use the following CSS to customize the In-place editor outer style like material filled text fields.
+Use the following CSS to customize the outer container of the In-place Editor (for example, to emulate material filled text-field styles), including removing the default underline, changing background, and rounding corners. The overlay icon can also be shown persistently.
 
 ```css
 /* To remove the default bottom underline */
diff --git a/blazor/in-place-editor/validation.md b/blazor/in-place-editor/validation.md
index e386c02cdb..8df4b0f26c 100644
--- a/blazor/in-place-editor/validation.md
+++ b/blazor/in-place-editor/validation.md
@@ -3,19 +3,19 @@ layout: post
 title: Validation in Blazor In-place Editor Component | Syncfusion
 description: Checkout and learn here all about Validation in Syncfusion Blazor In-place Editor component and more.
 platform: Blazor
-control: In Place Editor 
+control: In-place Editor 
 documentation: ug
 ---
 
 # Validation in Blazor In-place Editor Component
 
-Now, validation can be done by using the EditForm validation on the server-side. You need to handle the validation from the application level and the custom validation can also be achieved by using this.
+Validate the In-place Editor by using Blazor EditForm with DataAnnotations. Validation can be handled at the application level, and custom validation logic can also be implemented as needed. This approach works in both Blazor WebAssembly and Blazor Server apps.
 
 To get started quickly with validation in the Blazor In-place Editor, watch the following video or explore the [GitHub](https://github.com/SyncfusionExamples/how-to-validate-a-textbox-in-blazor-in-place-editor-component) sample:
 
 {% youtube "youtube:https://www.youtube.com/watch?v=Pg3hrFZVdyM"%}
 
-Refer to the following link for more details,[EditForm Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0). Validation for the `TextBox` is achieved in the following sample using the EditForm validation with a custom error message and validation rules.
+Refer to the following link for more details, [EditForm Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0). Validation for the `TextBox` is achieved in the following sample using the EditForm validation with a custom error message and validation rules.
 
 ```cshtml
 
diff --git a/blazor/input-mask/accessibility.md b/blazor/input-mask/accessibility.md
index 203f23c65e..a833ab5918 100644
--- a/blazor/input-mask/accessibility.md
+++ b/blazor/input-mask/accessibility.md
@@ -15,14 +15,14 @@ The accessibility compliance for the Blazor MaskedTextBox component is outlined
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> |
 
 <style>
     .post .post-content img {
@@ -30,26 +30,27 @@ The accessibility compliance for the Blazor MaskedTextBox component is outlined
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Fully supported"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially supported"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor MaskedTextBox is characterized with complete ARIA Accessibility support that helps to access using on-screen readers and other assistive technology devices. This component is designed with the reference of the guidelines document given in [WAI ARAI Accessibility practices](https://www.w3.org/WAI/ARIA/apg/).
+The Blazor MaskedTextBox includes comprehensive WAI-ARIA support to ensure compatibility with screen readers and other assistive technologies. This component is designed with reference to the WAI-ARIA Authoring Practices.
 
-The MaskedTextBox uses the `textbox` role and following ARIA properties for its element based on its state.
+The MaskedTextBox uses the textbox role and the following ARIA properties, based on state and configuration:
 
 | **Property** | **Functionality** |
 | --- | --- |
-| aria-live | Indicates the priority of updates to a live region. |
-| aria-disabled | Indicates the disabled state of the MaskedTextBox. |
-| aria-valuenow | Specifies the current value of the MaskedTextBox. |
-| aria-invalid | Indicates that the user input is incorrect or not within the acceptable ranges. |
-| aria-placeholder | It is a short hint to help the users with data entry when the MaskedTextBox has no value. |
-| aria-labelledby | Indicates the floating label element of the MaskedTextBox. |
+| aria-label / aria-labelledby | Provides an accessible name for the MaskedTextBox. |
+| aria-describedby | Associates helper or error text with the MaskedTextBox for screen reader announcement. |
+| aria-invalid | Indicates that the current value fails validation. |
+| aria-required | Indicates that input is required. |
+| aria-disabled | Indicates that the MaskedTextBox is disabled. |
+| aria-readonly | Indicates that the value cannot be changed by the user. |
+| aria-multiline | Indicates whether the textbox supports multiple lines (typically false for MaskedTextBox). |
 
 ## Ensuring accessibility
 
diff --git a/blazor/input-mask/data-binding.md b/blazor/input-mask/data-binding.md
index 0f36fca697..acebe6efe7 100644
--- a/blazor/input-mask/data-binding.md
+++ b/blazor/input-mask/data-binding.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Data Binding in Blazor Input Mask Component
 
-Data binding can be achieved by using the `bind-Value` attribute and it supports string type. If the component value is changed, it will affect all the places where you bind the variable for the **bind-Value** attribute.
+Use the @bind-Value attribute to enable two-way data binding with the MaskedTextBox. The Value parameter is of type string. When the user edits the input, the bound field is updated; when the bound field changes in code, the component reflects the new value. For reference, see SfMaskedTextBox, Value, and Mask in the API, and the Blazor data binding guidance.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -25,7 +25,7 @@ Data binding can be achieved by using the `bind-Value` attribute and it supports
 
 ## Dynamic value binding
 
-You can bind the value to the MaskedTextBox component dynamically for `bind-Value` attribute as mentioned in the following code.
+The value can also be updated programmatically at runtime. Updating the bound field triggers the component to display the new value, as shown in the following example.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/input-mask/events.md b/blazor/input-mask/events.md
index c3d3771c7b..32c982ce66 100644
--- a/blazor/input-mask/events.md
+++ b/blazor/input-mask/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor Input Mask Component
 
-This section explains the list of events of the Input Mask component which will be triggered for appropriate Input Mask actions.
+This section lists the events available in the Blazor Input Mask (MaskedTextBox) component and when they are raised. Use these events to react to focus changes, value updates, and lifecycle moments. For reference, see the SfMaskedTextBox API.
 
 ## Blur
 
-`Blur` event triggers when the Input Mask component has focus-out.
+`Blur` is raised when the component loses focus. See Blur event and MaskBlurEventArgs in the API for details.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -30,7 +30,7 @@ This section explains the list of events of the Input Mask component which will
 
 ## Created
 
-`Created` event triggers when the Input Mask component is created.
+`Created` is raised after the component has been initialized and rendered for the first time.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -47,7 +47,7 @@ This section explains the list of events of the Input Mask component which will
 
 ## Destroyed
 
-`Destroyed` event triggers when the Input Mask component is destroyed.
+`Destroyed` is raised when the component is disposed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -64,7 +64,7 @@ This section explains the list of events of the Input Mask component which will
 
 ## Focus
 
-`Focus` event triggers when the Input Mask gets focus.
+`Focus` is raised when the component receives focus. See Focus event and MaskFocusEventArgs in the API.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -81,7 +81,7 @@ This section explains the list of events of the Input Mask component which will
 
 ## ValueChange
 
-`ValueChange` event triggers when the content of Input Mask has changed and gets focus-out.
+`ValueChange` is raised when the input value changes and the component then loses focus (or commits the change). This is typically used to react to completed edits; for two-way binding, see `ValueChanged`.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -98,8 +98,7 @@ This section explains the list of events of the Input Mask component which will
 
 ## ValueChanged
 
-`ValueChanged` event Specifies the callback to trigger when the value changes.
-
+`ValueChanged` is raised whenever the value changes.
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
@@ -113,4 +112,4 @@ This section explains the list of events of the Input Mask component which will
 }
 ```
 
-N> Input Mask is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
+N> Input Mask currently includes these events. Additional events may be added based on user requests. If a required event is not listed, submit a feature request in the Syncfusion Blazor feedback portal: https://www.syncfusion.com/feedback/blazor-components
\ No newline at end of file
diff --git a/blazor/input-mask/getting-started-with-web-app.md b/blazor/input-mask/getting-started-with-web-app.md
index 5b9cfd002c..249cf5caa9 100644
--- a/blazor/input-mask/getting-started-with-web-app.md
+++ b/blazor/input-mask/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Input Mask Component in Blazor Web App
 
-This section briefly explains about how to include [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor MaskedTextBox](https:
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the Blazor Web App
 
-To add **Blazor MaskedTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor MaskedTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add **Blazor MaskedTextBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,15 +250,15 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrzXsLuJBRJNWJf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MaskedTextBox Component](./images/blazor-maskedtextbox-component.png)" %}
 
 ## Set the mask
 
-You can set the mask to the MaskedTextBox to validate the user input by using the [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Mask) property.
+Set a mask on the MaskedTextBox to validate user input using the [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Mask) property.
 
-The following example demonstrates the usage of mask element `0` that allows any single digit from `0` to `9`.
+The following example demonstrates the mask element `0`, which allows any single digit from `0` to `9`.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/input-mask/getting-started.md b/blazor/input-mask/getting-started.md
index 9e48dedd35..767cd1deb5 100644
--- a/blazor/input-mask/getting-started.md
+++ b/blazor/input-mask/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor Input Mask Component
 
-This section briefly explains about how to include [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor MaskedTextBox](https://www.syncfusion.com/blazor-components/blazor-input-mask) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with Blazor MaskedTextBox component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MaskedTextBox) sample.
+To get started quickly with the Blazor MaskedTextBox component, watch this video or explore the corresponding [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MaskedTextBox) sample.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=QQwInHTmBUY"%}
@@ -26,11 +26,11 @@ To get started quickly with Blazor MaskedTextBox component, you can check on thi
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+C**Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor MaskedTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor MaskedTextBox** component to the app, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,8 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies.
 
 {% tabs %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -105,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -129,7 +129,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of **~/index.html**.
 
 ```html
 <head>
@@ -142,7 +142,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor MaskedTextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component to **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -152,15 +152,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox co
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in your default web browser.
-
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MaskedTextBox component in the default web browser.
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrzXsLuJBRJNWJf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MaskedTextBox Component](./images/blazor-maskedtextbox-component.png)" %}
 
 ## Set the mask
 
-You can set the mask to the MaskedTextBox to validate the user input by using the [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Mask) property.
+Set a mask on the MaskedTextBox to validate user input by using the [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Mask) property.
 
-The following example demonstrates the usage of mask element `0` that allows any single digit from `0` to `9`.
+The following example demonstrates the mask element `0`, which allows any single digit from `0` to `9`.
 
 {% tabs %}
 {% highlight razor %}
@@ -176,4 +175,4 @@ The following example demonstrates the usage of mask element `0` that allows any
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/input-mask/how-to/customize-the-ui-appearance-of-the-control.md b/blazor/input-mask/how-to/customize-the-ui-appearance-of-the-control.md
index 718d29a763..353f28de4e 100644
--- a/blazor/input-mask/how-to/customize-the-ui-appearance-of-the-control.md
+++ b/blazor/input-mask/how-to/customize-the-ui-appearance-of-the-control.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Customize the UI Appearance of the Blazor Input Mask Component
 
-The appearance of the MaskedTextBox can be changed by adding custom [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_CssClass) to the component and enabling styles.
+The appearance of the MaskedTextBox can be customized by assigning a custom CssClass to the component and defining CSS rules for that class. The CssClass is applied to the component wrapper, allowing targeted styling of the wrapper, floating label, and input elements. For reference, see CssClass, Mask, Placeholder, and FloatLabelType properties in the API.
 
-Refer to the following example to change the appearance of the MaskedTextBox.
+The following example demonstrates how to change the appearance of the MaskedTextBox.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -42,4 +42,4 @@ Refer to the following example to change the appearance of the MaskedTextBox.
 </style>
 ```
 
-![MaskedTextBox Sample](../images/customCss.png)
+![Blazor Input Mask with custom CSS applied](../images/customCss.png)
\ No newline at end of file
diff --git a/blazor/input-mask/how-to/maskedtextbox-for-and-model-binding.md b/blazor/input-mask/how-to/maskedtextbox-for-and-model-binding.md
index c8af03b3dd..cccb5d2fd1 100644
--- a/blazor/input-mask/how-to/maskedtextbox-for-and-model-binding.md
+++ b/blazor/input-mask/how-to/maskedtextbox-for-and-model-binding.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Model Binding in Blazor Input Mask Component
 
-This section demonstrates the Strongly typed extension support in MaskedTextBox. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view, access model properties on that view, and use data associated with model to render the component.
+This section demonstrates how to use model binding and validation with the MaskedTextBox in a Blazor EditForm. Bind a model to the form, annotate its properties with data annotations, bind the component’s Value parameter to a model property, and display validation messages when the form is submitted. For reference, see SfMaskedTextBox, Mask, Placeholder, and Value in the API, and the Blazor EditForm and data annotations validation guidance.
 
-In this sample, first click the submit button to post the selected value in the MaskedTextBox. When posting the null value, validation error message will be shown below the MaskedTextBox.
+In this sample, click the submit button to post the value in the MaskedTextBox. When the bound value is null, empty, or otherwise invalid according to data annotations, a validation error message is shown below the MaskedTextBox.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -41,5 +41,4 @@ In this sample, first click the submit button to post the selected value in the
 }
 ```
 
-
-![MaskedTextBox Sample](../images/validation.png)
\ No newline at end of file
+![Blazor Input Mask model binding validation error](../images/validation.png)
\ No newline at end of file
diff --git a/blazor/input-mask/mask-configuration.md b/blazor/input-mask/mask-configuration.md
index 551c818a57..cf04111fe0 100644
--- a/blazor/input-mask/mask-configuration.md
+++ b/blazor/input-mask/mask-configuration.md
@@ -9,32 +9,32 @@ documentation: ug
 
 # Mask Configuration in Blazor Input Mask Component
 
-The [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.MaskedTextBoxModel.html#Syncfusion_Blazor_Inputs_MaskedTextBoxModel_Mask) is a combination of standard and custom mask elements that validates the user input based on its behavior.
+The [Mask](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Mask) is a set of standard and custom elements that validate user input based on defined rules.
 
-N> When the mask value is empty, the MaskedTextBox behaves as an input element with text type.
+N> When the Mask property is not set or is empty, the MaskedTextBox behaves as a text input element.
 
 ## Standard mask elements
 
-The following table shows the list of mask elements and its behavior based on [MSDN](https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.maskedtextbox.mask?view=windowsdesktop-9.0&viewFallbackFrom=net-8.0) standard.
+The following table lists the mask elements and their behavior based on the[MSDN](https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.maskedtextbox.mask?view=windowsdesktop-9.0&viewFallbackFrom=net-8.0) standard.
 
 The mask can be formed by combining any one or more of these mask elements.
 
 | Mask Element | Description |
 | ------------- | ------------- |
-| 0 | Digit required. This element will accept any single digit from **0** to **9**. |
+| 0 | Digit required. This element accepts any single digit from **0** to **9**. |
 | 9 | Digit or space, optional. |
-| # | Digit or space, optional, Plus(**+**) and minus(**-**) signs are allowed. |
-| L | Letter required. It will accept letters **a-z** and **A-Z**. |
+| # | Digit or space, optional. Plus (**+**) and minus (**-**) signs are allowed. |
+| L | Letter required. Accepts letters **a-z** and **A-Z**. |
 | ? | Letter or space, optional. |
 | & | Requires a character. |
 | C | Character or space, optional. |
-| A | Alphanumeric **(A-Za-z0-9)** required.|
+| A | Alphanumeric **(A-Za-z0-9)** required. |
 | a | Alphanumeric **(A-Za-z0-9)** or space, optional. |
-| < | Shift down. Converts all characters to lower case. |
-| > | Shift up. Converts all characters to upper case. |
-| &#124; | Disable a previous shift up or shift down. |
+| < | Shift down. Converts all characters to lowercase. |
+| > | Shift up. Converts all characters to uppercase. |
+| &#124; | Disables a previous shift up or shift down. |
 | \\\\ | Escapes a mask character, turning it into a literal. |
-| All other characters | Literals. All non-mask elements (literals) will appear as themselves within MaskedTextBox. |
+| All other characters | Literals. All non-mask elements (literals) appear as themselves within the MaskedTextBox. |
 
 The following example demonstrates the usage of standard mask elements.
 
@@ -48,19 +48,17 @@ The following example demonstrates the usage of standard mask elements.
 <SfMaskedTextBox Mask="\\A999" Placeholder="Mask \\A999 (ex: A321)" FloatLabelType="@FloatLabelType.Always"></SfMaskedTextBox>
 ```
 
-
-
 ![Blazor MaskedTextBox with Standard Mask Elements](./images/blazor-maskedtextbox-with-standard-mask.png)
 
 ## Custom mask elements
 
-Other than the above standard mask elements, the mask can be configured with the custom characters or regular expression to define a custom behavior.
+Beyond the standard mask elements, the mask can be configured with custom characters or regular expressions to define specific behavior.
 
 ### Custom characters
 
-You can define any of the non-mask element as the mask element and its behavior through the [CustomCharacters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_CustomCharacters) property.
+Define any non-mask character as a mask element and specify its behavior by using the [CustomCharacters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_CustomCharacters) property.
 
-In the following example, non-mask element `P` accepts the values `P, A, p, a`, and `M` accepts the values `M, m`  as mentioned in the custom characters collection.
+In the following example, the non-mask element `P` accepts `P, A, p, a`, and `M` accepts `M, m`, as defined in the custom characters collection.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -76,14 +74,13 @@ In the following example, non-mask element `P` accepts the values `P, A, p, a`,
 }
 ```
 
-
 ![Blazor MaskedTextBox with Custom Mask Elements](./images/blazor-maskedtextbox-with-custom-mask.png)
 
 ### Regular expression
 
-Instead of the mask element, you can define your own regular expression to validate the input of a particular input place. The regular expressions should be wrapped by the square brackets (e.g., [`Regex`]).
+Instead of predefined mask elements, use a regular expression to validate the input at a particular position. Enclose each position’s regular expression in square brackets (for example, [`Regex`]).
 
-In the following example, regular expression has been set for each input places.
+In the following example, a regular expression is set for each input position.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -91,14 +88,13 @@ In the following example, regular expression has been set for each input places.
 <SfMaskedTextBox Placeholder="Enter value" Mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]" FloatLabelType="@FloatLabelType.Auto"></SfMaskedTextBox>
 ```
 
-
 ![Blazor MaskedTextBox with Regular Expression](./images/blazor-maskedtextbox-regular-expression.png)
 
 ## Prompt character
 
-The Prompt character is a prompting symbol in the MaskedTextBox for the mask elements. The symbol is used to show the input positions in the MaskedTextBox. You can customize the prompt character of MaskedTextBox by using the [PromptChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_PromptChar) property.
+The prompt character is the symbol used to indicate input positions defined by the mask. Customize the prompt character by using the [PromptChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_PromptChar) property.
 
-The following example demonstrates the MaskedTextBox with customized prompt character as `#`.
+The following example demonstrates the MaskedTextBox with a customized prompt character `#`.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -110,13 +106,11 @@ The following example demonstrates the MaskedTextBox with customized prompt char
 }
 ```
 
-
-
 ![Blazor MaskedTextBox with Prompt Character](./images/blazor-maskedtextbox-with-prompt-char.png)
 
 ## Include literals in the value
 
-By default, you will get the raw value as [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Value) of the component. Now, you can get the component Value with mask literals by enabling the [EnableLiterals](https://www.syncfusion.com/blazor-components/blazor-input-mask) property.
+By default, the component’s [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_Value) returns the raw value (without literals). To include mask literals in the returned value, enable the [EnableLiterals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_EnableLiterals) property.
 
 The following example demonstrates how to obtain the value with mask literals.
 
diff --git a/blazor/input-mask/native-events.md b/blazor/input-mask/native-events.md
index 12aae15fc2..a702cfb9b2 100644
--- a/blazor/input-mask/native-events.md
+++ b/blazor/input-mask/native-events.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Native Events in Blazor Input Mask Component
 
-The following section explains the steps to include native events and pass data to event handler in MaskedTextBox component.
+This section describes how to bind native DOM events to the MaskedTextBox component and how to pass event data to event handlers.
 
 ## Bind native events to MaskedTextBox
 
-You can access any native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Bind native DOM events using the Blazor `@on{event}` syntax on the component. The attribute value is the event handler to invoke.
 
-In the following example, the KeyPressed method is called every time the key is pressed on input.
+In the following example, the KeyPressed method is called every time a key is pressed in the input.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is
 }
 ```
 
-Also, you can rewrite the previous example code as follows using Lambda expressions.
+Also, the previous example can be written using a lambda expression.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -39,16 +39,16 @@ Also, you can rewrite the previous example code as follows using Lambda expressi
 
 ## Pass event data to event handler
 
-Blazor provides set of argument types to map to native events. The list of event types and event arguments are:
+Blazor provides specific argument types for native events. Common mappings include:
 
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+* Focus events – FocusEventArgs
+* Mouse events – MouseEventArgs
+* Keyboard events – KeyboardEventArgs
+* Input events – ChangeEventArgs/EventArgs
+* Touch events – TouchEventArgs
+* Pointer events – PointerEventArgs
 
-In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "m" key.
+In the following example, the KeyPressed method is invoked for every key press in the input, and a message is written only when the "m" key is pressed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -73,4 +73,4 @@ Using Lambda expression also, you can pass the event data to the event handler.
 | onclick | onblur | onfocus | onfocusout |
 | onmousemove | onmouseover | onmouseout | onmousedown | onmouseup |
 | ondblclick | onkeydown | onkeyup | onkeypress |
-| ontouchend | onfocusin | onmouseup | ontouchstart |
+| ontouchend | onfocusin | onmouseup | ontouchstart |
\ No newline at end of file
diff --git a/blazor/input-mask/style-appearance.md b/blazor/input-mask/style-appearance.md
index a352cc64e1..7271f32c39 100644
--- a/blazor/input-mask/style-appearance.md
+++ b/blazor/input-mask/style-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and appearance in Blazor Input Mask Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content provides the CSS selector patterns you can target to modify the control's appearance based on user preferences. The MaskedTextBox renders a wrapper element and an input element; styles can be applied to either. For scoped customization, assign a custom CssClass to the component and define styles for that class, or use CSS isolation (.razor.css). Refer to the SfMaskedTextBox CssClass API and the Themes and Appearance documentation for additional guidance.
 
 ## Customizing the appearance of Input Mask container element
 
-Use the following CSS to customize the appearance of Input Mask container element.
+Use the following CSS to customize the appearance of the Input Mask container (wrapper) and its input element.
 
 ```css
 /* To specify height, font size, and border */
@@ -27,7 +27,7 @@ Use the following CSS to customize the appearance of Input Mask container elemen
 
 ## Customizing the Input Mask element on hovering
 
-Use the following CSS to customize the Input Mask element on hovering
+Use the following CSS to customize the Input Mask element on hovering.
 
 ```css
 /* To specify border */
diff --git a/blazor/listbox/accessibility.md b/blazor/listbox/accessibility.md
index 1625e0884d..3f532e138d 100644
--- a/blazor/listbox/accessibility.md
+++ b/blazor/listbox/accessibility.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor ListBox Component
 
-The Blazor ListBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor ListBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also implements appropriate  [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) to support assistive technologies.
 
-The accessibility compliance for the Blazor ListBox component is outlined below.
+The following table summarizes the accessibility compliance of the Blazor ListBox component.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes">  |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement">  |
+| [Right-to-left support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
 
 <style>
     .post .post-content img {
@@ -31,44 +31,43 @@ The accessibility compliance for the Blazor ListBox component is outlined below.
     }
 </style>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor ListBox component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ListBox component:
+The Blazor ListBox component follows the [WAI-ARIA listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor ListBox component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `role` | Indicates the ListBox component wrapper element as `listbox`, the `UL` element as `presentation`, and its list item as `option`. |
+| `role` | Indicates the ListBox component wrapper element as `listbox`, the `ul` element as `presentation`, and each list item as `option`. |
 | `aria-label` | Provides an accessible name for the ListBox component. |
-| `aria-multiselectable` | Applied to the element with the ListBox role, tells assistive technologies that the list supports multiple selection. The default value is true. |
-| `aria-selected` | Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected. |
+| `aria-multiselectable` | Applied to the element with the `listbox` role to indicate that multiple selection is supported. This is applied when multiple selection is enabled (default behavior). |
+| `aria-selected` | Applied to elements with the `option` role that are visually styled as selected to inform assistive technologies that the options are selected. |
 
 ## Keyboard interaction
 
-The Blazor ListBox component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component.
-
+The Blazor ListBox component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guidelines, supporting users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component.
 | Windows | Mac| Actions |
 | --- | --- | --- |
 | <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the previous option. |
 | <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the next option. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to first option. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to last option. |
-| <kbd>Space</kbd> | <kbd>Space</kbd> | Changes the selection state of the focused option. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first option. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last option. |
+| <kbd>Space</kbd> | <kbd>Space</kbd> | Toggles the selection state of the focused option. |
 | <kbd>Ctrl + A</kbd> | <kbd>⌘</kbd> + <kbd>A</kbd> | Selects all options in the list. |
 | <kbd>Ctrl + Shift + Home</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>Home</kbd> | Selects the focused option and all options up to the first option. |
 | <kbd>Ctrl + Shift + End</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>End</kbd> | Selects the focused option and all options down to the last option. |
-| <kbd>Ctrl</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | Press Ctrl key with up / down arrow or mouse to select multiple items. |
+| <kbd>Ctrl</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | Moves focus without changing the current selection. Use Ctrl/Cmd with mouse click to toggle individual items. |
 
 ## Ensuring accessibility
 
-The Blazor ListBox component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor ListBox component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor ListBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the accessibility of the Blazor ListBox component with accessibility tools.
+The accessibility compliance of the Blazor ListBox component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the component with accessibility tools.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/list-box.html" %}
 
diff --git a/blazor/listbox/data-binding.md b/blazor/listbox/data-binding.md
index 98eaeda565..b418fa6f51 100644
--- a/blazor/listbox/data-binding.md
+++ b/blazor/listbox/data-binding.md
@@ -9,25 +9,25 @@ documentation: ug
 
 # Data Binding in Blazor ListBox Component
 
-The ListBox loads the data from local data sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
+The ListBox loads data from local or remote sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
 
 | Fields | Type | Description |
 |------|------|-------------|
-| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) |  `string` | Specifies the display text of each list item. |
-| [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) |  `string` | Specifies the hidden data value mapped to each list item that should contain a unique value. |
-| [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy) |  `string` | Specifies the category under which the list item has to be grouped. |
-| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss) |  `string` | Specifies the iconCss class that needs to be mapped. |
-| [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes) |  `string` | Allows additional attributes to configure the elements in various ways to meet the criteria. |
+| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) | `string` | Specifies the display text of each list item. |
+| [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value) | `string` | Specifies the hidden data value mapped to each list item and should be unique. |
+| [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy) | `string` | Specifies the category under which each list item is grouped. |
+| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss) | `string` | Specifies the CSS class for an icon to display with the item. |
+| [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes) | `object` | Specifies additional HTML attributes to configure item elements. |
 
-N> When binding complex data to the ListBox, fields should be mapped correctly. Otherwise, the selected item remains undefined.
+N> When binding complex data to the ListBox, map fields correctly. If the mapping is incorrect, selection and value binding may not work as expected.
 
 ## Local Data
 
-Local data can be represented by the following ways.
+Local data can be provided in the following ways.
 
 ### Array of string
 
-The ListBox has support to load array of primitive data such as strings or numbers. Here, both value and text field acts as same.
+The ListBox supports arrays of primitive values such as strings or numbers. In this case, both the Text and Value fields resolve to the same value.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -43,7 +43,7 @@ public string[] Games = new string[] { "Badminton", "Cricket", "Football", "Golf
 
 The ListBox can generate its list items through an array of object data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
 
-In the following example, `id` and `sports` column from complex data have been mapped to the `Value` field and `Text` field, respectively.
+In the following example, the `Text` property is mapped to the Text field and the `Id` property is mapped to the Value field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -75,9 +75,9 @@ In the following example, `id` and `sports` column from complex data have been m
 
 ### Array of complex object
 
-The ListBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
+The ListBox can generate items from an array of complex objects. Map nested properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property as needed.
 
-In the following example, `sports.Name` column from complex data have been mapped to the `Text` field.
+In the following example, the `Sports.Name` property from the complex data is mapped to the Text field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -109,14 +109,13 @@ In the following example, `sports.Name` column from complex data have been mappe
 }
 ```
 
-![Binding Complex Items with Blazor ListBox](images/blazor-listbox-bind-complex-items.png)
+![Blazor ListBox bound to complex objects with nested field mapping](images/blazor-listbox-bind-complex-items.png)
 
 ## Remote Data
 
-The ListBox supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
-
-The following sample displays the employee names from `Employee` table.
+The ListBox supports retrieving data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
 
+The following example displays customer IDs from the `Orders` table.
 ```csharp
 
 @using Syncfusion.Blazor.DropDowns
@@ -147,4 +146,4 @@ The following sample displays the employee names from `Employee` table.
 
 ```
 
-![Blazor ListBox with Data Binding](images/blazor-listbox-with-data-binding.png)
\ No newline at end of file
+![Blazor ListBox bound to remote data using DataManager](images/blazor-listbox-with-data-binding.png)
\ No newline at end of file
diff --git a/blazor/listbox/drag-and-drop.md b/blazor/listbox/drag-and-drop.md
index 8ce4c43858..45ed0ad157 100644
--- a/blazor/listbox/drag-and-drop.md
+++ b/blazor/listbox/drag-and-drop.md
@@ -9,19 +9,19 @@ documentation: ug
 
 # Drag And Drop in Blazor ListBox Component
 
-The ListBox has support to drag an item or a group of selected items and drop it within the same listbox or into another listbox.
+The ListBox supports dragging a single item or a group of selected items and dropping them within the same ListBox or into another ListBox.
 
-The elements can be customized on drag and drop by using the following events.
+Customize drag-and-drop behavior using the following events.
 
 | Events | Description |
 |------|------|
-| [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_DragStart) | Triggers when the selected element's drag starts. |
-| [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_OnDrop) | Triggers before the selected element is dropped. |
-| [Dropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_Dropped) | Triggers when the selected element is dropped. |
+| [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_DragStart) | Triggers when dragging starts for the selected item(s). |
+| [OnDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_OnDrop) | Triggers before the selected item(s) are dropped. |
+| [Dropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_Dropped) | Triggers after the selected item(s) are dropped. |
 
 ## Single ListBox
 
-To drag and drop an item or group of item within the listbox can achieved by setting [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true`.
+Drag and drop within a single ListBox can be achieved by setting the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -56,7 +56,7 @@ To drag and drop an item or group of item within the listbox can achieved by set
 
 ## Multiple ListBox
 
-To drag and drop an item or group of item between two listbox can achieved by setting [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true` and [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) should be set as `combined-list` in both the listbox.
+Drag and drop between two ListBoxes can be achieved by setting the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowDragAndDrop) property to `true` and assigning the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) value (for example, `combined-list`) to both ListBoxes. The Scope value enables cross-list drag-and-drop; element IDs should remain unique and are independent of Scope.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -121,11 +121,11 @@ To drag and drop an item or group of item between two listbox can achieved by se
 </style>
 ```
 
-![Dragging Item between Multiple Blazor ListBox](./images/blazor-listbox-multiple-drag-item.png)
+![Dragging items between multiple Blazor ListBoxes](./images/blazor-listbox-multiple-drag-item.png)
 
 ## Dual ListBox with drag and drop
 
-The toolbar and drag and drop actions between two listboxes can be enabled by setting a listbox unique id and the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property value.
+The toolbar and drag-and-drop actions between two ListBoxes can be enabled by assigning unique element IDs and the same [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) value to both instances. Toolbar actions operate across ListBoxes that share the same Scope.
 
 ```
 @using Syncfusion.Blazor.DropDowns
diff --git a/blazor/listbox/dual-listbox.md b/blazor/listbox/dual-listbox.md
index 374d81e3d3..8f58fcfd76 100644
--- a/blazor/listbox/dual-listbox.md
+++ b/blazor/listbox/dual-listbox.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Dual ListBox in Blazor ListBox Component
 
-The dual ListBox allows the user to move items between two listbox by clicking the toolbar buttons. Dual ListBox can be created by listing items in the [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_ToolbarSettings) along with the [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property.
+The dual ListBox enables moving items between two ListBoxes using toolbar buttons. Create a dual ListBox by configuring the[ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_ToolbarSettings) along with the [Scope](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Scope) property.
 
 The following operations can be performed in dual ListBox,
 
 | Options | Description |
 |------|-------------|
-| MoveUp | Move the selected item in the upward direction within the listbox. |
-| MoveDown | Move the selected item in the downward direction within the listbox. |
-| MoveTo |  Move the selected item to the another listbox. |
-| MoveFrom | Move the selected item from one listbox to the another listbox. |
-| MoveAllTo | Move all the items to the another listbox. |
-| MoveAllFrom |  Move all the items from one listbox to the another listbox. |
+| MoveUp | Move the selected item up within the ListBox. |
+| MoveDown | Move the selected item down within the ListBox. |
+| MoveTo | Move the selected item to the other ListBox. |
+| MoveFrom | Move the selected item from the other ListBox to this ListBox. |
+| MoveAllTo | Move all items to the other ListBox. |
+| MoveAllFrom | Move all items from the other ListBox to this ListBox. |
 
-The following example illustrates how to move items from `Group A` to `Group B` listbox.
+The following example illustrates how to move items between the Group A and Group B ListBoxes using toolbar actions. Ensure both ListBoxes share the same Scope value to enable cross-list operations.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -94,4 +94,4 @@ The following example illustrates how to move items from `Group A` to `Group B`
 
 ```
 
-![Blazor Dual ListBox](./images/blazor-dual-listbox.png)
\ No newline at end of file
+![Blazor dual ListBox with toolbar to move items between lists](./images/blazor-dual-listbox.png)
\ No newline at end of file
diff --git a/blazor/listbox/filtering.md b/blazor/listbox/filtering.md
index eda62037b7..041c8270a1 100644
--- a/blazor/listbox/filtering.md
+++ b/blazor/listbox/filtering.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Filtering in ListBox
 
-The ListBox has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowFiltering) is enabled. The filter operation starts as soon as you start typing characters in the search box.  Default value of AllowFiltering is `false`.
+The ListBox provides built-in filtering when the [AllowFiltering property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowFiltering) is enabled. A search box is rendered automatically, and filtering begins as the user types. The default value of AllowFiltering is `false`. Filtering is case-insensitive by default and affects only the visible items; existing selections remain unchanged.
 
-The following code demonstrates the filtering functionality in ListBox component.
+The following code demonstrates the filtering functionality in the ListBox component.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -40,20 +40,20 @@ The following code demonstrates the filtering functionality in ListBox component
 
 ```
 
-![Blazor ListBox with filtering](images/blazor-listbox-filtering.png)
+![Blazor ListBox with filtering enabled](images/blazor-listbox-filtering.png)
 
 
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Use the [FilterType property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) to specify the matching behavior used during search. The available options are:
 
 FilterType     | Description
 ------------ | -------------
-  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contained with specified value.
+  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether the item text begins with the specified value.
+  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether the item text ends with the specified value.
+  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether the item text contains the specified value.
 
-In the following example, `EndsWith` filter type has been mapped to the `FilterType` property.
+In the following example, the `EndsWith` filter type is assigned to the `FilterType` property.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -83,4 +83,4 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 ```
 
-![Blazor ListBox with Filter Type](images/blazor-listbox-filter-type.png)
+![Blazor ListBox using the EndsWith filter type](images/blazor-listbox-filter-type.png)
\ No newline at end of file
diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md
index e3ba4f9a0b..ef8d58832a 100644
--- a/blazor/listbox/getting-started-webapp.md
+++ b/blazor/listbox/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting started with Blazor ListBox in Blazor Web App
 
-This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor ListBox](https://www.
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor ListBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ListBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
+
+Here's an example of how to add **Blazor ListBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.DropDowns --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListBox component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -223,7 +252,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 
 ## Binding data source
 
-After initializing, populate the ListBox with data using the `DataSource` property. Here, an array of object values is passed to the ListBox component.
+After initialization, populate the ListBox using the `DataSource` property. The following uses an array of objects.
 
 {% tabs %}
 {% highlight razor %}
@@ -252,9 +281,9 @@ After initializing, populate the ListBox with data using the `DataSource` proper
 {% endhighlight %}
 {% endtabs %}
 
-N> `TValue` is the type of value in the datasource to resolve type inference. It is generic type and can be given as string[], int[].
+N> `TValue` is the type of the value in the data source used for type inference. It is a generic type and can be specified as string[], int[], etc.
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ListBox component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rjhJNsLEzexthhCN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ListBox Component](./images/blazor-listbox.png)" %}
 
diff --git a/blazor/listbox/how-to/add-items.md b/blazor/listbox/how-to/add-items.md
index 007018d6c6..9cf447c869 100644
--- a/blazor/listbox/how-to/add-items.md
+++ b/blazor/listbox/how-to/add-items.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Add/Remove Items in Blazor ListBox Component
 
-To add an item or multiple items, [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be added while clicking `Add Items` button.
+Use the [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items when clicking the Add Items button. Items should conform to the TItem type and field mappings (Text and Value) configured in ListBoxFieldSettings. AddItemsAsync also supports an optional index parameter to insert items at a specific position; when omitted, items are appended.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -53,7 +53,7 @@ To add an item or multiple items, [AddItemsAsync](https://help.syncfusion.com/cr
 
 ## Remove items from the listbox
 
-To remove an item or multiple items, [RemoveItemAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_RemoveItemAsync_System_Collections_Generic_IEnumerable__1__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be removed while clicking `Remove Items` button.
+Use the [RemoveItemAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_RemoveItemAsync_System_Collections_Generic_IEnumerable__1__System_Nullable_System_Int32__) method can be used. In the following example, the `Ferrari LaFerrari` and `McLaren P1` items will be removed while clicking `Remove Items` button. Removed items must match the TItem type and the field mappings used by the ListBox. RemoveItemAsync also supports an optional index parameter to target positions when needed.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
diff --git a/blazor/listbox/how-to/bind-change-event.md b/blazor/listbox/how-to/bind-change-event.md
index 26daed495f..69b141a51f 100644
--- a/blazor/listbox/how-to/bind-change-event.md
+++ b/blazor/listbox/how-to/bind-change-event.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Bind Change Events in Blazor ListBox Component
 
-To bind the change event in the listbox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) event is used and the event is triggered when the value in the listbox changes.
+Bind the change event in the listbox [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) event is used and the event is triggered when the value in the listbox changes.
 
 ```cshtml
 
@@ -46,4 +46,4 @@ To bind the change event in the listbox [ValueChange](https://help.syncfusion.co
 
 ```
 
-![Binding Events in Blazor ListBox](./../images/blazor-listbox.png)
\ No newline at end of file
+![Blazor ListBox with change event binding example](./../images/blazor-listbox.png)
\ No newline at end of file
diff --git a/blazor/listbox/how-to/enable-or-disable-items.md b/blazor/listbox/how-to/enable-or-disable-items.md
index f01b61706b..9194769f26 100644
--- a/blazor/listbox/how-to/enable-or-disable-items.md
+++ b/blazor/listbox/how-to/enable-or-disable-items.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Enable/Disable ListBox in Blazor ListBox Component
 
-To enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems_System_Object_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` buttons, the disabled items will be enabled.
+Enable or disable items in the listbox, [EnableItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_EnableItems_System_Object_System_Boolean_) method can be used. In the following example, the `Bugatti Veyron Super Sport` and `SSC Ultimate Aero` items are disabled by default and by clicking `Enable Items` buttons, the disabled items will be enabled.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -52,4 +52,4 @@ To enable or disable items in the listbox, [EnableItems](https://help.syncfusion
 
 ```
 
-![Disabling Items in Blazor ListBox](./../images/blazor-listbox-disable-items.png)
\ No newline at end of file
+![Disabled Items in Blazor ListBox](./../images/blazor-listbox-disable-items.png)
\ No newline at end of file
diff --git a/blazor/listbox/how-to/enable-scroll.md b/blazor/listbox/how-to/enable-scroll.md
index cb7495b5de..079360a817 100644
--- a/blazor/listbox/how-to/enable-scroll.md
+++ b/blazor/listbox/how-to/enable-scroll.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Enable Scroller in Blazor ListBox Component
 
-The ListBox supports scrolling and it can be achieved by restricting the height of the listbox using [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Height) property.
+The ListBox supports scrolling, which is enabled by restricting the visible height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_Height) property.
 
-In the following sample, `Height` of the listbox is restricted to `250px`.
+In the following sample, the Height of the ListBox is set to 250px to enable scrolling.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
diff --git a/blazor/listbox/how-to/filter-listbox.md b/blazor/listbox/how-to/filter-listbox.md
index ae014254a7..4f2876b789 100644
--- a/blazor/listbox/how-to/filter-listbox.md
+++ b/blazor/listbox/how-to/filter-listbox.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # How to Filter Blazor ListBox Data Using TextBox Component
 
-This example demonstrates how to filter Syncfusion<sup style="font-size:70%">&reg;</sup> ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included.
+This example shows how to filter Syncfusion<sup style="font-size:70%">&reg;</sup> ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method to update the ListBox items, ensuring that only those matching the input text are included.
 
 ```cshtml
 @using Syncfusion.Blazor
diff --git a/blazor/listbox/how-to/get-items.md b/blazor/listbox/how-to/get-items.md
index 0c6d431894..55269ab5c0 100644
--- a/blazor/listbox/how-to/get-items.md
+++ b/blazor/listbox/how-to/get-items.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Get Items in Blazor ListBox Component
 
-The [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_GetDataByValue__0_) method is used to get the selected item/items from the list box component based on the value/values passed to this method.
+The [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_GetDataByValue__0_) method returns the data item or items corresponding to the value or values provided, based on the field mapped to Value in ListBoxFieldSettings. If a provided value does not match any item, it is ignored and not included in the result.
 
-The below example showcases the `GetDataByValue` method.
+The following example demonstrates the `GetDataByValue` method. In this sample, the Value field is mapped to `Text`, so the input array must contain the item Text values. The `TValue` is `string[]`, which indicates a multiple-selection context.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -51,4 +51,4 @@ The below example showcases the `GetDataByValue` method.
 
 ```
 
-![Selecting Items in Blazor ListBox](./../images/blazor-listbox-item-selection.png)
\ No newline at end of file
+![Get items by value in Blazor ListBox](./../images/blazor-listbox-item-selection.png)
\ No newline at end of file
diff --git a/blazor/listbox/how-to/select-items.md b/blazor/listbox/how-to/select-items.md
index 1e54dbf0de..e53d1a575c 100644
--- a/blazor/listbox/how-to/select-items.md
+++ b/blazor/listbox/how-to/select-items.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Select Items in Blazor ListBox Component
 
-In the following example, `Bugatti Chiron` is selected using [SelectItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_) method.
+This example shows how to programmatically select items using the [SelectItemsAsync method](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_SelectItemsAsync__1___0_System_Boolean_). The first parameter accepts the value or values to select, and the second parameter specifies the selection mode: set it to true to select by the mapped Value field (Text in this example), or false to select by index. Selection is triggered in the Created event to ensure the component is initialized. The `TValue` is `string[]`, which enables multiple selection. Values that do not match any items are ignored.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -45,4 +45,4 @@ In the following example, `Bugatti Chiron` is selected using [SelectItemsAsync](
 
 ```
 
-![Selecting Items in Blazor ListBox](./../images/blazor-listbox-item-selection.png)
\ No newline at end of file
+![Selecting items in the Blazor ListBox](./../images/blazor-listbox-item-selection.png)
\ No newline at end of file
diff --git a/blazor/listbox/icons-and-templates.md b/blazor/listbox/icons-and-templates.md
index 0c2b1ccd66..88a5515af4 100644
--- a/blazor/listbox/icons-and-templates.md
+++ b/blazor/listbox/icons-and-templates.md
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Icons
 
-To place the icon on a listbox, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the list.
+To display an icon for each ListBox item, map the [IconCss field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_IconCss) to a CSS class name. By default, the icon is positioned on the left side of the item text. Icon glyphs are provided by the Syncfusion theme CSS; custom icons can also be supplied via user-defined CSS classes.
 
-In the following sample, icon classes are mapped with `IconCss` field.
+In the following example, icon classes are mapped to the `IconCss` field.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -66,7 +66,7 @@ In the following sample, icon classes are mapped with `IconCss` field.
 </style>
 ```
 
-![Blazor ListBox with Icons](./images/blazor-listbox-icons.png)
+![Blazor ListBox with item icons](./images/blazor-listbox-icons.png)
 
 ## Templates
 
@@ -172,4 +172,4 @@ ListBox items can be customized according to the requirement using [ItemTemplate
 
 ```
 
-![Blazor ListBox with Icon](./images/blazor-listbox-icon-template.png)
\ No newline at end of file
+![Blazor ListBox with icon](./images/blazor-listbox-icon-template.png)
\ No newline at end of file
diff --git a/blazor/listbox/selection.md b/blazor/listbox/selection.md
index 738aa47edf..abd46cde18 100644
--- a/blazor/listbox/selection.md
+++ b/blazor/listbox/selection.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Selection in Blazor ListBox Component
 
-The ListBox provides support to select an item or a group of item by mouse or keyboard action. There are two selection modes available in ListBox,
+The ListBox supports selecting a single item or multiple items using mouse or keyboard. There are two selection modes available in the ListBox:
 
-* Single -  To select single item in the ListBox.
-* Multiple -  To select multiple items in the ListBox.
+* Single - Select a single item in the ListBox.
+* Multiple - Select multiple items in the ListBox.
 
 ## Single selection
 
-To enable single selection in the ListBox, [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) should be set as `Single` in [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property.
+To enable single selection, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) to `Single` in the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -50,9 +50,9 @@ To enable single selection in the ListBox, [Mode](https://help.syncfusion.com/cr
 
 ## Multiple selection
 
-To enable multiple selection in the ListBox, [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) should be set as `Multiple` in [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. To select multiple items, use the SHIFT, CTRL, and arrow keys to make selections.
+To enable multiple selection, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_Mode) to `Multiple` in the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html) property. Use the Shift, Ctrl, and arrow keys to select multiple items with the keyboard.
 
-N> By default, the selection mode is set as `Multiple`.
+N> By default, the selection mode is `Multiple`.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -86,11 +86,11 @@ N> By default, the selection mode is set as `Multiple`.
 
 ## CheckBox Selection
 
-ListBox supports checkbox selection which is used to select multiple items. To enable the checkbox selection, set the [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowCheckbox) property to `true`.
+The ListBox supports checkbox selection for choosing multiple items. To enable checkbox selection, set the [ShowCheckbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowCheckbox) property to `true`.
 
 ### Select All
 
-To select all the items in the ListBox, enable the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowSelectAll) property to `true`.
+To select all items in the ListBox, enable the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxSelectionSettings.html#Syncfusion_Blazor_DropDowns_ListBoxSelectionSettings_ShowSelectAll) property.
 
 ```cshtml
 
diff --git a/blazor/listbox/sorting-grouping.md b/blazor/listbox/sorting-grouping.md
index 1e2f74b8bf..89ac2c3666 100644
--- a/blazor/listbox/sorting-grouping.md
+++ b/blazor/listbox/sorting-grouping.md
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Sorting
 
-The ListBox supports sorting of available items in the alphabetical order that can be either ascending or descending. This can be achieved using [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html) property. Sort order can be `None`, `Ascending` or `Descending`.
+The ListBox can sort items alphabetically in ascending or descending order by using the [SortOrder enum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html). Sorting applies to the text mapped via the Text field in ListBoxFieldSettings. The default sort order is `None`.
 
-In the following example, the `SortOrder` is set as `Descending`.
+In the following example, `SortOrder` is set to `Descending`.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -42,11 +42,12 @@ In the following example, the `SortOrder` is set as `Descending`.
 
 ```
 
-![Sorting in Blazor ListBox](images/blazor-listbox-sorting.png)
+![Blazor ListBox with items sorted in descending order](images/blazor-listbox-sorting.png)
+
 
 ## Grouping
 
-The ListBox supports to wrap the nested element into a group based on its category. The category of each list item can be mapped with [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_GroupBy) field in the data table.
+The ListBox can group items by a category using the [GroupBy field in ListBoxFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxFieldSettings.html#Syncfusion_Blazor_DropDowns_ListBoxFieldSettings_GroupBy). Each item is assigned to a group based on the value of the mapped field, and group headers act as visual categories (not selectable items).
 
 To get started quickly with grouping in the Blazor ListBox component, you can check the video below.
 
@@ -82,4 +83,4 @@ To get started quickly with grouping in the Blazor ListBox component, you can ch
 }
 ```
 
-![Grouping in Blazor ListBox](images/blazor-listbox-grouping.png)
\ No newline at end of file
+![Blazor ListBox with items grouped by category](images/blazor-listbox-grouping.png)
\ No newline at end of file
diff --git a/blazor/listbox/style-and-appearance.md b/blazor/listbox/style-and-appearance.md
index cc57e330ce..40b0a20a5c 100644
--- a/blazor/listbox/style-and-appearance.md
+++ b/blazor/listbox/style-and-appearance.md
@@ -9,21 +9,21 @@ documentation: ug
 
 # Styles and Appearances in Blazor ListBox Component
 
-To modify the ListBox appearance, you need to override the default CSS of ListBox component. Find the list of CSS classes and its corresponding section in ListBox component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+To modify the ListBox appearance, override the component’s default CSS. The following table lists key CSS classes and the parts of the ListBox they affect. A custom theme can also be generated using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 | CSS Class | Purpose of Class |
 | ----- | ----- |
-|.e-listbox-container | To customize the listbox container |
-|.e-listbox-container .e-list-item | To customize the listbox list items |
-|.e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled) | To customize the listbox list items on hover |
-|.e-listbox-container .e-list-item.e-selected | To customize the listbox selected list item |
-|.e-listboxtool-container .e-listbox-tool | To customize the listbox toolbar |
-|.e-listboxtool-container .e-listbox-tool .e-btn | To customize the listbox toolbar button |
-|.e-listboxtool-container .e-listbox-tool .e-btn .e-btn-icon.e-icons::before | To customize the listbox toolbar icon |
+| `.e-listbox-container` | Customize the ListBox container. |
+| `.e-listbox-container .e-list-item` | Customize ListBox items. |
+| `.e-listbox-container .e-list-item:hover:not(.e-selected):not(.e-disabled)` | Customize ListBox items on hover. |
+| `.e-listbox-container .e-list-item.e-selected` | Customize the selected item. |
+| `.e-listboxtool-container .e-listbox-tool` | Customize the ListBox toolbar (dual ListBox scenarios). |
+| `.e-listboxtool-container .e-listbox-tool .e-btn` | Customize toolbar buttons. |
+| `.e-listboxtool-container .e-listbox-tool .e-btn .e-btn-icon.e-icons::before` | Customize toolbar icons. |
 
 ## Horizontal ListBox
 
-You can use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_CssClass) property to display the Listbox horizontally.
+Use the [CssClass property](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_CssClass) to apply a custom CSS class and display the ListBox horizontally. The sample below applies layout styles via the e-horizontal-listbox class to render items in a single horizontal row.
 
 {% tabs %}
 {% highlight razor %}
@@ -80,6 +80,6 @@ You can use [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor Horizontal ListBox](./images/blazor-horizontal-listbox.png)
+![Blazor ListBox displayed horizontally with custom CSS](./images/blazor-horizontal-listbox.png)
 
-N> [View Sample in GitHub](https://github.com/SyncfusionExamples/how-to-set-the-blazor-list-box-items-as-horizontal-list)
\ No newline at end of file
+N> [View sample on GitHub](https://github.com/SyncfusionExamples/how-to-set-the-blazor-list-box-items-as-horizontal-list)
\ No newline at end of file
diff --git a/blazor/maps/accessibility.md b/blazor/maps/accessibility.md
index f8dd8ae3a8..7ddc115ad0 100644
--- a/blazor/maps/accessibility.md
+++ b/blazor/maps/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about accessibility in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about accessibility in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor Maps Component
 
-The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
+The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component adheres to widely adopted accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles).
 
-The accessibility compliance for the Blazor Maps component is outlined below.
+The accessibility compliance for the Blazor Maps component is summarized below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Maps component is outlined below.
 | [Right-To-Left Support](../common/accessibility) | Not Applicable |
 | [Color Contrast](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | [Mobile Device Support](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Keyboard Navigation Support](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | [Axe-core Accessibility Validation](../common/accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 
 <style>
@@ -39,50 +39,50 @@ The accessibility compliance for the Blazor Maps component is outlined below.
 
 ## WAI-ARIA attributes
 
-To meet accessibility standards, the Blazor Maps component follows to the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns. In the Maps component, the following `WAI-ARIA` attributes are used:
+To meet accessibility standards, the Blazor Maps component adheres to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns. The following `WAI-ARIA` attributes are used in the Maps component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `role=region` | It specifies the Maps areas that do not support interactive functions like selection and highlight. |
-| `role=button` | It specifies the Maps areas where interactive functions such as selection and highlight are available. |
-| `aria-label` | Provides an accessible name for Maps elements such as geometric map shapes, title, subtitle, legend title, legend item labels, data labels, and so on. To learn more, see the next topic. |
+| `role=region` | Identifies map areas that do not support interactive functions such as selection and highlighting. |
+| `role=button` | Identifies map areas where interactive functions such as selection and highlighting are available. |
+| `aria-label` | Provides accessible names for map elements including geometric shapes, title, subtitle, legend title, legend item labels, and data labels. See the next section for details. |
 
 ## Screen reading in Maps
 
-Accessibility in the Blazor Maps component ensures that all users, regardless of ability or disability, can use screen reading. The following Map elements will be read aloud using screen reading software, such as Narrator for Windows.
+Accessibility in the Blazor Maps component ensures compatibility with screen readers. The following map elements are announced by screen readers such as Narrator on Windows.
 
 | Elements | Description |
 | --- | --- |
-| Shapes in the layer | Reads the names of the geographical shapes (such as countries, states, and regions) that appear on the Maps. |
-| Title | Reads the title content in the Maps. |
-| Subtitle | Reads the title below the main title content in the Maps. |
-| Legend title | Reads the contents of the legend's title as specified in Maps. |
-| Legend item label | Reads the label of a legend item in Maps. |
-| Data label | Reads the label specified for the shapes in the Maps layer. |
-| Annotation | Reads the content specified in the annotation. |
-| Marker template | Reads the content provided in the marker template. |
-| Tooltip template | Reads the content provided in the tooltip template. |
-| Data label template | Reads the content provided in the data label template. |
+| Shapes in the layer | Announces the names of the geographical shapes (such as countries, states, and regions) displayed on the map. |
+| Title | Announces the map title. |
+| Subtitle | Announces the subtitle that appears below the main title. |
+| Legend title | Announces the legend title as configured in the map. |
+| Legend item label | Announces the label of each legend item. |
+| Data label | Announces the label specified for shapes in the map layer. |
+| Annotation | Announces the content defined in the annotation. |
+| Marker template | Announces the content provided in the marker template. |
+| Tooltip template | Announces the content provided in the tooltip template. |
+| Data label template | Announces the content provided in the data label template. |
 
 ## Keyboard Navigation
 
-All the Blazor Maps actions can be controlled via keyboard keys. The applicable key combinations and their relative functionalities are listed below for the appropriate UI features available in the component.
+All Blazor Maps actions can be controlled using the keyboard. The following key combinations apply to the available UI interactions.
 
 | Windows | Mac | Description|
 |-----|-----|----|
-|<kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves to the next focusable element on the map, such as the legend or shape.|
-|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves to the previous focusable element on the map, such as the legend or shape.|
-|<kbd> + </kbd> | <kbd>+</kbd> |When zooming is enabled, zoom in operation can be performed.|
-|<kbd> - </kbd> | <kbd>-</kbd> |When zooming is enabled, zoom out operation can be performed.|
-|<kbd>←</kbd> | <kbd>←</kbd> |When zoomed in, the map can be scrolled to the left.|
-|<kbd>→</kbd> | <kbd>→</kbd> |When zoomed in, the map can be scrolled to the right.|
-|<kbd>↑</kbd> | <kbd>↑</kbd> |When zoomed in, the map can be scrolled upward.|
-|<kbd>↓</kbd> | <kbd>↓</kbd> |When zoomed in, the map can be scrolled downward.|
-|<kbd> R </kbd> | <kbd>R</kbd> |When zooming is enabled, reset operation can be performed.|
-|<kbd>Enter</kbd> | <kbd>Enter</kbd> |The page can be navigated to the next and previous states in legend. Similarly, the selection can be made while navigating over the shape.|
+|<kbd>Tab</kbd> | <kbd>Tab</kbd> |Moves focus to the next focusable element on the map, such as the legend or a shape.|
+|<kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> |Moves focus to the previous focusable element on the map, such as the legend or a shape.|
+|<kbd> + </kbd> | <kbd>+</kbd> |Performs zoom in when zooming is enabled.|
+|<kbd> - </kbd> | <kbd>-</kbd> |Performs zoom out when zooming is enabled.|
+|<kbd>←</kbd> | <kbd>←</kbd> |When zoomed in, scrolls the map to the left.|
+|<kbd>→</kbd> | <kbd>→</kbd> |When zoomed in, scrolls the map to the right.|
+|<kbd>↑</kbd> | <kbd>↑</kbd> |When zoomed in, scrolls the map upward.|
+|<kbd>↓</kbd> | <kbd>↓</kbd> |When zoomed in, scrolls the map downward.|
+|<kbd> R </kbd> | <kbd>R</kbd> |Performs reset when zooming is enabled.|
+|<kbd>Enter</kbd> | <kbd>Enter</kbd> |Navigates through legend items and confirms selection when focusing a shape.|
 
 ## Ensuring accessibility
 
-The Blazor Maps component's accessibility levels are ensured using an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
+Accessibility compliance for the Blazor Maps component is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
 
-The accessibility compliance of the Maps component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/maps) in a new window to evaluate the accessibility of the Maps component with accessibility tools.
+The component’s accessibility compliance is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/maps) in a new window to evaluate the component with accessibility tools.
diff --git a/blazor/maps/annotations.md b/blazor/maps/annotations.md
index 220203cbde..a899f3677c 100644
--- a/blazor/maps/annotations.md
+++ b/blazor/maps/annotations.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Annotations in Blazor Maps Component | Syncfusion 
-description: Checkout and learn here all about annotations in Blazor Maps component of Syncfusion, and more details.
+description: Check out and learn how to add, configure and personalize annotations in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # Annotations in Blazor Maps component
 
-Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.
+Annotations mark areas of interest on the map using text, shapes, or images. Any number of annotations can be added to the Maps component.
 
 ## Annotation
 
-By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html), text content or an HTML element can be specified to render a new HTML element in Maps.
+Use the `ContentTemplate` property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) to render text content or an HTML element as an annotation in Maps.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -34,6 +35,7 @@ By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfus
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Annotation](./images/Annotation/blazor-maps-annotation.PNG)
@@ -42,9 +44,10 @@ By using the `ContentTemplate` property of [MapsAnnotation](https://help.syncfus
 
 ### Changing the z-index
 
-The stack order of an annotation element can be changed using the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_ZIndex) property in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
+Change the stacking order of an annotation element using the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_ZIndex) property of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -63,15 +66,17 @@ The stack order of an annotation element can be changed using the [ZIndex](http
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Changing ZIndex in Blazor Maps Annotation](./images/Annotation/blazor-maps-annotation-zindex.PNG)
 
 ### Positioning an annotation
 
-Annotations can be placed anywhere in the Maps by specifying percentage values to the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_Y) properties in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
+Place annotations anywhere on the map by specifying percentage values for the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_Y) properties of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -90,15 +95,17 @@ Annotations can be placed anywhere in the Maps by specifying percentage values t
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Changing Annotation Position in Blazor Maps](./images/Annotation/blazor-maps-annotation-position.PNG)
 
 ### Alignment of an annotation
 
-Annotations can be aligned using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_VerticalAlignment)  properties in the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html). The possible values can be [**Center**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Center), [**Far**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Far), [**Near**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Near) and [**None**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_None).
+Align annotations using the [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_HorizontalAlignment) and [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html#Syncfusion_Blazor_Maps_MapsAnnotation_VerticalAlignment) properties of [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html). Possible values: [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Far), [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_Near) and [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationAlignment.html#Syncfusion_Blazor_Maps_AnnotationAlignment_None).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -117,15 +124,17 @@ Annotations can be aligned using the [HorizontalAlignment](https://help.syncfusi
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Changing Alignment of Blazor Maps Annotation](./images/Annotation/blazor-maps-annotation-alignment.PNG)
 
 ## Multiple Annotation
 
-Multiple annotations can be added to the Maps by adding multiple [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) in the [MapsAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotations.html) and customization for the annotations can be done with the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html).
+Add multiple annotations by including multiple [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) elements within [MapsAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotations.html). Customize each annotation using the [MapsAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAnnotation.html) properties.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -151,6 +160,7 @@ Multiple annotations can be added to the Maps by adding multiple [MapsAnnotation
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
-![Blazor Maps with Multiple Annotation](./images/Annotation/blazor-maps-multiple-annotation.PNG)
\ No newline at end of file
+![Blazor Maps with Multiple Annotation](./images/Annotation/blazor-maps-multiple-annotation.PNG)
diff --git a/blazor/maps/bubble.md b/blazor/maps/bubble.md
index 2f19e2b6d9..113a512557 100644
--- a/blazor/maps/bubble.md
+++ b/blazor/maps/bubble.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Bubble in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about the bubble in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to add and customize bubble markers in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,9 +9,10 @@ documentation: ug
 
 # Bubble in Blazor Maps Component
 
-Bubbles in the Maps control represents the underlying data values of the Maps. It can be scattered throughout the Maps shapes that contain values in the data source. Bubbles are enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Visible) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) to **true**. To add bubbles to the Maps, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_DataSource) property of the [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the field name, that contains the numerical data, in the data source to the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ValuePath) property.
+Bubbles in the Maps control represent underlying data values. They render over map shapes that have corresponding data in the data source. Enable bubbles by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Visible) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) to **true**. To add bubbles, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_DataSource) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the numeric field name in the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ValuePath) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -27,42 +28,45 @@ Bubbles in the Maps control represents the underlying data values of the Maps. I
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<Country> PopulationDetails = new List<Country> {
-       new Country
-       {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
-       },
-       new Country
-       {
-           Name = "Russia", Population = 142905208, Color = "#7bc1e8"
-       },
+        new Country
+        {
+            Name = "United States", Population = 325020000, Color = "#b5e485"
+        },
+        new Country
+        {
+            Name = "Russia", Population = 142905208, Color = "#7bc1e8"
+        },
        new Country
         {
-           Name="India", Population=1198003000, Color = "#df819c"
+            Name ="India", Population=1198003000, Color = "#df819c"
         }
     };
 }
+
 ```
 
 ![Blazor Maps with Bubbles](./images/Bubble/blazor-maps-bubble.png)
 
 ## Bubble shapes
 
-The following types of shapes are available to render the bubbles in Maps.
+The following bubble shapes are available in Maps:
 
-* Circle
-* Square
+- Circle
+- Square
 
-By default, bubbles are rendered in the **Circle** type. To change the type of the bubble, set the [BubbleType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_BubbleType) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) as **Square** to render the square shape bubbles.
+By default, bubbles render as **Circle**. To render squares, set the [BubbleType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_BubbleType) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) to **Square**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -79,7 +83,7 @@ By default, bubbles are rendered in the **Circle** type. To change the type of t
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
@@ -87,35 +91,37 @@ By default, bubbles are rendered in the **Circle** type. To change the type of t
         public string Color { get; set; }
     };
     public List<Country> PopulationDetails = new List<Country> {
+        new Country
+        {
+            Name = "United States", Population = 325020000, Color = "#b5e485"
+        },
+        new Country
+        {
+            Name = "Russia", Population = 142905208, Color = "#7bc1e8"
+        },
        new Country
-       {
-           Name = "United States", Population = 325020000, Color = "#b5e485"
-       },
-       new Country
-       {
-           Name = "Russia", Population = 142905208, Color = "#7bc1e8"
-       },
-       new Country
-       {
-           Name = "India", Population=1198003000, Color = "#df819c"
-       }
+        {
+            Name ="India", Population=1198003000, Color = "#df819c"
+        }
     };
 }
+
 ```
 
 ![Blazor Maps with Square Bubbles](./images/Bubble/blazor-maps-square-bubble.PNG)
 
 ## Customization
 
-The following properties and a class are available in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) to customize the bubbles of the Maps component.
+Use the following [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) APIs to customize bubble appearance:
 
-* [MapsBubbleBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleBorder.html) - To customize the color and width of the border of the bubbles in Maps.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Fill) - To apply the color for bubbles in Maps.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Opacity) - To apply opacity to the bubbles in Maps.
-* [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_AnimationDelay) - To change the time delay in the transition for bubbles.
-* [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_AnimationDuration) - To change the time duration of animation for bubbles.
+- [MapsBubbleBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleBorder.html) — Customize border color and width.
+- [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Fill) — Sets bubble fill color.
+- [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Opacity) — Applies transparency.
+- [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_AnimationDelay) — To delay the transition.
+- [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_AnimationDuration) — Controls animation length.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -124,8 +130,7 @@ The following properties and a class are available in [MapsBubble](https://help.
                    ShapeDataPath="Name" ShapePropertyPath='new string[] {"name"}' TValue="Country">
             @* To add bubbles based on population count *@
             <MapsBubbleSettings>
-                <MapsBubble Visible="true" ValuePath="Population" Fill="green" MinRadius=5 MaxRadius=40 AnimationDelay=100
-				            AnimationDuration=1000 Opacity=1 DataSource="PopulationDetails" TValue="Country">
+                <MapsBubble Visible="true" ValuePath="Population" Fill="green" MinRadius=5 MaxRadius=40 AnimationDelay=100 AnimationDuration=1000 Opacity=1 DataSource="PopulationDetails" TValue="Country">
                     <MapsBubbleBorder Color="blue" Width=2></MapsBubbleBorder>
                 </MapsBubble>
             </MapsBubbleSettings>
@@ -133,16 +138,17 @@ The following properties and a class are available in [MapsBubble](https://help.
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
     };
+
     public List<Country> PopulationDetails = new List<Country> {
        new Country
        {
-           Name ="Australia", Population = 325020000
+           Name = "Australia", Population = 325020000
        },
        new Country
        {
@@ -150,19 +156,21 @@ The following properties and a class are available in [MapsBubble](https://help.
        },
        new Country
        {
-           Name = "India", Population=1198003000
+           Name = "India", Population = 1198003000
        }
     };
 }
+
 ```
 
 ![Blazor Maps with Custom Bubbles](./images/Bubble/blazor-maps-custom-bubble.PNG)
 
 ## Setting colors to the bubbles from the data source
 
-The color for each bubble in the Maps can be set using the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ColorValuePath) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html). The value for the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ColorValuePath) property is the field name from the data source of the [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) which contains the color values.
+Assign each bubble colors using the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ColorValuePath) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html). Set this to the field in the bubble data source that contains color values.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -179,13 +187,14 @@ The color for each bubble in the Maps can be set using the [ColorValuePath](http
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<Country> PopulationDetails = new List<Country> {
        new Country
        {
@@ -201,15 +210,17 @@ The color for each bubble in the Maps can be set using the [ColorValuePath](http
        }
     };
 }
+
 ```
 
 ![Changing Bubbles Color in Blazor Maps](./images/Bubble/blazor-maps-change-bubble-color.PNG)
 
 ## Setting the range of the bubble size
 
-The size of the bubbles is calculated from the values got from the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ValuePath) property. The range for the radius of the bubbles can be modified using [MinRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_MinRadius) and [MaxRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_MaxRadius) properties.
+Bubble size is computed from the values specified by [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ValuePath) property. Control the radius range using [MinRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_MinRadius) and [MaxRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_MaxRadius) properties.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -233,30 +244,33 @@ The size of the bubbles is calculated from the values got from the [ValuePath](h
         public double Density { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
        new PopulationDetail
        {
-           Name ="United States", Population = 325020000, Density = 33, Color="yellow"
+           Name = "United States", Population = 325020000, Density = 33, Color = "yellow"
        },
        new PopulationDetail
        {
-           Name = "Russia", Population = 142905208, Density = 8.3, Color="red"
+           Name = "Russia", Population = 142905208, Density = 8.3, Color = "red"
        },
        new PopulationDetail
        {
-           Name="India", Population=1198003000, Density=364, Color="blue"
+           Name = "India", Population = 1198003000, Density = 364, Color = "blue"
        }
     };
 }
+
 ```
 
 ![Blazor Maps with Different Bubble Size](./images/Bubble/blazor-maps-different-bubble-size.png)
 
 ## Multiple bubble groups
 
-Multiple groups of bubbles can be added in the Maps by adding multiple [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) in the [MapsBubbleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSettings.html) and customization for the bubbles can be done with the [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) class. In the following example, the gender-wise population ratio is demonstrated with two different bubble groups.
+Add multiple bubble groups by defining more than one [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) within [MapsBubbleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSettings.html). Each group can use distinct settings. The following example shows gender-wise population ratios using two bubble groups.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -276,7 +290,7 @@ Multiple groups of bubbles can be added in the Maps by adding multiple [MapsBubb
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class GenderRatio
     {
         public string Country { get; set; }
@@ -288,28 +302,30 @@ Multiple groups of bubbles can be added in the Maps by adding multiple [MapsBubb
 
     public List<GenderRatio> GenderRatios = new List<GenderRatio> {
         new GenderRatio {
-            Country ="United States", FemaleRatio =50.50442726, MaleRatio =49.49557274, FemaleRatioColor ="green", MaleRatioColor = "blue"
+            Country = "United States", FemaleRatio = 50.50442726, MaleRatio = 49.49557274, FemaleRatioColor = "green", MaleRatioColor = "blue"
         },
         new GenderRatio {
-            Country ="India", FemaleRatio =48.18032713, MaleRatio =51.81967287, FemaleRatioColor ="blue", MaleRatioColor = "#c2d2d6"
+            Country = "India", FemaleRatio = 48.18032713, MaleRatio = 51.81967287, FemaleRatioColor = "blue", MaleRatioColor = "#c2d2d6"
         },
         new GenderRatio {
-            Country ="Oman", FemaleRatio =34.15597234, MaleRatio =65.84402766, FemaleRatioColor ="#09156d", MaleRatioColor="orange"
+            Country = "Oman", FemaleRatio = 34.15597234, MaleRatio = 65.84402766, FemaleRatioColor = "#09156d", MaleRatioColor = "orange"
         },
         new GenderRatio {
-            Country ="United Arab Emirates", FemaleRatio =27.59638942, MaleRatio =72.40361058, FemaleRatioColor ="#09156d", MaleRatioColor="orange"
+            Country = "United Arab Emirates", FemaleRatio = 27.59638942, MaleRatio = 72.40361058, FemaleRatioColor = "#09156d", MaleRatioColor = "orange"
         }
     };
 }
+
 ```
 
 ![Blazor Maps with Multiple Bubble Groups](./images/Bubble/blazor-maps-multiple-bubble-group.png)
 
 ## Enable tooltip for bubble
 
-The tooltip for the bubbles can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of the [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html) as **true**. The content for the tooltip can be set using the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property in the [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html) of the [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) where the value for the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property is the field name from the data source of the [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html). Any HTML element can be added as the template in tooltip using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html#Syncfusion_Blazor_Maps_MapsBubbleTooltipSettings_TooltipTemplate) property.
+Enable bubble tooltips by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html) to **true**. Specify the tooltip content using the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property. Use [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html#Syncfusion_Blazor_Maps_MapsBubbleTooltipSettings_TooltipTemplate) to define custom HTML content.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -327,17 +343,18 @@ The tooltip for the bubbles can be enabled by setting the [Visible](https://help
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<Country> PopulationDetails = new List<Country> {
        new Country
        {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
+           Name = "United States", Population = 325020000, Color = "#b5e485"
        },
        new Country
        {
@@ -345,10 +362,11 @@ The tooltip for the bubbles can be enabled by setting the [Visible](https://help
        },
        new Country
        {
-           Name="India", Population=1198003000, Color = "#df819c"
+           Name = "India", Population = 1198003000, Color = "#df819c"
        }
     };
 }
+
 ```
 
-![Displaying Tooltip for Bubbles in Blazor Maps](./images/Bubble/blazor-maps-bubble-tooltip.PNG)
\ No newline at end of file
+![Displaying Tooltip for Bubbles in Blazor Maps](./images/Bubble/blazor-maps-bubble-tooltip.PNG)
diff --git a/blazor/maps/color-mapping.md b/blazor/maps/color-mapping.md
index 7ce22be8c0..bf2cb40693 100644
--- a/blazor/maps/color-mapping.md
+++ b/blazor/maps/color-mapping.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Color Mapping in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about color mapping in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about color mapping in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,23 +9,24 @@ documentation: ug
 
 # Color Mapping in Blazor Maps Component
 
-Color mapping is used to customize the shape colors based on the given values. It has three types.
+Color mapping customizes shape colors based on data values. It supports three types.
 
 1. Range color mapping
 2. Equal color mapping
-3. Desaturation color mapping.
+3. Desaturation color mapping
 
-To add color mapping to the shapes of the Maps, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set the field name which contains the color value in the data source to the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property.
+To apply color mapping to map shapes, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html), and set the field that contains the color value to the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property.
 
 ## Types of color mapping
 
 ### Range color mapping
 
-Range color mapping applies the color to the shapes of the Maps which matches the numeric values in the data source within the given color mapping ranges. The [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) are used to specify the color mapping ranges in the Maps.
+Range color mapping applies colors to map shapes whose numeric values fall within the given color mapping ranges. The [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) defines the color mapping ranges.
 
-Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) class as **Density**. The range values can be set using the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) to **Density**. Configure range values using [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -43,7 +44,7 @@ Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Code { get; set; }
@@ -52,6 +53,7 @@ Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.
         public double Population { get; set; }
         public double Density { get; set; }
     };
+
     public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
        new PopulationDetail
        {
@@ -71,17 +73,19 @@ Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.
        }
     };
 }
+
 ```
 
 ![Blazor Maps with Range Color Mapping](./images/Colormapping/blazor-maps-range-color-mapping.png)
 
 ### Equal color mapping
 
-Equal color mapping applies the color to the shapes of the Maps when the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Value) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) matches with the values provided in the data source.
+Equal color mapping applies colors when the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Value) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) matches a corresponding value in the data source.
 
-The following example demonstrates the permanent and non-permanent countries in the UN security council, in 2017.  Bind the **CouncilMemberDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) class and set the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) class as **Membership**. Set the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Value) property in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) class to **Permanent** and **Non-Permanent** in the different set of shape color mapping properties. If the corresponding value of the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property matches with the corresponding field name in the data source, then the given color will be applied.
+The following example highlights permanent and non-permanent members of the UN Security Council in 2017. Bind **CouncilMemberDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) to **Membership**. Configure [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Value) property as **Permanent** and **Non-Permanent** in separate mappings. When the value specified by [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property matches with the corresponding field name in the data source, the corresponding color is applied.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -98,34 +102,37 @@ The following example demonstrates the permanent and non-permanent countries in
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class UNCouncil
     {
         public string Country { get; set; }
         public string Membership { get; set; }
     };
-    public List<UNCouncil> CouncilMemberDetails = new List<UNCouncil>{
-         new UNCouncil { Country= "China", Membership= "Permanent"},
-         new UNCouncil { Country= "France",Membership= "Permanent" },
-         new UNCouncil { Country= "Russia",Membership= "Permanent"},
-         new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent"},
-         new UNCouncil { Country= "Poland",Membership= "Non-Permanent"},
-         new UNCouncil { Country= "Sweden",Membership= "Non-Permanent"}
+
+    public List<UNCouncil> CouncilMemberDetails = new List<UNCouncil> {
+        new UNCouncil { Country = "China", Membership = "Permanent" },
+        new UNCouncil { Country = "France", Membership = "Permanent" },
+        new UNCouncil { Country = "Russia", Membership = "Permanent" },
+        new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Poland", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Sweden", Membership = "Non-Permanent" }
     };
 }
+
 ```
 
 ![Blazor Maps with Equal Color Mapping](./images/Colormapping/blazor-maps-equal-color-mapping.png)
 
 ### Desaturation color mapping
 
-Desaturation color mapping applies the color to the shapes of the Maps similar to the range color mapping. The opacity will be applied in this color mapping based on the [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_MaxOpacity) properties in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Desaturation color mapping works like range color mapping, but applies opacity based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_MaxOpacity) properties in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
-N>The following example shows how to apply desaturation color mapping to shapes with the data source **PopulationDetails** that is available in the [Range color mapping](#range-color-mapping) section.
+N>The following example applies desaturation color mapping to shapes using the **PopulationDetails** data from the [Range color mapping](#range-color-mapping) section.
 
-Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) as **Density**. The range values can be set using the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Bind **PopulationDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) to **Density**. Configure the range using [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -139,19 +146,21 @@ Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Desaturation Color Mapping](./images/Colormapping/blazor-maps-desaturation-color-mapping.png)
 
 ## Multiple colors for a single shape
 
-Multiple colors can be added to the color mapping which can be used as gradient effect to a specific shape based on the ranges in the data source. By using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html), any number of colors can be set to the shapes as a gradient.
+Multiple colors can be added to color mapping to create a gradient effect for specific shapes based on ranges in the data source. Using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html), multiple colors can be assigned to shapes as a gradient.
 
-N>The following example demonstrates how to use multiple colors in color mapping with the data source  **PopulationDetails** that is available in the [Range color mapping](#range-color-mapping) section.
+N>The following example demonstrates multiple colors in color mapping using the **PopulationDetails** data from the [Range color mapping](#range-color-mapping) section.
 
-Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) as **Density**. The range values can be set using the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Bind **PopulationDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and set [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) to **Density**. Configure the range values using [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_EndRange) properties in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -167,19 +176,21 @@ Bind the **PopulationDetails** data to the [DataSource](https://help.syncfusion.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Multi Color Mapping](./images/Colormapping/blazor-maps-multi-color-mapping.png)
 
 ## Color for items excluded from color mapping
 
-Color mapping can be applied to the shapes in the Maps which does not match color mapping criteria such as range or equal values using the  [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Color mapping can also define a color for shapes that do not match range or equal-value criteria by using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property of [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
-N>The following example shows how to set the color for items excluded from the color mapping with the data source  **PopulationDetails** that is available in the [Range color mapping](#range-color-mapping) section.
+N>The following example shows how to set a color for items excluded from color mapping using the **PopulationDetails** data from the [Range color mapping](#range-color-mapping) section.
 
-In the following example, color mapping is added for the ranges from 0 to 300. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property alone in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+In the following example, color mapping is configured for the range 0 to 300. If any records fall outside this range, the mapping is not applied. To color these excluded items, set only the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -196,25 +207,27 @@ In the following example, color mapping is added for the ranges from 0 to 300. I
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Exculde Color Mapping](./images/Colormapping/blazor-maps-exclude-color-mapping.png)
 
 ## Color mapping for bubbles
 
-The color mapping types such as range color mapping, equal color mapping and desaturation color mapping are applicable for bubbles in the Maps. To add color mapping for bubbles of the Maps, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_DataSource) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the field name which contains the color value in the data source to the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ColorValuePath) property. Multiple colors for a single set of bubbles and color for excluded items from [MapsBubbleColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleColorMapping.html) are also applicable for bubbles.
+Range, equal, and desaturation color mapping types are also supported for bubbles. To apply color mapping to bubbles, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_DataSource) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the field that contains the color value to [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ColorValuePath) property. Multiple colors for a single set of bubbles and colors for excluded items using [MapsBubbleColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleColorMapping.html) are also supported.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
 		        ShapeDataPath="Name" ShapePropertyPath='new string[] {"name"}' TValue="BubbleData">
-         <MapsShapeSettings Fill="#E5E5E5"/>
+        <MapsShapeSettings Fill="#E5E5E5"/>
             <MapsBubbleSettings>
                 <MapsBubble Visible="true" ValuePath="Population" ColorValuePath="Population" MinRadius=5 DataSource="BubbleColorMapping"
-				        TValue="BubbleData">
+			        TValue="BubbleData">
                     <MapsBubbleColorMappings>
                         <MapsBubbleColorMapping Value="38332521" Color='new string[] {"#D84444"}' />
                         <MapsBubbleColorMapping Value="19651127" Color='new string[] {"#316DB5"}' />
@@ -226,18 +239,20 @@ The color mapping types such as range color mapping, equal color mapping and des
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class BubbleData
     {
         public string Name { get; set; }
         public string Population { get; set; }
     };
+
     public List<BubbleData> BubbleColorMapping = new List<BubbleData>{
-         new BubbleData { Name= "India", Population= "38332521"},
-         new BubbleData { Name= "Russia", Population= "19651127" },
-         new BubbleData { Name= "Pakistan", Population= "3090416"},
+        new BubbleData { Name = "India", Population = "38332521" },
+        new BubbleData { Name = "Russia", Population = "19651127" },
+        new BubbleData { Name = "Pakistan", Population = "3090416"}
     };
 }
+
 ```
 
-![Blazor Maps with Bubbles Color Mapping](./images/Colormapping/blazor-maps-bubble-color-mapping.PNG)
\ No newline at end of file
+![Blazor Maps with Bubbles Color Mapping](./images/Colormapping/blazor-maps-bubble-color-mapping.PNG)
diff --git a/blazor/maps/customization.md b/blazor/maps/customization.md
index c497ce8eff..a2f3bc9f1d 100644
--- a/blazor/maps/customization.md
+++ b/blazor/maps/customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Customization in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about customization in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about customization in Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -11,9 +11,10 @@ documentation: ug
 
 ## Setting the size for Maps
 
-The width and height of the Maps can be set using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Height) properties in the Maps component. Percentage or pixel values can be used for the height and width values.
+Set the Maps width and height by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Height) properties. Specify values in percentage or pixels.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Height="600px" Width="300px">
@@ -23,21 +24,23 @@ The width and height of the Maps can be set using the [Width](https://help.syncf
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Custom Size](./images/Customization/blazor-maps-custom-size.PNG)
 
 ## Maps title
 
-The title for the Maps can be set using the [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html) class. It can be customized using the following properties and classes.
+Configure the title using [MapsTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html). Use the following properties to customize it:
 
-* [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Alignment) - To customize the alignment for the text in the title for the Maps. The possible values are [**Center**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Center), [**Near**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Near) and [**Far**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Far).
-* [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Description) - To set the description of the title in Maps.
-* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) - To set the text for the title in Maps.
-* [MapsTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleTextStyle.html) - To customize the text of the title in Maps.
-* [MapsSubtitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSubtitleSettings.html) - To customize the subtitle for the Maps.
+* [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Alignment) – Controls title text alignment: [**Center**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Center), [**Near**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Near), or [**Far**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html#Syncfusion_Blazor_Maps_Alignment_Far).
+* [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Description) – Sets an accessible description for the title.
+* [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleSettings.html#Syncfusion_Blazor_Maps_MapsTitleSettings_Text) – Defines the title text.
+* [MapsTitleTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTitleTextStyle.html) – Customizes title text appearance.
+* [MapsSubtitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSubtitleSettings.html) – Adds and customizes a subtitle.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Height="300px">
@@ -51,13 +54,14 @@ The title for the Maps can be set using the [MapsTitleSettings](https://help.syn
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Customizing Blazor Maps Title](./images/Customization/blazor-maps-title-customization.PNG)
 
 ## Setting theme
 
-The Maps control supports following themes.
+The Maps control supports the following themes.
 
 * Material
 * Fabric
@@ -70,9 +74,10 @@ The Maps control supports following themes.
 * HighContrastLight
 * Tailwind
 
-By default, the Maps are rendered by the **Material** theme. The theme of the Maps component is changed using the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Theme) property.
+By default, Maps renders with the **Material** theme. Change the theme by using the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Theme) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Theme="Syncfusion.Blazor.Theme.HighContrastLight">
@@ -82,19 +87,21 @@ By default, the Maps are rendered by the **Material** theme. The theme of the Ma
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Applying Theme in Blazor Maps](./images/Customization/blazor-maps-theme.PNG)
 
 ## Customizing Maps container
 
-The following property and classes are available to customize the container in the Maps.
+Use the following to customize the Maps container:
 
-* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Background) - To apply the background color to the container in the Maps.
-* [MapsBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBorder.html) - To customize the color and width of the border of the Maps.
-* [MapsMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMargin.html) - To customize the margins of the Maps.
+* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Background) – Applies a background color to the container.
+* [MapsBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBorder.html) – Customizes border color and width.
+* [MapsMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMargin.html) – Adjusts container margins.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Height="300px" Width="400px" Background="#CCD1D1">
@@ -106,15 +113,17 @@ The following property and classes are available to customize the container in t
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Customizing Blazor Maps Container](./images/Customization/blazor-maps-container-customization.PNG)
 
 ## Customizing Maps area
 
-By default, the background color of the shape maps is set as **white**. To modify the background color of the Maps area, the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaSettings.html#Syncfusion_Blazor_Maps_MapsAreaSettings_Background) property in the [MapsAreaSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaSettings.html) is used. The border of the Maps area can be customized using the [MapsAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaBorder.html).
+The shape map background color is **white** by default. Modify the background color by using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaSettings.html#Syncfusion_Blazor_Maps_MapsAreaSettings_Background) property in [MapsAreaSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaSettings.html). Customize the area border by using [MapsAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsAreaBorder.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -128,22 +137,24 @@ By default, the background color of the shape maps is set as **white**. To modif
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Customizing Blazor Maps Area](./images/Customization/blazor-maps-area-customization.PNG)
 
 ## Customizing the shapes
 
-The following properties and class are available in [MapsShapeSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) to customize the shapes of the Maps component.
+The following properties and class in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) customize map shapes:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) - To apply the color to the shapes.
-* [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Autofill) - To apply the palette colors to the shapes if it is set as true.
-* [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Palette) - To set the custom palette for the shapes.
-* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_DashArray) - To define the pattern of dashes and gaps that is applied to the outline of the shapes.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Opacity) - To customize the transparency for the shapes.
-* [MapsShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeBorder.html) - To customize the color and width of the border of the shapes.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) – Applies a fill color to shapes.
+* [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Autofill) – Applies palette colors to shapes when set to true.
+* [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Palette) – Sets a custom palette for shapes.
+* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_DashArray) – Defines dash and gap patterns for shape outlines.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Opacity) – Controls shape transparency.
+* [MapsShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeBorder.html) – Customizes border color and width for shapes.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -156,15 +167,17 @@ The following properties and class are available in [MapsShapeSettings](https://
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Custom Shape](./images/Customization/blazor-maps-custom-shape.png)
 
 ## Setting color to the shapes from the data source
 
-The color for each shape in the Maps can be set using the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). The value for the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property is the field name from the data source of the [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html) which contains the color values.
+Set a shape color from data by using the [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_ColorValuePath) property of [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Provide a field name from the layer data source that contains color values.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -175,19 +188,20 @@ The color for each shape in the Maps can be set using the [ColorValuePath](https
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Data
     {
         public string Continent { get; set; }
         public string Color { get; set; }
     };
-    public List<Data> ShapeColor = new List<Data>{
-        new Data { Continent= "North America", Color= "#71B081" },
-        new Data { Continent= "South America", Color= "#5A9A77" },
-        new Data { Continent= "Africa", Color= "#498770" },
-        new Data { Continent= "Europe", Color= "#39776C" },
-        new Data { Continent= "Asia", Color= "#266665" },
-        new Data { Continent= "Australia", Color= "#124F5E" }
+
+    public List<Data> ShapeColor = new List<Data> {
+        new Data { Continent = "North America", Color = "#71B081" },
+        new Data { Continent = "South America", Color = "#5A9A77" },
+        new Data { Continent = "Africa", Color = "#498770" },
+        new Data { Continent = "Europe", Color = "#39776C" },
+        new Data { Continent = "Asia", Color = "#266665" },
+        new Data { Continent = "Australia", Color = "#124F5E" }
     };
 }
 ```
@@ -196,9 +210,10 @@ The color for each shape in the Maps can be set using the [ColorValuePath](https
 
 ## Applying border to individual shapes
 
-The border of each shape in the Maps can be customized using the [BorderColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderColorValuePath) and [BorderWidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderWidthValuePath) properties to modify the color and the width of the border respectively. The field name in the data source of the layer which contains the color and the width values must be set in the [BorderColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderColorValuePath) and [BorderWidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderWidthValuePath) properties respectively. If the values of [BorderColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderColorValuePath) and [BorderWidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderWidthValuePath) do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the border property in the shapeSettings.
+Customize the border of each shape by using [BorderColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderColorValuePath) and [BorderWidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_BorderWidthValuePath) properties to define color and width from the layer data source. If these path values do not match a data field, the shape border configuration in shape settings is applied.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -217,15 +232,17 @@ The border of each shape in the Maps can be customized using the [BorderColorVal
         public double Width { get; set; }
         public string BorderColor { get; set; }
     };
-    public List<Data> ShapeColor = new List<Data>{
-        new Data { Continent= "North America", Color= "#71B081", Width=2 , BorderColor="#CCFFE5"},
-        new Data { Continent= "South America", Color= "#5A9A77", Width=2 , BorderColor="red"},
-        new Data { Continent= "Africa", Color= "#498770", Width=2 , BorderColor="#FFCC99"},
-        new Data { Continent= "Europe", Color= "#39776C" , Width=2 , BorderColor="#66B2FF"},
-        new Data { Continent= "Asia", Color= "#266665", Width=2 , BorderColor="#999900"},
-        new Data { Continent= "Australia", Color= "#124F5E", Width=2 , BorderColor="blue"}
+
+    public List<Data> ShapeColor = new List<Data> {
+        new Data { Continent  "North America", Color = "#71B081", Width = 2 , BorderColor = "#CCFFE5" },
+        new Data { Continent = "South America", Color = "#5A9A77", Width = 2 , BorderColor = "red" },
+        new Data { Continent = "Africa", Color = "#498770", Width = 2 , BorderColor = "#FFCC99" },
+        new Data { Continent = "Europe", Color = "#39776C" , Width = 2 , BorderColor = "#66B2FF" },
+        new Data { Continent = "Asia", Color = "#266665", Width = 2 , BorderColor = "#999900" },
+        new Data { Continent = "Australia", Color = "#124F5E", Width = 2 , BorderColor = "blue" }
     };
 }
+
 ```
 
 ![Blazor Maps with Custom Border Color and Width](./images/Customization/blazor-maps-custom-border-color-and-width.PNG)
@@ -243,9 +260,10 @@ The Maps control supports the following projection types:
 * Winkel3
 * AitOff
 
-By default, the Maps are rendered by the **Mercator** projection type in which the Maps are rendered based on the coordinates. So, the Maps is not stretched. To change the type of projection in the Maps, the [ProjectionType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ProjectionType) property is used.
+By default, Maps renders with the **Mercator** projection, which draws shapes based on geographic coordinates. Change the projection by using the [ProjectionType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ProjectionType) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 @* To change Maps projection *@
@@ -255,6 +273,7 @@ By default, the Maps are rendered by the **Mercator** projection type in which t
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
-![Blazor Maps with Miller Projection](./images/Customization/blazor-maps-miller-projection.png)
\ No newline at end of file
+![Blazor Maps with Miller Projection](./images/Customization/blazor-maps-miller-projection.png)
diff --git a/blazor/maps/data-labels.md b/blazor/maps/data-labels.md
index b18d65a650..0c275a7696 100644
--- a/blazor/maps/data-labels.md
+++ b/blazor/maps/data-labels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Data Labels in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about data labels in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to configure and customize data labels in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # Data labels in Blazor Maps Component
 
-Data labels provide information to users about the shapes of the Maps component. It can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property of the [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) to **true**.
+Data labels display text for shapes in the Maps component. Enable them by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) to **true**.
 
 ## Adding data labels
 
-To display data labels in the Maps, the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) must be used. The value of the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property can be taken from the field name in the shape data or data source. In the following example, the value of the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property is the field name in the shape data of the Maps layer.
+Use the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) to specify the field used for label text. The value can come from a field in the shape data or from the layer’s data source. In the following example, the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property value is taken from the shape data of the Maps layer.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -27,13 +28,15 @@ To display data labels in the Maps, the [LabelPath](https://help.syncfusion.com/
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Data Label](./images/DataLabel/blazor-maps-data-label.png)
 
-In the following example, the value of [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property is set from the field name in the data source of the layer settings.
+In the following example, the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelPath) property value is taken from the field in the layer’s data source.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps ID="Maps">
@@ -47,7 +50,10 @@ In the following example, the value of [LabelPath](https://help.syncfusion.com/c
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
+    public string[] ShapePropertyPath = { "name" };
+    public string ShapeDataPath = "Name";
+
     public class PopulationDetail
     {
         public string Code { get; set; }
@@ -58,19 +64,18 @@ In the following example, the value of [LabelPath](https://help.syncfusion.com/c
         public string Color { get; set; }
         public string Continent { get; set; }
     };
+
     public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
         new PopulationDetail {
-            Code = "AF", Value= 53, Name= "Afghanistan", Population= 29863010, Density= 119, Color = "Red", Continent = "Asia"
+            Code = "AF", Value = 53, Name = "Afghanistan", Population = 29863010, Density = 119, Color = "Red", Continent = "Asia"
         },
         new PopulationDetail {
-            Code= "AL", Value= 117, Name= "Albania", Population= 3195000, Density= 111, Color = "Blue", Continent = "Europe"
+            Code = "AL", Value = 117, Name = "Albania", Population = 3195000, Density = 111, Color = "Blue", Continent = "Europe"
         },
         new PopulationDetail {
-            Code= "DZ", Value= 15, Name= "Algeria", Population= 34895000, Density= 15, Color = "Green", Continent = "Africa"
+            Code = "DZ", Value = 15, Name = "Algeria", Population = 34895000, Density = 15, Color = "Green", Continent = "Africa"
         }
     };
-    public string[] ShapePropertyPath = { "name" };
-    public string ShapeDataPath = "Name";
 }
 ```
 
@@ -78,14 +83,15 @@ In the following example, the value of [LabelPath](https://help.syncfusion.com/c
 
 ## Customization
 
-The following properties and classes are available in the [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) to customize the data label of the Maps component.
+The following options in [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) customize the appearance of data labels:
 
-* [MapsLayerDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerDataLabelBorder.html) - To customize the color and width for the border of the data labels in Maps.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Fill) - To apply the color of the data labels in Maps.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Opacity) - To customize the transparency of the data labels in Maps.
-* [MapsLayerDataLabelTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerDataLabelTextStyle.html) - To customize the text style of the data labels in Maps.
+- [MapsLayerDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerDataLabelBorder.html): Configures label border color and width.
+- [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Fill): Sets the label background color.
+- [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Opacity): Controls label transparency.
+- [MapsLayerDataLabelTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerDataLabelTextStyle.html): Configures label text style.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -101,15 +107,17 @@ The following properties and classes are available in the [MapsDataLabelSettings
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Custom Data Label](./images/DataLabel/blazor-maps-custom-data-label.PNG)
 
 ## Label animation
 
-The data labels can be animated during the initial rendering of the Maps. This can be enabled by setting the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_AnimationDuration) property in the `MapsDataLabelSettings` of the Maps. The duration of the animation is specified in milliseconds.
+Animate data labels on initial render by setting the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_AnimationDuration) property in `MapsDataLabelSettings`. The duration is specified in milliseconds.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -122,19 +130,21 @@ The data labels can be animated during the initial rendering of the Maps. This c
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with data label animation](./images/DataLabel/blazor-maps-data-label-animation.gif)
 
 ## Smart labels
 
-The Maps component provides an option to handle the labels when they intersect with the corresponding shape borders using the [SmartLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_SmartLabelMode) property. The following options are available in the [SmartLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_SmartLabelMode) property.
+Handle labels that intersect shape borders by using the [SmartLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_SmartLabelMode) property. Available options:
 
-* None
-* Hide
-* Trim
+- None
+- Hide
+- Trim
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -147,19 +157,20 @@ The Maps component provides an option to handle the labels when they intersect w
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Smart Data Label](./images/DataLabel/blazor-maps-smart-data-label.png)
 
 ## Intersect action
 
-The Maps component provides an option to handle the labels when a label intersects with another label using the [IntersectionAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_IntersectionAction) property. The following options are available in the [IntersectionAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_IntersectionAction) property.
-
-* None
-* Hide
-* Trim
+Handle labels that intersect with other labels by using the [IntersectionAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_IntersectionAction) property. Available options:
 
+- None
+- Hide
+- Trim
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -172,17 +183,19 @@ The Maps component provides an option to handle the labels when a label intersec
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps Label with Intersect Action](./images/DataLabel/blazor-maps-data-label-trim.png)
 
 ## Adding data label as a template
 
-The data label can be added as a template in the Maps component. The [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelTemplate) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) is used to set the data label as a template. Any text or HTML element can be added as the template in data labels.
+Add data labels using a template by setting the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelTemplate) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html). Any text or HTML element can be used within the template.
 
-N>The customization properties of data label, [SmartLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_SmartLabelMode), [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_AnimationDuration) and [IntersectionAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_IntersectionAction) properties are not applicable to [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelTemplate) property. The styles can be applied to the label template using the CSS styles of the template element.
+N> The data label customization properties [SmartLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_SmartLabelMode), [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_AnimationDuration), and [IntersectionAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_IntersectionAction) do not apply to [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_LabelTemplate). Style the template using CSS on the template elements.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -203,7 +216,10 @@ N>The customization properties of data label, [SmartLabelMode](https://help.sync
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
+    public string[] ShapePropertyPath = { "name" };
+    public string ShapeDataPath = "Name";
+
     public class PopulationDetail
     {
         public string Code { get; set; }
@@ -214,20 +230,14 @@ N>The customization properties of data label, [SmartLabelMode](https://help.sync
         public string Color { get; set; }
         public string Continent { get; set; }
     };
+
     public List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
-        new PopulationDetail {
-            Code = "AF", Value= 53, Name= "Afghanistan", Population= 29863010, Density= 119, Color = "Red", Continent = "Asia"
-        },
-        new PopulationDetail {
-            Code= "AL", Value= 117, Name= "Albania", Population= 3195000, Density= 111, Color = "Blue", Continent = "Europe"
-        },
-        new PopulationDetail {
-            Code= "DZ", Value= 15, Name= "Algeria", Population= 34895000, Density= 15, Color = "Green", Continent = "Africa"
-        }
+        new PopulationDetail { Code = "AF", Value = 53, Name = "Afghanistan", Population = 29863010, Density = 119, Color = "Red", Continent = "Asia" },
+        new PopulationDetail { Code = "AL", Value = 117, Name = "Albania", Population = 3195000, Density = 111, Color = "Blue", Continent = "Europe" },
+        new PopulationDetail { Code = "DZ", Value = 15, Name = "Algeria", Population = 34895000, Density = 15, Color = "Green", Continent = "Africa" }
     };
-    public string[] ShapePropertyPath = { "name" };
-    public string ShapeDataPath = "Name";
 }
+
 ```
 
-![Blazor Maps with Data Label Template](./images/DataLabel/blazor-maps-data-label-template.PNG)
\ No newline at end of file
+![Blazor Maps with Data Label Template](./images/DataLabel/blazor-maps-data-label-template.PNG)
diff --git a/blazor/maps/how-to/add-different-types-of-markers.md b/blazor/maps/how-to/add-different-types-of-markers.md
index af5772c378..b73d19b268 100644
--- a/blazor/maps/how-to/add-different-types-of-markers.md
+++ b/blazor/maps/how-to/add-different-types-of-markers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Add different types of markers in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about add different types of markers in Syncfusion Blazor Maps component and more.
+description: Check out and learn how to  add and customize different marker types in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # Add different types of markers in Blazor Maps Component
 
-You can add different types of markers in the Maps component using the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html). The following steps describes how to add different types of markers.
+Markers can be added in the Maps component using the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html). The following steps describe how to add different types of markers.
 
 <b>Step 1</b>
 
-Initialize the Maps component with marker settings. Here, a marker is added with specified latitude and longitude of California using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Crosshair) property. You can customize the shape of the marker using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property and change the border color and width of the marker using the [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html).
+Initialize the Maps component with marker settings. A marker is added with the specified latitude and longitude of California using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property. The shape of the marker can be customized using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property, and the border color and width can be changed using the [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -40,9 +41,10 @@ Initialize the Maps component with marker settings. Here, a marker is added with
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     private List<City> Cities = new List<City> {
-            new City{ Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" }
+        new City{ Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" }
     };
 }
 ```
@@ -51,9 +53,10 @@ Initialize the Maps component with marker settings. Here, a marker is added with
 
 <b>Step 2</b>
 
-Customize the above option for n number of markers as demonstrated in the following code example.
+Customize the above option for multiple markers as shown in the following example.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -84,23 +87,27 @@ Customize the above option for n number of markers as demonstrated in the follow
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     public List<City> HighestPopulation = new List<City> {
         new City { Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" }
     };
+
     public List<City> LowestPopulation = new List<City> {
-        new City { Latitude=33.5302186, Longitude=-117.7418381, Name="Laguna Niguel" }
+        new City { Latitude = 33.5302186, Longitude = -117.7418381, Name = "Laguna Niguel" }
     };
 }
+
 ```
 
 ![Blazor Maps with Multiple Marker](../images/blazor-maps-multiple-marker.PNG)
 
 ## Tooltip for marker
 
-Tooltip is used to display more information about marker on mouse over or touch-end event. This can be enabled separately for layer or marker using the [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). The [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) property in tooltip takes the field name that presents in dataSource and displays that value as tooltip text.
+A tooltip displays additional information about a marker on mouse over or touch end. It can be enabled separately for a layer or marker using the [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). The [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html#Syncfusion_Blazor_Maps_MapsMarkerTooltipSettings_ValuePath) property specifies the field in the data source and displays that value as tooltip text.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -125,11 +132,13 @@ Tooltip is used to display more information about marker on mouse over or touch-
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     public List<City> HighestPopulation = new List<City> {
         new City { Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" }
     };
 }
+
 ```
 
-![Blazor Maps with Marker Tooltip](../images/blazor-maps-marker-tooltip.png)
\ No newline at end of file
+![Blazor Maps with Marker Tooltip](../images/blazor-maps-marker-tooltip.png)
diff --git a/blazor/maps/how-to/change-center-position-on-zooming.md b/blazor/maps/how-to/change-center-position-on-zooming.md
index 4c02271dfb..ff593b0306 100644
--- a/blazor/maps/how-to/change-center-position-on-zooming.md
+++ b/blazor/maps/how-to/change-center-position-on-zooming.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Change center position on zooming in Blazor Maps | Syncfusion
-description: Learn here all about change center position on zooming in Syncfusion Blazor Maps component and more.
+description: Check out and Learn how to change the map center during zooming in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,9 +9,10 @@ documentation: ug
 
 # Change center position on zooming in Blazor Maps Component
 
-Blazor Maps component provides support to change the center position of the Maps. This can be achieved by setting the coordinates of the location in the [MapsCenterPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsCenterPosition.html). The [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) property in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) can be used to focus the provided center position in the Maps.
+The Blazor Maps component supports changing the map's center position by specifying coordinates in the [MapsCenterPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsCenterPosition.html). The [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) property in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) focuses on the specified center position.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -22,6 +23,7 @@ Blazor Maps component provides support to change the center position of the Maps
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string"></MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
-![Blazor Maps with Zooming Factor](../images/blazor-maps-zooming.PNG)
\ No newline at end of file
+![Blazor Maps with Zooming Factor](../images/blazor-maps-zooming.PNG)
diff --git a/blazor/maps/how-to/creating-routes-between-the-markers.md b/blazor/maps/how-to/creating-routes-between-the-markers.md
index f31f758610..0590854fe1 100644
--- a/blazor/maps/how-to/creating-routes-between-the-markers.md
+++ b/blazor/maps/how-to/creating-routes-between-the-markers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: How to create routes between markers in Maps Component | Syncfusion
-description: Learn here all about creating routes between markers in the Syncfusion Blazor Maps component and more.
+description: Learn how to create routes between markers in the Syncfusion Blazor Maps component using API and navigation lines.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
 
 # Creating Routes Between Markers in the Blazor Maps component
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to visually indicate the source and destination, making it easier to view the path between them on the map.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to indicate the source and destination, providing a clear view of the path on the map.
 
-The data for navigation routes must be retrieved from an external source, such as the Google Maps Directions API. Below are the outlined steps to create a route using the coordinates obtained from the Google Maps Directions API.
+The data for navigation routes must be retrieved from an external source, such as the Google Maps Directions API. The following steps outline how to create a route using coordinates obtained from the Google Maps Directions API.
 
 1. Initialize the Google Maps Directions API.
 2. Create input fields for the source and destination.
@@ -19,134 +19,139 @@ The data for navigation routes must be retrieved from an external source, such a
 4. Plot markers on the map at the specified locations.
 5. Generate and visualize the route between the source and destination.
 
-Similarly, you can retrieve coordinates from other services and integrate them into the Maps.
+Similarly, coordinates can be retrieved from other services and integrated into the Maps component.
 
 ## Initialize the Google Maps Directions API
 
-To access the Google Maps Directions API, include the following script file in your HTML page and add your generated API key to the URL of the script.
+To access the Google Maps Directions API, include the following script file in the HTML page and add the generated API key to the script URL.
 
 ```
-   <script src="https://maps.googleapis.com/maps/api/js?key=Your_Key&callback=initMap&v=weekly" defer></script>
-   <script src="~/external-source.js"></script>
+
+<script src="https://maps.googleapis.com/maps/api/js?key=Your_Key&callback=initMap&v=weekly" defer></script>
+<script src="~/external-source.js"></script>
 
 ```
 
 ## Create Input Fields for Source and Destination
 
-To obtain the source and destination from the user, create two input fields as text boxes. Additionally, include a button to generate routes on the map based on their input. The process for generating routes based on the button click is explained in the next section.
+To obtain the source and destination, create two text box input fields. Additionally, include a button to generate routes on the map based on the entered values. The process for generating routes on button click is explained in the next section.
 
 ## Fetch coordinates from Google API
 
-To obtain the geographic coordinates (latitude and longitude) from the Google Directions API, send a request to the API with the specified address to retrieve the corresponding coordinates. These coordinates can then be used to add markers and navigation lines, allowing you to create a route on the map.
+To obtain the geographic coordinates (latitude and longitude) from the Google Directions API, send a request to the API with the specified address to retrieve the corresponding coordinates. These coordinates can then be used to add markers and navigation lines to create a route on the map.
 
 ```
-    private string markerSource = string.Empty;
-    private string markerDestination = string.Empty;
-    public List<double> LatitudePoints = new List<double>();
-    public List<double> LongitudePoints = new List<double>();
-    private ObservableCollection<MapMarker> Cities = new ObservableCollection<MapMarker>();
 
-    public class MapMarker
+private string markerSource = string.Empty;
+private string markerDestination = string.Empty;
+public List<double> LatitudePoints = new List<double>();
+public List<double> LongitudePoints = new List<double>();
+private ObservableCollection<MapMarker> Cities = new ObservableCollection<MapMarker>();
+
+public class MapMarker
+{
+    public double Latitude { get; set; }
+    public double Longitude { get; set; }
+    public string Name { get; set; }
+}
+
+public void ClearPoints()
+{
+    Cities.Clear();
+    LatitudePoints.Clear();
+    LongitudePoints.Clear();
+}
+
+public async Task AddRoutes()
+{
+    ClearPoints();
+    if (markerSource != string.Empty && markerDestination != string.Empty)
     {
-        public double Latitude { get; set; }
-        public double Longitude { get; set; }
-        public string Name { get; set; }
-    }
-
-    public void ClearPoints()
-    {
-        Cities.Clear();
-        LatitudePoints.Clear();
-        LongitudePoints.Clear();
-    }
-
-    public async Task AddRoutes()
-    {
-        ClearPoints();
-        if (markerSource != string.Empty && markerDestination != string.Empty)
-        {
-            var response = await JSRuntime.InvokeAsync<JsonElement>("initMap", markerSource, markerDestination);
-            Cities.Add(new MapMarker
-                {
-                    Latitude = response.GetProperty("startLocation").GetProperty("latitude").GetDouble(),
-                    Longitude = response.GetProperty("startLocation").GetProperty("longitude").GetDouble()
-                });
-            Cities.Add(new MapMarker
-                {
-                    Latitude = response.GetProperty("endLocation").GetProperty("latitude").GetDouble(),
-                    Longitude = response.GetProperty("endLocation").GetProperty("longitude").GetDouble()
-                });
-            foreach (var point in response.GetProperty("path").EnumerateArray())
+        var response = await JSRuntime.InvokeAsync<JsonElement>("initMap", markerSource, markerDestination);
+        Cities.Add(new MapMarker
             {
-                LatitudePoints.Add(point.GetProperty("latitude").GetDouble());
-                LongitudePoints.Add(point.GetProperty("longitude").GetDouble());
-            }
-
+                Latitude = response.GetProperty("startLocation").GetProperty("latitude").GetDouble(),
+                Longitude = response.GetProperty("startLocation").GetProperty("longitude").GetDouble()
+            });
+        Cities.Add(new MapMarker
+            {
+                Latitude = response.GetProperty("endLocation").GetProperty("latitude").GetDouble(),
+                Longitude = response.GetProperty("endLocation").GetProperty("longitude").GetDouble()
+            });
+        foreach (var point in response.GetProperty("path").EnumerateArray())
+        {
+            LatitudePoints.Add(point.GetProperty("latitude").GetDouble());
+            LongitudePoints.Add(point.GetProperty("longitude").GetDouble());
         }
     }
+}
+    
 ```
 
 ### Customize the travel mode in the Google Map Directions API
 
-You can retrieve coordinates based on different travel modes, such as DRIVING, WALKING, BICYCLING, or TRANSIT, using the Google Maps Directions API. DRIVING is the default travel mode for these services. For additional information on various travel modes, you can refer to the [link](https://developers.google.com/maps/documentation/javascript/directions#TravelModes).
+Coordinates can be retrieved based on different travel modes, such as DRIVING, WALKING, BICYCLING, or TRANSIT, using the Google Maps Directions API. DRIVING is the default travel mode for these services. For additional information on available travel modes, refer to this [link](https://developers.google.com/maps/documentation/javascript/directions#TravelModes).
 
 ## Plot markers on the Map
 
-To plot markers on the map, use the retrieved geographic coordinates to place the markers at the source and destination locations. This allows users to easily identify the key points along the route.
+To plot markers on the map, use the retrieved geographic coordinates to place markers at the source and destination locations. This makes the key points along the route easy to identify.
 
 ```
-         //..
-         //..
-         @if (Cities != null)
-         {
-             <MapsMarkerSettings>
-                  <MapsMarker Visible="true" Height="20" Width="20" DataSource="Cities" TValue="MapMarker" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net8/images/maps/ballon.png">
-                  </MapsMarker>
-             </MapsMarkerSettings>
-         }
-         //..
-         //..
-    @code{
-         //..
-         //..
-         Cities.Add(new MapMarker
-         {
-             Latitude = response.GetProperty("startLocation").GetProperty("latitude").GetDouble(),
-             Longitude = response.GetProperty("startLocation").GetProperty("longitude").GetDouble()
-         });
-         Cities.Add(new MapMarker
-         {
-             Latitude = response.GetProperty("endLocation").GetProperty("latitude").GetDouble(),
-             Longitude = response.GetProperty("endLocation").GetProperty("longitude").GetDouble()
-         });
-     }
-```
-
-## Generate and visualize the route
 
-To generate and visualize the route, use the geographic coordinates obtained from the Google Directions API to draw a navigation line between the source and destination markers on the map. This provides a clear representation of the path for users to follow.
-
-```
         //..
         //..
-        <MapsNavigationLines>
-        @if (LatitudePoints.Count > 1 && LongitudePoints.Count > 1)
+        @if (Cities != null)
         {
-            <MapsNavigationLine Visible="true" Angle="0" Color="black" Width="2" Latitude="@LatitudePoints.ToArray()" Longitude="@LongitudePoints.ToArray()"></MapsNavigationLine>
+            <MapsMarkerSettings>
+                <MapsMarker Visible="true" Height="20" Width="20" DataSource="Cities" TValue="MapMarker" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/blazor_server_common_net8/images/maps/ballon.png">
+                </MapsMarker>
+            </MapsMarkerSettings>
         }
-        </MapsNavigationLines>
         //..
         //..
-       @code{
-             foreach (var point in response.GetProperty("path").EnumerateArray())
-             {
-                   LatitudePoints.Add(point.GetProperty("latitude").GetDouble());
-                   LongitudePoints.Add(point.GetProperty("longitude").GetDouble());
-             }
-       }
+@code {
+        //..
+        //..
+        Cities.Add(new MapMarker
+        {
+            Latitude = response.GetProperty("startLocation").GetProperty("latitude").GetDouble(),
+            Longitude = response.GetProperty("startLocation").GetProperty("longitude").GetDouble()
+        });
+        Cities.Add(new MapMarker
+        {
+            Latitude = response.GetProperty("endLocation").GetProperty("latitude").GetDouble(),
+            Longitude = response.GetProperty("endLocation").GetProperty("longitude").GetDouble()
+        });
+    }
+
 ```
 
-You can find a demonstration of integrating the Google Maps Directions API with the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component to render navigation routes below.
+## Generate and visualize the route
 
-[Sample in the GitHub](https://github.com/SyncfusionExamples/how-to-create-a-route-between-the-markers-in-the-Blazor-maps)
+To generate and visualize the route, use the geographic coordinates obtained from the Google Directions API to draw a navigation line between the source and destination markers on the map. This provides a clear representation of the path to follow.
+
+```
 
+    //..
+    //..
+    <MapsNavigationLines>
+    @if (LatitudePoints.Count > 1 && LongitudePoints.Count > 1)
+    {
+        <MapsNavigationLine Visible="true" Angle="0" Color="black" Width="2" Latitude="@LatitudePoints.ToArray()" Longitude="@LongitudePoints.ToArray()"></MapsNavigationLine>
+    }
+    </MapsNavigationLines>
+    //..
+    //..
+@code {
+    foreach (var point in response.GetProperty("path").EnumerateArray())
+    {
+        LatitudePoints.Add(point.GetProperty("latitude").GetDouble());
+        LongitudePoints.Add(point.GetProperty("longitude").GetDouble());
+    }
+}
+
+```
+
+A demonstration of integrating the Google Maps Directions API with the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component to render navigation routes is available at the following link.
+
+[Sample in the GitHub](https://github.com/SyncfusionExamples/how-to-create-a-route-between-the-markers-in-the-Blazor-maps)
diff --git a/blazor/maps/how-to/place-map-inside-other-components.md b/blazor/maps/how-to/place-map-inside-other-components.md
index 9e6d6603c6..59f00d2c86 100644
--- a/blazor/maps/how-to/place-map-inside-other-components.md
+++ b/blazor/maps/how-to/place-map-inside-other-components.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: How to place Maps component inside other components | Syncfusion
-description: Learn here about how to place the Map inside other components like Dashboard Layout, Tab, Dialog and Accordion.
+description: Learn how to render the Maps component inside other components, including Dashboard Layout, Tab, Dialog and Accordion.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Render Maps component inside other components
 
-The Maps can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the Maps component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the Maps component.
+The Maps component can be rendered within other components such as Dashboard Layout, Tab, Dialog, and Accordion. Because Maps often initializes before its container finishes rendering, use a boolean flag to control when the Maps component starts rendering.
 
 ## Maps component inside Dashboard Layout
 
@@ -115,7 +115,6 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Ma
         MapsTwo.Refresh();
         MapsThree.Refresh();
     }
-
 }
 
 ```
@@ -130,70 +129,71 @@ When the Maps component renders within the Tab component, its rendering begins c
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Maps
 
-    <SfTab CssClass="default-tab">
-        <TabEvents Created="Created"></TabEvents>
-        <TabItems>
-            <TabItem>
-                <ChildContent>
-                    <TabHeader Text="Maps"></TabHeader>
-                </ChildContent>
+<SfTab CssClass="default-tab">
+    <TabEvents Created="Created"></TabEvents>
+    <TabItems>
+        <TabItem>
+            <ChildContent>
+                <TabHeader Text="Maps"></TabHeader>
+            </ChildContent>
+            <ContentTemplate>
+                @if (IsInitialRender)
+                {
+                <SfMaps ID="Maps" Width="100%">
+                    <MapsLayers>
+                        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
+                        </MapsLayer>
+                    </MapsLayers>
+                </SfMaps>                      
+                }   
+                </ContentTemplate>
+        </TabItem>
+        <TabItem>
+            <ChildContent>
+                <TabHeader Text="Maps - OSM"></TabHeader>
+            </ChildContent>
                 <ContentTemplate>
-                 @if (IsInitialRender)
-                 {
-                    <SfMaps ID="Maps" Width="100%">
-                        <MapsLayers>
-                            <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
-                            </MapsLayer>
-                        </MapsLayers>
-                    </SfMaps>                      
-                 }   
-                 </ContentTemplate>
-            </TabItem>
-            <TabItem>
-                <ChildContent>
-                    <TabHeader Text="Maps - OSM"></TabHeader>
-                </ChildContent>
-                 <ContentTemplate>
-                 @if (IsInitialRender)
-                 { 
-                    <SfMaps ID="OSM" Width="100%">
-                        <MapsLayers>
-                            <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
-                        </MapsLayers>
-                    </SfMaps> 
-                 }   
-                 </ContentTemplate>
-            </TabItem>
-            <TabItem>
-                <ChildContent>
-                    <TabHeader Text="Maps - SubLayer"></TabHeader>
-                </ChildContent>
-                 <ContentTemplate>
-                 @if (IsInitialRender)
-                 {
-                    <SfMaps ID="SubLayer" Width="100%">
-                        <MapsLayers>
-                            <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
-                                <MapsShapeSettings Fill="#E5E5E5">
-                                    <MapsShapeBorder Color="black" Width="0.1"></MapsShapeBorder>
-                                </MapsShapeSettings>
-                            </MapsLayer>
-                            <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/africa.json"}'
-	                    	        Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
-                                <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
-                                    <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
-                                </MapsShapeSettings>
-                            </MapsLayer>
-                        </MapsLayers>
-                    </SfMaps> 
-                 }   
-                 </ContentTemplate>
-            </TabItem>
-        </TabItems>
-    </SfTab>
+                @if (IsInitialRender)
+                { 
+                <SfMaps ID="OSM" Width="100%">
+                    <MapsLayers>
+                        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
+                    </MapsLayers>
+                </SfMaps> 
+                }   
+                </ContentTemplate>
+        </TabItem>
+        <TabItem>
+            <ChildContent>
+                <TabHeader Text="Maps - SubLayer"></TabHeader>
+            </ChildContent>
+                <ContentTemplate>
+                @if (IsInitialRender)
+                {
+                <SfMaps ID="SubLayer" Width="100%">
+                    <MapsLayers>
+                        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
+                            <MapsShapeSettings Fill="#E5E5E5">
+                                <MapsShapeBorder Color="black" Width="0.1"></MapsShapeBorder>
+                            </MapsShapeSettings>
+                        </MapsLayer>
+                        <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/africa.json"}'
+                                Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
+                            <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
+                                <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
+                            </MapsShapeSettings>
+                        </MapsLayer>
+                    </MapsLayers>
+                </SfMaps> 
+                }   
+                </ContentTemplate>
+        </TabItem>
+    </TabItems>
+</SfTab>
 
-@code{
+@code {
     public bool IsInitialRender { get; set; }
+
     public void Created()
     {
         IsInitialRender = true;
@@ -240,12 +240,14 @@ When you drag and resize the Dialog component, the Maps component is not notifie
         </DialogTemplates>
     </SfDialog>
 </div>
+
 <style>
     #target {
         min-height: 400px;
     }
    
 </style>
+
 @code {
     SfMaps Maps;
     public bool IsInitialRender { get; set; }
@@ -270,6 +272,7 @@ When you drag and resize the Dialog component, the Maps component is not notifie
         this.ShowButton = true;
         IsInitialRender = false;
     }
+
     private void OnClicked()
     {
         this.Visibility = true;
@@ -286,8 +289,8 @@ When the Maps component renders within the Accordion component, its rendering be
 
 When you expand the Accordion component, the Maps component is not notified, so the Maps are not properly rendered within the Accordion. To avoid this scenario, the Maps component's `Refresh` method must be called in the Accordion's [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanded) event.
 
-
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 @using Syncfusion.Blazor.Navigations
 
@@ -348,6 +351,7 @@ When you expand the Accordion component, the Maps component is not notified, so
         </AccordionItems>
     </SfAccordion>
 </div>
+
 <style>
     @@-moz-document url-prefix() {
         .e-accordion .e-content table {
@@ -381,7 +385,7 @@ When you expand the Accordion component, the Maps component is not notified, so
     }
 </style>
 
-@code{
+@code {
     SfMaps MapsOne;
     SfMaps MapsTwo;
     SfMaps MapsThree;
@@ -410,4 +414,4 @@ When you expand the Accordion component, the Maps component is not notified, so
 }
 
 ```
-![Blazor Maps inside Accordion component](../images/blazor-maps-with-accordion.png)
\ No newline at end of file
+![Blazor Maps inside Accordion component](../images/blazor-maps-with-accordion.png)
diff --git a/blazor/maps/internationalization.md b/blazor/maps/internationalization.md
index b59f08a69d..8c37e145f7 100644
--- a/blazor/maps/internationalization.md
+++ b/blazor/maps/internationalization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Globalization in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about globalization in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to configure and apply globalization feature in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,17 +9,19 @@ documentation: ug
 
 # Globalization in Blazor Maps Component
 
-Maps provide support for internationalization for the following elements.
+Maps support internationalization for the following elements:
 
 * Data label
 * Tooltip
 
 ## Globalization
 
-Globalization is the process of designing and developing a component that works in different cultures or locales. It can be provided to the Blazor server-side and client-side applications. Refer to [Blazor server-side](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-server-application) and [Blazor client-side](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application) sections for configuring the globalization for the Maps component. It is used to globalize number, date, time values in
-Maps component using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property in the Maps component.
+Globalization is the process of designing and developing a component that works across cultures and locales. It is available for both Blazor Server and Blazor WebAssembly applications. Refer to the Blazor Server and Blazor WebAssembly localization sections for configuring globalization for the Maps component: [Enable localization in Blazor Server applications](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-server-application) and [Enable localization in Blazor WebAssembly applications](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application).
+
+Number, date, and time values in the Maps component can be globalized using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property of the Maps component.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="n0">
@@ -43,25 +45,28 @@ Maps component using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.B
         public string Country { get; set; }
         public string Membership { get; set; }
         public double Population { get; set; }
-    };
-    public List<MapDataSource> CountryData = new List<MapDataSource>{
-        new MapDataSource {  Country= "China", Membership= "Permanent", Population=20000 },
-        new MapDataSource { Country= "France",Membership= "Permanent", Population=30000  },
-        new MapDataSource { Country= "Russia",Membership= "Permanent", Population=40000 },
-        new MapDataSource { Country= "Kazakhstan",Membership= "Non-Permanent", Population=50000 },
-        new MapDataSource { Country= "Poland",Membership= "Non-Permanent", Population=60000 },
-        new MapDataSource { Country= "Sweden",Membership= "Non-Permanent", Population=70000 }
+    }
+
+    public List<MapDataSource> CountryData = new List<MapDataSource> {
+        new MapDataSource { Country = "China", Membership = "Permanent", Population = 20000 },
+        new MapDataSource { Country = "France", Membership = "Permanent", Population = 30000 },
+        new MapDataSource { Country = "Russia", Membership = "Permanent", Population = 40000 },
+        new MapDataSource { Country = "Kazakhstan", Membership = "Non-Permanent", Population = 50000 },
+        new MapDataSource { Country = "Poland", Membership = "Non-Permanent", Population = 60000 },
+        new MapDataSource { Country = "Sweden", Membership = "Non-Permanent", Population = 70000 }
     };
 }
+
 ```
 
 ![Blazor Maps with Gloabalization](./images/Internationalization/blazor-maps-globalization.PNG)
 
 ## Numeric Format
 
-The numeric formats such as currency, percentage and so on can be displayed in the tooltip and data labels of the Maps using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property in the [SfMaps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) class. In the following example, the tooltip is globalized to **German** culture. When setting the [EnableGroupingSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_EnableGroupingSeparator) property as **true**, the numeric text in the Maps separates with the comma separator.
+Numeric formats such as currency and percentage can be displayed in tooltips and data labels using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Format) property of the [SfMaps](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) class. In the following example, the tooltip is globalized to the German culture. When the [EnableGroupingSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_EnableGroupingSeparator) property is set to **true**, numeric text in the Maps component includes the culture-specific grouping separator.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="c" EnableGroupingSeparator="true">
@@ -85,20 +90,22 @@ The numeric formats such as currency, percentage and so on can be displayed in t
         public string Country { get; set; }
         public string Membership { get; set; }
         public double Population { get; set; }
-    };
-    public List<MapDataSource> CountryData = new List<MapDataSource>{
-        new MapDataSource { Country= "China", Membership= "Permanent", Population= 38332521},
-        new MapDataSource { Country= "France", Membership= "Permanent", Population= 19651127 },
-        new MapDataSource { Country= "Russia", Membership= "Permanent", Population= 3090416},
-        new MapDataSource { Country= "Kazakhstan", Membership= "Non-Permanent", Population= 1232521},
-        new MapDataSource { Country= "Poland", Membership= "Non-Permanent", Population= 90332521},
-        new MapDataSource { Country= "Sweden", Membership= "Non-Permanent", Population= 383521}
+    }
+
+    public List<MapDataSource> CountryData = new List<MapDataSource> {
+        new MapDataSource { Country = "China", Membership = "Permanent", Population = 38332521 },
+        new MapDataSource { Country = "France", Membership = "Permanent", Population = 19651127 },
+        new MapDataSource { Country = "Russia", Membership = "Permanent", Population = 3090416 },
+        new MapDataSource { Country = "Kazakhstan", Membership = "Non-Permanent", Population = 1232521 },
+        new MapDataSource { Country = "Poland", Membership = "Non-Permanent", Population = 90332521 },
+        new MapDataSource { Country = "Sweden", Membership = "Non-Permanent", Population = 383521 }
     };
 }
+
 ```
 
 ![Blazor Maps with Numeric Format](./images/Internationalization/blazor-maps-numeric-format.png)
 
 ## See also
 
-* [Localization in Blazor Maps component](https://blazor.syncfusion.com/documentation/maps/localization)
\ No newline at end of file
+* [Localization in Blazor Maps component](https://blazor.syncfusion.com/documentation/maps/localization)
diff --git a/blazor/maps/layers.md b/blazor/maps/layers.md
index f5254a637b..4e2a48321b 100644
--- a/blazor/maps/layers.md
+++ b/blazor/maps/layers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Layers in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about the layers in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to configure layers in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,19 +9,20 @@ documentation: ug
 
 # Layers in Blazor Maps Component
 
-The Maps component is rendered through [MapsLayers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html) and any number of layers can be added to the Maps.
+The Maps component is rendered through [MapsLayers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html), and any number of layers can be added to Maps.
 
 ## Multilayer
 
-The Multilayer support allows loading multiple shape files and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers of the Maps. Multiple layers can be added as **SubLayer** over the main layers using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Type.html) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
+The multilayer feature supports loading multiple shape files and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers. Multiple layers can be added as a **SubLayer** over the main layers using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Type.html) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
 
 ## Sublayer
 
-Sublayer is a type of shape file layer. It allows loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to view the geographic features such as rivers, valleys and cities in a map of a country. Similar to the main layer, elements in the Maps such as markers, bubbles, color mapping and legends can be added to the sub-layer.
+Sublayer is a type of shape file layer. It supports loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to display geographic features such as rivers, valleys, and cities in a country map. Similar to the main layer, elements such as markers, bubbles, color mapping, and legends can be added to the sublayer.
 
-In this example, the United States map shape is used as shape data by utilizing **usa.ts** file, and **texas.ts** and **california.ts** files are used as sub-layers in the United States map.
+In this example, the United States map shape is used as shape data from the **usa.ts** file, and **texas.ts** and **california.ts** files are used as sublayer in the United States map.
 
 ```csharp
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -32,28 +33,30 @@ In this example, the United States map shape is used as shape data by utilizing
             </MapsShapeSettings>
         </MapsLayer>
         <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/texas.json"}'
-		        Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
+	        Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
             <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
                 <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
             </MapsShapeSettings>
         </MapsLayer>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/california.json"}'
-		        Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
+	        Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
             <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
                 <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
             </MapsShapeSettings>
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Sublayer](./images/Layers/blazor-maps-sublayer.png)
 
 ## Displaying different layer in the view
 
-Multiple shape files and map providers can be loaded simultaneously in Maps. The [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) property is used to determine which layer on the user interface should be displayed. This property is used for the Maps drill-down feature, so when the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value is changed, the corresponding shape is loaded. In this example, two layers can be loaded with the World map and the United States map. Based on the given [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value the corresponding shape will be loaded in the user interface. If the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value is set to **0**, then the world map will be loaded.
+Multiple shape files and map providers can be loaded simultaneously. The [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) property determines which layer is displayed. This property also supports the drill-down feature; when the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value changes, the corresponding shape is loaded. In this example, two layers are configured for the world map and the United States map. Based on the [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) value, the corresponding shape is rendered. If [BaseLayerIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_BaseLayerIndex) is set to **0**, the world map is loaded.
 
 ```csharp
+
 @using Syncfusion.Blazor.Maps
 
 @*  To switch the layer, set `BaseLayerIndex`  *@
@@ -63,17 +66,18 @@ Multiple shape files and map providers can be loaded simultaneously in Maps. The
         <MapsLayer ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/usa.json" }'TValue="string"/>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Multiple Layer](./images/Layers/blazor-maps-multiple-layer.png)
 
 ## Rendering custom shapes
 
-Custom shapes (also known as custom maps) can be rendered in Maps to represent bus seat booking, cricket stadium, basic home plan/sketch, and so on. To accomplish this, a JSON file in GeoJSON format with proper geometries must be created manually or with the assistance of any online map vendor. The GeoJSON file created must be set to the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the Maps layer, and the [GeometryType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_GeometryType) must be set as **GeometryType.Normal**.
+Custom shapes (also known as custom maps) can be rendered in Maps to represent bus seat booking, cricket stadiums, basic home plans/sketches, and similar layouts. To achieve this, create a JSON file in GeoJSON format with proper geometries manually or with an online map vendor. Set the created GeoJSON file to the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in the Maps layer, and set [GeometryType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_GeometryType) to **GeometryType.Normal**.
 
-Please refer this [link](https://cdn.syncfusion.com/maps/map-data/seat.json) for an example GeoJSON file containing information about bus seat selection.
+Refer to the sample GeoJSON file for bus seat selection: [Seat selection GeoJSON](https://cdn.syncfusion.com/maps/map-data/seat.json).
 
-Please refer this [link](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5) for more information and a live demonstration.
+For a live demonstration, see [Bus seat selection demo](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5).
 
 ## See also
 
diff --git a/blazor/maps/legend.md b/blazor/maps/legend.md
index dda89ef01a..7f51a49fe8 100644
--- a/blazor/maps/legend.md
+++ b/blazor/maps/legend.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Legend in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about the legend in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to configure and customize legends in the Syncfusion Blazor Maps component for effective data visualization.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,23 +9,24 @@ documentation: ug
 
 # Legend in Blazor Maps Component
 
-A Legend is a visual representation of the symbols used on the Maps. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend visually explains the symbols used on Maps. It uses colors, shapes, or other identifiers based on the data and helps interpret what the Maps display. Enable legends by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ## Modes of legend
 
-Legend had two types of mode.
+Legends support two modes.
 1. [**Default**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendMode.html#Syncfusion_Blazor_Maps_LegendMode_Default) mode
 2. [**Interactive**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendMode.html#Syncfusion_Blazor_Maps_LegendMode_Interactive) mode
 
 ### Default mode
 
-Default mode legends have symbols with legend labels which are used to identify the shape or bubble or marker color. Enable this option by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Default**.
+Default mode shows symbols with legend labels that identify the color of a shape, bubble, or marker. Enable it by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **Default**.
 
 ### Interactive mode
 
-The legends can be made interactive with an arrow mark indicating the exact range color in the legend when the mouse hovers over the corresponding shapes. To enable this type of mode by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Interactive**. The [InvertedPointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_InvertedPointer) property is used to enable or disable the visibility of the inverted pointer in interactive legend in Maps.
+Interactive legends display an arrow pointer indicating the exact range color when hovering over corresponding shapes. Enable this by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Mode) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **Interactive**. Use the [InvertedPointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_InvertedPointer) property to show or hide the inverted pointer in interactive legends.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -47,49 +48,51 @@ The legends can be made interactive with an arrow mark indicating the exact rang
 
 @code {
     private List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"}
+         new UNCouncilCountry { Name  "China", Membership = "Permanent" },
+         new UNCouncilCountry { Name = "France", Membership = "Permanent" },
+         new UNCouncilCountry { Name = "Russia", Membership = "Permanent" },
+         new UNCouncilCountry { Name = "Kazakhstan", Membership = "Non-Permanent" },
+         new UNCouncilCountry { Name = "Poland", Membership = "Non-Permanent" },
+         new UNCouncilCountry { Name = "Sweden", Membership = "Non-Permanent" },
+         new UNCouncilCountry { Name = "United Kingdom", Membership = "Permanent" },
+         new UNCouncilCountry { Name = "United States", Membership = "Permanent" }
     };
 
     public class UNCouncilCountry
     {
         public string Name { get; set; }
         public string Membership { get; set; }
-    };
+    }
 }
+
 ```
 
 ![Blazor Maps with Interactive Legend](./images/Legend/blazor-maps-interactive-legend.png)
 
 ## Positioning of the legend
 
-The legend can be positioned in the following two ways:
+The legend can be positioned in two ways:
 
 * Absolute position
 * Dock position
 
 <b>Absolute position</b>
 
-The legend of the Maps can be positioned using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Y) properties in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). For positioning the legend based on co-ordinates corresponding to Maps, the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property is set as **Float**.
+Position the legend using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Y) properties in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). To position the legend based on coordinates relative to Maps, set [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) to **Float**.
 
 <b>Dock position</b>
 
-Legends are positioned in the following locations within the container. The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) is used to set these options in Maps.
+Legends can be docked within the container using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Position) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) at the following locations:
 
 * Top
 * Left
 * Bottom
 * Right
 
-The above four positions can be aligned with combination of **Near**, **Center**, and **Far** using [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html). So, the legend can be aligned to 12 positions.
+These positions can be aligned using **Near**, **Center**, or **Far** with the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Alignment.html) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html), providing 12 alignment combinations.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -108,6 +111,7 @@ The above four positions can be aligned with combination of **Near**, **Center**
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 N> Refer [code block](#legend-mode) to know the property value of `securityCouncilDetails`.
@@ -116,11 +120,12 @@ N> Refer [code block](#legend-mode) to know the property value of `securityCounc
 
 ## Legend for shapes
 
-Legend for shapes can be generated from color mapping types such as equal color mapping, range color mapping and desaturation color mapping.
+Legends for shapes can be generated from equal, range, and desaturation color mappings.
 
-The following code snippet demonstrates the equal color mapping legends for the shapes. To bind the **MembershipDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html), set the value of [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) to **name** and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to **Country**. To enable equal color mapping, set the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Finally, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true**. The [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) property in [MapsColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) is used to set the text name for legend in Maps.
+The following code demonstrates equal color mapping legends for shapes. To bind the **MembershipDetails** data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html), set [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) to **name** and [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to **Country**. To enable equal color mapping, configure [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) in [MapsShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html). Finally, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. Use the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) property in [MapsColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Label) to set legend text.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -139,29 +144,30 @@ The following code snippet demonstrates the equal color mapping legends for the
     </MapsLayers>
 </SfMaps>
 
-@code{
-
+@code {
     public class UNCouncil
     {
         public string Country { get; set; }
         public string Membership { get; set; }
     }
+
     private List<UNCouncil> MembershipDetails = new List<UNCouncil> {
-        new UNCouncil { Country= "China", Membership= "Permanent" },
-        new UNCouncil { Country= "France",Membership= "Permanent" },
-        new UNCouncil { Country= "Russia",Membership= "Permanent" },
-        new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" },
-        new UNCouncil { Country= "Poland",Membership= "Non-Permanent" },
-        new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
+        new UNCouncil { Country = "China", Membership = "Permanent" },
+        new UNCouncil { Country = "France", Membership = "Permanent" },
+        new UNCouncil { Country = "Russia", Membership = "Permanent" },
+        new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Poland", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Sweden", Membership = "Non-Permanent" }
     };
 }
+
 ```
 
 ![Blazor Maps with Legend](./images/Legend/blazor-maps-legend.png)
 
 ### Legend shape
 
-Maps supports the following types of legend shapes. The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Shape) property in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) can be used to change the type of legend shapes.
+Maps supports the following legend shapes. Use the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Shape) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to change the legend shape.
 
 * Circle
 * Rectangle
@@ -174,26 +180,27 @@ Maps supports the following types of legend shapes. The [Shape](https://help.syn
 * Pentagon
 * InvertedTriangle
 
-The shape of legends can be customized using the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeHeight), [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeWidth), [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapePadding) properties and [MapsLegendShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendShapeBorder.html).
+Customize legend shapes using [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeHeight), [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapeWidth), [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShapePadding) properties and [MapsLegendShapeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendShapeBorder.html).
 
 ### Customization
 
-The following properties and classes are available in legend to customize the legend and legend text in Maps.
-
-* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Background) - To customize the background color of the Legend.
-* [MapsLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendBorder.html) - To customize the color and width of the border for the Legend.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Fill) - To apply the color for the Legend.
-* [LabelDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelDisplayMode) - To customize the display mode for the Legend text.
-* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelPosition) - To customize the position of the Legend text.
-* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Orientation) - To customize the orientation of the Legend.
-* [MapsLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTextStyle.html) - To customize the text style for Legend.
-* [MapsLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitle.html) - To apply the title for the Legend.
-* [MapsLegendTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitleStyle.html) - To customize the style of the title for the Legend.
-* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Height) - To customize the height of the Legend.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Width) - To customize the width of the Legend.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Opacity) - To apply the opacity to the Legend.
+Use the following properties and classes to customize the legend and legend text in Maps.
+
+* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Background) - Sets the legend background color.
+* [MapsLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendBorder.html) - Configures the legend border color and width.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Fill) - Applies a color to the legend.
+* [LabelDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelDisplayMode) - Controls how legend text is displayed.
+* [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_LabelPosition) - Positions legend text.
+* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Orientation) - Sets the legend orientation.
+* [MapsLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTextStyle.html) - Customizes legend text style.
+* [MapsLegendTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitle.html) - Adds a legend title.
+* [MapsLegendTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendTitleStyle.html) - Customizes the legend title style.
+* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Height) - Sets the legend height.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Width) - Sets the legend width.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Opacity) - Applies opacity to the legend.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -215,33 +222,36 @@ The following properties and classes are available in legend to customize the le
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class UNCouncil
     {
         public string Country { get; set; }
         public string Membership { get; set; }
     }
+
     private List<UNCouncil> MemberShipDetails = new List<UNCouncil>
     {
-        new UNCouncil { Country= "China", Membership= "Permanent" },
-        new UNCouncil { Country= "France",Membership= "Permanent" },
-        new UNCouncil { Country= "Russia",Membership= "Permanent" },
-        new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" },
-        new UNCouncil { Country= "Poland",Membership= "Non-Permanent" },
-        new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
+        new UNCouncil { Country = "China", Membership = "Permanent" },
+        new UNCouncil { Country = "France", Membership = "Permanent" },
+        new UNCouncil { Country = "Russia", Membership = "Permanent" },
+        new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Poland", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Sweden", Membership = "Non-Permanent" }
     };
 }
+
 ```
 
 ![Blazor Maps with Custom Legend](./images/Legend/blazor-maps-custom-legend.png)
 
 ### Legend for items excluded from color mapping
 
-The legend can be enabled for items excluded from the color mapping using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
+Enable legends for items excluded from color mapping using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html).
 
-In the following example, color mapping is added for the ranges from **0** to **200**. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property alone in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). To enable legend for these items, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+In the following example, color mapping is defined for ranges from **0** to **200**. Records outside this range do not receive color mapping. To color those excluded items, set only the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_Color) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html). To enable legends for these items, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -260,13 +270,14 @@ In the following example, color mapping is added for the ranges from **0** to **
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public double Density { get; set; }
-    };
+    }
+
     private List<PopulationDetail> populationDetails = new List<PopulationDetail> {
         new PopulationDetail
         {
@@ -286,15 +297,17 @@ In the following example, color mapping is added for the ranges from **0** to **
         }
     };
 }
+
 ```
 
 ![Blazor Maps Legend for Excluded Color Mapping Range](./images/Legend/blazor-maps-legend-exclude-color-mapping.png)
 
 ### Hiding desired legend items
 
-Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in the [MapsShapeColorMapping](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide the desired legend items in Maps. If the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property is set to **false**, the legend item will be hidden, otherwise it will be visible.
+Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide legend items. If [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) is set to **false**, the legend item is hidden. Otherwise, it is visible.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -313,6 +326,7 @@ Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 N> Refer [code block](#legend-for-items-excluded-from-color-mapping) to know the property value of `PopulationDetails`.
@@ -321,9 +335,10 @@ N> Refer [code block](#legend-for-items-excluded-from-color-mapping) to know the
 
 ### Hide legend items based on data source value
 
-Depending on the boolean values provided in the data source, the legend items will be hidden or visible. Bind the field name that contains the visibility state in the data source to the [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShowLegendPath) property of the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to achieve this.
+Legend item visibility can be driven by boolean values in the data source. Bind the field that contains the visibility state to the [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ShowLegendPath) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -337,7 +352,7 @@ Depending on the boolean values provided in the data source, the legend items wi
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Name { get; set; }
@@ -345,12 +360,12 @@ Depending on the boolean values provided in the data source, the legend items wi
         public double Density { get; set; }
         public bool LegendVisibility { get; set; }
         public string Color { get; set; }
+    }
 
-    };
     private List<PopulationDetail> populationDetails = new List<PopulationDetail> {
         new PopulationDetail
         {
-            Name ="United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green"
+            Name = "United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green"
         },
         new PopulationDetail
         {
@@ -358,23 +373,25 @@ Depending on the boolean values provided in the data source, the legend items wi
         },
         new PopulationDetail
         {
-            Name="India", Population=1198003000, Density=364, LegendVisibility = true, Color = "blue"
+            Name = "India", Population = 1198003000, Density = 364, LegendVisibility = true, Color = "blue"
         },
         new PopulationDetail
         {
-            Name="China", Population=1389750000, Density=144, LegendVisibility = false, Color = "orange"
+            Name = "China", Population = 1389750000, Density = 144, LegendVisibility = false, Color = "orange"
         }
     };
 }
+
 ```
 
 ![Hiding Legends Items based on DataSource in Blazor Maps](./images/Legend/blazor-maps-hide-desired-legend-item.png)
 
 ### Binding legend item text from data source
 
-To show the legend text based on the values provided in the data source, use the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ValuePath) property in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
+Display legend text based on values in the data source by using the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_ValuePath) property in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -387,42 +404,45 @@ To show the legend text based on the values provided in the data source, use the
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public double Density { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
         new PopulationDetail
         {
-            Name ="United States", Population = 325020000, Density = 33, Color="yellow"
+            Name = "United States", Population = 325020000, Density = 33, Color = "yellow"
         },
         new PopulationDetail
         {
-            Name = "Russia", Population = 142905208, Density = 8.3, Color="red"
+            Name = "Russia", Population = 142905208, Density = 8.3, Color = "red"
         },
         new PopulationDetail
         {
-            Name="India", Population=1198003000, Density=364, Color="blue"
+            Name = "India", Population = 1198003000, Density = 364, Color = "blue"
         },
         new PopulationDetail
         {
-            Name="China", Population=1389750000, Density=144, Color="orange"
+            Name = "China", Population = 1389750000, Density = 144, Color = "orange"
         }
     };
 }
+
 ```
 
 ![Binding Legend Item in Blazor Maps](./images/Legend/blazor-maps-bind-legend-item.png)
 
 ### Hiding duplicate legend items
 
-To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_RemoveDuplicateLegend) property to **true** in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
+To hide duplicate legend items, set [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_RemoveDuplicateLegend) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -435,14 +455,15 @@ To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](http
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public double Density { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<PopulationDetail> populationDetails = new List<PopulationDetail> {
         new PopulationDetail
         {
@@ -462,22 +483,24 @@ To hide the duplicate legend items in Maps, set the [RemoveDuplicateLegend](http
         }
     };
 }
+
 ```
 
 ![Hiding Duplicate Legend Items in Blazor Maps](./images/Legend/blazor-maps-hide-duplicate-legend.png)
 
 ### Toggle option in legend
 
-The toggle option has been provided for legend. If the legend can be toggled, the given color will be changed to the corresponding Maps shape item. To enable the toggle options in Legend, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Enable) property of the [MapsToggleLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html) to **true**.
+A toggle option is available for legends. When toggled, the specified color is applied to the corresponding Maps shape item. To enable toggle behavior, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Enable) property of [MapsToggleLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html) to **true**.
 
-The following properties and components are available to customize the toggle option in legend.
+The following properties and components customize the toggle option:
 
-* [ApplyShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_ApplyShapeSettings) – To apply the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) property value of the shape of the Maps when toggling the legend items.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Fill) - To apply the color to the shape of the Maps for which legend item is toggled.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Opacity) – To customize the transparency for the shapes for which legend item is toggled.
-* [MapsToggleLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendBorder.html) – To customize the color and width of the border of the shapes in Maps.
+* [ApplyShapeSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_ApplyShapeSettings) – Applies the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Fill) value of the Maps shape when toggling legend items.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Fill) - Sets the color for shapes whose legend item is toggled.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendSettings.html#Syncfusion_Blazor_Maps_MapsToggleLegendSettings_Opacity) – Controls the transparency of toggled shapes.
+* [MapsToggleLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsToggleLegendBorder.html) – Customizes the color and width of the shapes' borders.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -494,7 +517,7 @@ The following properties and components are available to customize the toggle op
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Name { get; set; }
@@ -503,10 +526,11 @@ The following properties and components are available to customize the toggle op
         public bool LegendVisibility { get; set; }
         public string Color { get; set; }
     };
+
     private List<PopulationDetail> populationDetails = new List<PopulationDetail> {
         new PopulationDetail
         {
-            Name ="United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green"
+            Name = "United States", Population = 325020000, Density = 33, LegendVisibility = true, Color = "green"
         },
         new PopulationDetail
         {
@@ -514,23 +538,25 @@ The following properties and components are available to customize the toggle op
         },
         new PopulationDetail
         {
-            Name="India", Population=1198003000, Density=364, LegendVisibility = true, Color = "blue"
+            Name = "India", Population = 1198003000, Density = 364, LegendVisibility = true, Color = "blue"
         },
         new PopulationDetail
         {
-            Name="China", Population=1389750000, Density=144, LegendVisibility = false, Color = "orange"
+            Name = "China", Population = 1389750000, Density = 144, LegendVisibility = false, Color = "orange"
         }
     };
 }
+
 ```
 
 ![Customizing Toggle Option in Blazor Maps Legend](./images/Legend/blazor-maps-legend-toggle.gif)
 
 ## Enable legend for bubbles
 
-To enable the legend for the bubble by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true** and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Bubbles**.
+Enable legends for bubbles by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property to **Bubbles**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -555,31 +581,34 @@ To enable the legend for the bubble by setting the [Visible](https://help.syncfu
         public double Population { get; set; }
         public double Density { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
         new PopulationDetail
         { 
-            Name ="United States", Population = 325020000, Density = 33, Color="yellow"
+            Name = "United States", Population = 325020000, Density = 33, Color = "yellow"
         },
         new PopulationDetail
         {
-            Name = "Russia", Population = 142905208, Density = 8.3, Color="red"
+            Name = "Russia", Population = 142905208, Density = 8.3, Color = "red"
         },
         new PopulationDetail
         {
-            Name="India", Population=1198003000, Density=364, Color="blue"
+            Name = "India", Population = 1198003000, Density = 364, Color = "blue"
         }
     };
 }
+
 ```
 
 ![Blazor Maps with Bubble and Legend](./images/Bubble/blazor-maps-bubble-legend.png)
 
 ## Enable legend for markers
 
-To enable legend for marker by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **true** and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) as **Markers**. The [LegendText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LegendText) property in the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) can be used to show the legend text based on values provided in the data source.
+Enable legends for markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Type) property to **Markers**. Use the [LegendText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LegendText) property in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to display legend text based on values in the data source.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -602,20 +631,22 @@ To enable legend for marker by setting the [Visible](https://help.syncfusion.com
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     private List<City> Cities = new List<City> {
-        new City { Latitude=35.145083, Longitude=-117.960260, Name= "Californiya" },
-        new City { Latitude=40.724546, Longitude=-73.850344, Name="New York" },
-        new City { Latitude= 41.657782, Longitude=-91.533857, Name="Iowa" }
+        new City { Latitude = 35.145083, Longitude = -117.960260, Name = "Californiya" },
+        new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" },
+        new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" }
     };
 }
+
 ```
 
 ![Blazor Maps Marker with legend](./images/Marker/blazor-maps-marker-legend.png)
 
 ### Imitate/Map marker shape to the legend shape
 
-To imitate or map the marker shape with its legend item shape, set the [UseMarkerShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_UseMarkerShape) property to **true** in the [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) property.
+To map the marker shape to the legend item shape, set [UseMarkerShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_UseMarkerShape) property to **true** in [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html).
 
 ```cshtml
 
@@ -653,35 +684,37 @@ To imitate or map the marker shape with its legend item shape, set the [UseMarke
         public string Continent { get; set; }
         public string Color { get; set; }
         public string Shape { get; set; }
-    };
+    }
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name="Tokyo", Latitude=35.6894875, Longitude=139.6917064, Population=33200000, Country="Japan", Continent="Asia", Color="red", Shape="Pentagon" },
-        new PopulationCityDetails { Name="New York", Latitude=40.7127753, Longitude=-74.0059728, Population=17800000,Country="United States", Continent="North America", Color="green",Shape="Diamond" },
-        new PopulationCityDetails { Name="Sao Paulo", Latitude=-23.5505199, Longitude=-46.6333094, Population=17700000,Country="Brazil", Continent="South America", Color="orange",Shape="InvertedTriangle" },
-        new PopulationCityDetails { Name="Seoul/Incheon", Latitude=37.566535, Longitude=126.9779692, Population=17500000,Country="South Korea", Continent="Asia", Color="red",Shape="Pentagon"},
-        new PopulationCityDetails { Name="Mexico City", Latitude=19.2464696, Longitude=-99.1013498, Population=17400000,Country="Mexico", Continent="North America", Color="green",Shape="Diamond"},
-        new PopulationCityDetails { Name="Osaka/Kobe/Kyoto", Latitude=35.0212466, Longitude=135.7555968, Population=16425000,Country="Japan", Continent="Asia", Color="red",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Manila", Latitude=14.5995124, Longitude=120.9842195, Population=14750000,Country="Philippines", Continent="Asia", Color="red",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Mumbai", Latitude=19.0759837, Longitude=72.8776559, Population=14350000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Delhi", Latitude=28.6139391, Longitude=77.2090212, Population=14300000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Jakarta", Latitude=-6.17511, Longitude=106.8650395, Population=14250000,Country="Indonesia", Color="red", Continent="Asia",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Lagos", Latitude=6.5243793, Longitude=3.3792057, Population=13400000, Continent="Africa",Country="Nigeria", Color="blue",Shape="Rectangle" },
-        new PopulationCityDetails { Name="Kolkata", Latitude=22.572646, Longitude=88.363895, Population=12700000,Country="India", Continent="Asia", Color="red",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Cairo", Latitude=30.0444196, Longitude=31.2357116, Population=12200000,Country="Egypt", Continent="Africa", Color="blue",Shape="Rectangle" },
-        new PopulationCityDetails { Name="Los Angeles", Latitude=34.0522265, Longitude=-118.2436596, Population=11789000, Continent="North America",Country="United States", Color="green",Shape="Diamond" },
-        new PopulationCityDetails { Name="Buenos Aires", Latitude=-34.6036844, Longitude=-58.3815591, Population=11200000,Country="Argentina", Color="orange", Continent="South America",Shape="InvertedTriangle" },
-        new PopulationCityDetails { Name="Rio de Janeiro", Latitude=-22.9068467, Longitude=-43.1728965, Population=10800000,Country="Brazil", Color="orange", Continent="South America",Shape="InvertedTriangle" },
-        new PopulationCityDetails { Name="Moscow", Latitude=55.755826, Longitude=37.6173, Population=10500000,Country="Russia", Color="yellow", Continent="Europe",Shape="Triangle" },
-        new PopulationCityDetails { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021, Population=10000000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Karachi", Latitude=25.0700428, Longitude=67.2847875, Population=9800000,Country="Pakistan", Color="red", Continent="Asia",Shape="Pentagon"},
-        new PopulationCityDetails { Name="Paris", Latitude=48.856614, Longitude=2.3522219, Population=9645000,Country="France", Color="yellow", Continent="Europe",Shape="Triangle" },
-        new PopulationCityDetails { Name="Istanbul", Latitude=41.0082376, Longitude=28.9783589, Population=9000000,Country="Istanbul", Color="yellow", Continent="Europe",Shape="Triangle" },
-        new PopulationCityDetails { Name="Nagoya", Latitude=35.1814464, Longitude=136.906398, Population=9000000,Country="Japan", Color="red", Continent="Asia",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963, Population=8614000,Country="China", Color="red", Continent="Asia",Shape="Pentagon" },
-        new PopulationCityDetails { Name="Chicago", Latitude=41.8781136, Longitude=-87.6297982, Population=8308000,Country="United States", Color="green", Continent="North America",Shape="Diamond"},
-        new PopulationCityDetails { Name="London", Latitude=51.5073509, Longitude=-0.1277583, Population=8278000,Country="United Kingdom", Color="yellow", Continent="Europe",Shape="Triangle" }
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6894875, Longitude = 139.6917064, Population = 33200000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "New York", Latitude = 40.7127753, Longitude = -74.0059728, Population = 17800000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" },
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.5505199, Longitude = -46.6333094, Population = 17700000, Country = "Brazil", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" },
+        new PopulationCityDetails { Name = "Seoul/Incheon", Latitude = 37.566535, Longitude = 126.9779692, Population = 17500000, Country = "South Korea", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.2464696, Longitude = -99.1013498, Population = 17400000, Country = "Mexico", Continent = "North America", Color = "green", Shape = "Diamond" },
+        new PopulationCityDetails { Name = "Osaka/Kobe/Kyoto", Latitude = 35.0212466, Longitude = 135.7555968, Population = 16425000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Manila", Latitude = 14.5995124, Longitude = 120.9842195, Population = 14750000, Country = "Philippines", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.0759837, Longitude = 72.8776559, Population = 14350000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.6139391, Longitude = 77.2090212, Population = 14300000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Jakarta", Latitude = -6.17511, Longitude = 106.8650395, Population = 14250000, Country = "Indonesia", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Lagos", Latitude = 6.5243793, Longitude = 3.3792057, Population = 13400000, Country = "Nigeria", Continent = "Africa", Color = "blue", Shape = "Rectangle" },
+        new PopulationCityDetails { Name = "Kolkata", Latitude = 22.572646, Longitude = 88.363895, Population = 12700000, Country = "India", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Cairo", Latitude = 30.0444196, Longitude = 31.2357116, Population = 12200000, Country = "Egypt", Continent = "Africa", Color = "blue", Shape = "Rectangle" },
+        new PopulationCityDetails { Name = "Los Angeles", Latitude = 34.0522265, Longitude = -118.2436596, Population = 11789000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" },
+        new PopulationCityDetails { Name = "Buenos Aires", Latitude = -34.6036844, Longitude = -58.3815591, Population = 11200000, Country = "Argentina", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" },
+        new PopulationCityDetails { Name = "Rio de Janeiro", Latitude = -22.9068467, Longitude = -43.1728965, Population = 10800000, Country = "Brazil", Continent = "South America", Color = "orange", Shape = "InvertedTriangle" },
+        new PopulationCityDetails { Name = "Moscow", Latitude = 55.755826, Longitude = 37.6173, Population = 10500000, Country = "Russia", Continent = "Europe", Color = "yellow", Shape = "Triangle" },
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.2303904, Longitude = 121.4737021, Population = 10000000, Country = "China", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Karachi", Latitude = 25.0700428, Longitude = 67.2847875, Population = 9800000, Country = "Pakistan", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Paris", Latitude = 48.856614, Longitude = 2.3522219, Population = 9645000, Country = "France", Continent = "Europe", Color = "yellow", Shape = "Triangle" },
+        new PopulationCityDetails { Name = "Istanbul", Latitude = 41.0082376, Longitude = 28.9783589, Population = 9000000, Country = "Istanbul", Continent = "Europe", Color = "yellow", Shape = "Triangle" },
+        new PopulationCityDetails { Name = "Nagoya", Latitude = 35.1814464, Longitude = 136.906398, Population = 9000000, Country = "Japan", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.9041999, Longitude = 116.4073963, Population = 8614000, Country = "China", Continent = "Asia", Color = "red", Shape = "Pentagon" },
+        new PopulationCityDetails { Name = "Chicago", Latitude = 41.8781136, Longitude = -87.6297982, Population = 8308000, Country = "United States", Continent = "North America", Color = "green", Shape = "Diamond" },
+        new PopulationCityDetails { Name = "London", Latitude = 51.5073509, Longitude = -0.1277583, Population = 8278000, Country = "United Kingdom", Continent = "Europe", Color = "yellow", Shape = "Triangle" }
     };
 }
+
 ```
 
-![Blazor Maps - Marker shape mapped to legend items shape](./images/Legend/blazor-maps-marker-legend-shape.png)
\ No newline at end of file
+![Blazor Maps - Marker shape mapped to legend items shape](./images/Legend/blazor-maps-marker-legend-shape.png)
diff --git a/blazor/maps/localization.md b/blazor/maps/localization.md
index f51d686d8b..1c8d5c6992 100644
--- a/blazor/maps/localization.md
+++ b/blazor/maps/localization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Localization in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about Localization in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about Localization in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,15 +9,15 @@ documentation: ug
 
 # Localization in Blazor Maps Component
 
-The Blazor Maps component supports localization, allowing it to display content in any language by integrating localized text resources. Static text elements, such as zoom toolbar tooltips and placeholder text for tile images that fail to load, can be translated into various languages (e.g., Arabic, German, French) by defining the appropriate locale value. To efficiently manage language-specific content, the localization process can utilize **.resx** files, enabling developers to maintain translations with ease. This feature enhances user experience and accessibility by allowing users to interact with the Maps component in their preferred language while ensuring seamless integration into applications tailored for diverse global audiences.
+The Blazor Maps component supports localization to display content in any language by integrating localized text resources. Static text elements, such as zoom toolbar tooltips and placeholder text for tile images that fail to load, can be translated into various languages (for example, Arabic, German, and French) by defining the appropriate locale value. To manage language-specific content efficiently, the localization process can use **.resx** files, enabling consistent maintenance of translations. This feature enhances accessibility by allowing interaction with the Maps component in the preferred language and supports integration in globally targeted applications.
 
-You can add culture-specific resource files using **.resx** files in your application. Please refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for details on localizing Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+Culture-specific resource files can be added using **.resx** files in the application. For implementation details, refer to the Blazor Localization topic: [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization).
 
-The table below shows the locale keywords and their corresponding text that can be displayed in the Blazor Maps component. These keywords represent various UI elements, such as tooltips for zoom toolbar including zoom, zoom in/out, pan and reset actions. By defining these locale keys, developers can customize the text displayed to users in different languages. 
+The table below lists the locale keywords and the corresponding text used in the Blazor Maps component. These keywords represent various UI elements, such as tooltips for the zoom toolbar including zoom, zoom in/out, pan, and reset actions. By defining these locale keys, the text displayed in different languages can be customized.
 
 <table>
 <tr>
-<td><b>Locale key words</b></td>
+<td><b>Locale keywords</b></td>
 <td><b>Text to display</b></td>
 </tr>
 <tr>
@@ -46,11 +46,8 @@ The table below shows the locale keywords and their corresponding text that can
 </tr>
 </table>
 
-These translations allow the Maps component to adapt to the user's preferred language, enhancing accessibility and usability.
+These translations enable the Maps component to adapt to the preferred language, improving accessibility and usability.
 
-The image below illustrates how the tooltip displays for the zoom toolbar values in different cultures.
+The image below illustrates tooltip text for the zoom toolbar in different cultures.
 
 ![Blazor Maps with Localization](./images/Localization/blazor-maps-zoom-toolbar-tooltip-with-localization.gif)
-
-
-
diff --git a/blazor/maps/maps-event.md b/blazor/maps/maps-event.md
index 48ef26a486..759d232ace 100644
--- a/blazor/maps/maps-event.md
+++ b/blazor/maps/maps-event.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Events in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about the events in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn about all available events and event handling in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # Events in Blazor Maps Component
  
-This section explains the list of events that will be triggered for appropriate actions in Maps. The events should be provided to the Maps using the [MapsEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html).
+This section explains the list of events that will be triggered for appropriate actions in Maps. The events are configured using the [MapsEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html).
 
 ## AnimationCompleted
 
-When the animation in the component is completed, the [AnimationCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnimationCompleted) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnimationCompleteEventArgs.html).
+When the animation in the component is completed, the [AnimationCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnimationCompleted) event is triggered. For details about the event arguments, see AnimationCompleteEventArgs. [AnimationCompleteEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnimationCompleteEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -33,13 +34,15 @@ When the animation in the component is completed, the [AnimationCompleted](https
         // Here you can customize your code
     }
 }
+
 ```
 
 ## AnnotationRendering
 
-Before the annotation is rendered in the Maps, the [AnnotationRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnnotationRendering) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationRenderingEventArgs.html).
+Before an annotation is rendered, the [AnnotationRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_AnnotationRendering) event is triggered. For details about the event arguments, see [AnnotationRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.AnnotationRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -66,13 +69,15 @@ Before the annotation is rendered in the Maps, the [AnnotationRendering](https:/
         // Here you can customize your code
     }
 }
+
 ```
 
 ## BubbleRendering
 
-The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_BubbleRendering) event is triggered before rendering each bubble. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleRenderingEventArgs.html).
+The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_BubbleRendering) event is triggered before each bubble is rendered. For details about the event arguments, see [BubbleRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -89,25 +94,26 @@ The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<Country> PopulationDetails = new List<Country> {
-       new Country
-       {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
-       },
-       new Country
-       {
-           Name = "Russia", Population = 142905208, Color = "#7bc1e8"
-       },
+        new Country
+        {
+            Name = "United States", Population = 325020000, Color = "#b5e485"
+        },
+        new Country
+        {
+            Name = "Russia", Population = 142905208, Color = "#7bc1e8"
+        },
        new Country
         {
-           Name="India", Population=1198003000, Color = "#df819c"
+            Name = "India", Population = 1198003000, Color = "#df819c"
         }
     };
 
@@ -116,13 +122,15 @@ The [BubbleRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
         // Here you can customize your code
     }
 }
+
 ```
 
 ## DataLabelRendering
 
-The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_DataLabelRendering) event is triggered before rendering each label. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LabelRenderingEventArgs.html).
+The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_DataLabelRendering) event is triggered before each data label is rendered. For details about the event arguments, see [LabelRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LabelRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -142,13 +150,15 @@ The [DataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
         // Here you can customize your code
     }
 }
+
 ```
 
 ## LayerRendering
 
-The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LayerRendering) event is triggered before rendering each layer. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LayerRenderingEventArgs.html).
+The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LayerRendering) event is triggered before each layer is rendered. For details about the event arguments, see [LayerRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LayerRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -165,13 +175,15 @@ The [LayerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
         // Here you can customize your code
     }
 }
+
 ```
 
 ## LegendRendering
 
-The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LegendRendering) event is triggered before rendering the legend in the component. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendRenderingEventArgs.html).
+The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_LegendRendering) event is triggered before the legend is rendered. For details about the event arguments, see [LegendRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LegendRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -194,14 +206,14 @@ The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
 
 @code {
     private List<UNCouncilCountry> SecurityCouncilDetails = new List<UNCouncilCountry>{
-         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
-         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
-         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
-         new UNCouncilCountry { Name= "United States", Membership= "Permanent"}
+        new UNCouncilCountry { Name = "China", Membership = "Permanent" },
+        new UNCouncilCountry { Name = "France", Membership = "Permanent" },
+        new UNCouncilCountry { Name = "Russia", Membership = "Permanent" },
+        new UNCouncilCountry { Name = "Kazakhstan", Membership = "Non-Permanent" },
+        new UNCouncilCountry { Name = "Poland", Membership = "Non-Permanent" },
+        new UNCouncilCountry { Name = "Sweden", Membership = "Non-Permanent" },
+        new UNCouncilCountry { Name = "United Kingdom", Membership = "Permanent" },
+        new UNCouncilCountry { Name = "United States", Membership = "Permanent" }
     };
 
     public class UNCouncilCountry
@@ -209,18 +221,21 @@ The [LegendRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
         public string Name { get; set; }
         public string Membership { get; set; }
     };
+
     public void LegendRenderingEvent(Syncfusion.Blazor.Maps.LegendRenderingEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## Loaded
 
-The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Loaded) event is triggered after the Maps component has been loaded. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadedEventArgs.html).
+The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Loaded) event is triggered after the Maps component is loaded. For details about the event arguments, see [LoadedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadedEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 <SfMaps>
 
@@ -237,13 +252,15 @@ The [Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEv
        // Here you can customize your code
     }
 }
+
 ```
 
 ## MarkerRendering
 
-The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerRendering) event is triggered before rendering each marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerRenderingEventArgs.html).
+The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerRendering) event is triggered before each marker is rendered. For details about the event arguments, see [MarkerRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -259,33 +276,40 @@ The [MarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> California = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260}
+        new City { Latitude = 35.145083, Longitude = -117.960260 }
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City {Latitude= 41.657782, Longitude=-91.533857}
+        new City { Latitude = 41.657782, Longitude = -91.533857 }
     };
+
     public void MarkerRenderingEvent(Syncfusion.Blazor.Maps.MarkerRenderingEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## MarkerClusterClick
 
-The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterClick) event is triggered after clicking the marker cluster. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs.html).
+The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterClick) event is triggered after a marker cluster is clicked. For details about the event arguments, see [MarkerClusterClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -313,28 +337,32 @@ The [MarkerClusterClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
         public double Longitude { get; set; }
         public string Name { get; set; }
         public double Area { get; set; }
-    };
+    }
+
     private List<City> LargestCities = new List<City> {
-        new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
-        new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
-        new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
-        new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
-        new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
-        new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
-        new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
+        new City { Latitude = 40.6971494, Longitude = -74.2598747, Name = "New York", Area = 8683 },
+        new City { Latitude = 40.0024137, Longitude = -75.2581194, Name = "Philadelphia", Area = 4661 },
+        new City { Latitude = 42.3142647, Longitude = -71.11037, Name = "Boston", Area = 4497 },
+        new City { Latitude = 42.3526257, Longitude = -83.239291, Name = "Detroit", Area = 3267 },
+        new City { Latitude = 47.2510905, Longitude = -123.1255834, Name = "Washington", Area = 2996 },
+        new City { Latitude = 25.7823907, Longitude = -80.2994995, Name = "Miami", Area = 2891 },
+        new City { Latitude = 19.3892246, Longitude = -70.1305136, Name = "San Juan", Area = 2309 }
     };
+
     public void MarkerClusterClickEvent(Syncfusion.Blazor.Maps.MarkerClusterClickEventArgs args)
     {
        // Here you can customize your code
     }
 }
+
 ```
 
 ## MarkerClusterMouseMove
 
-The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event will be triggered when the cursor moves over the marker cluster. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs.html).
+The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event is triggered when the cursor moves over a marker cluster. For details about the event arguments, see [MarkerClusterMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -362,28 +390,32 @@ The [MarkerClusterMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
         public double Longitude { get; set; }
         public string Name { get; set; }
         public double Area { get; set; }
-    };
+    }
+
     private List<City> LargestCities = new List<City> {
-        new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
-        new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
-        new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
-        new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
-        new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
-        new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
-        new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
+        new City { Latitude = 40.6971494, Longitude = -74.2598747, Name = "New York", Area = 8683 },
+        new City { Latitude = 40.0024137, Longitude = -75.2581194, Name = "Philadelphia", Area = 4661 },
+        new City { Latitude = 42.3142647, Longitude = -71.11037, Name = "Boston", Area = 4497 },
+        new City { Latitude = 42.3526257, Longitude = -83.239291, Name = "Detroit", Area = 3267 },
+        new City { Latitude = 47.2510905, Longitude = -123.1255834, Name = "Washington", Area = 2996 },
+        new City { Latitude = 25.7823907, Longitude = -80.2994995, Name = "Miami", Area = 2891 },
+        new City { Latitude = 19.3892246, Longitude = -70.1305136, Name = "San Juan", Area = 2309 }
     };
+
     public void MarkerClusterMouseMoveEvent(Syncfusion.Blazor.Maps.MarkerClusterMoveEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## MouseMove
 
-The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MouseMove) event is triggered when the mouse pointer moves over the map. To learn more about the arguments for this event, refer to the documentation [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseMoveEventArgs.html).
+The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MouseMove) event is triggered when the mouse pointer moves over the map. For details about the event arguments, see [MouseMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseMoveEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -411,16 +443,18 @@ The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Map
         public double Longitude { get; set; }
         public string Name { get; set; }
         public double Area { get; set; }
-    };
+    }
+
     private List<City> LargestCities = new List<City> {
-        new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
-        new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
-        new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
-        new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
-        new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
-        new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
-        new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
+        new City { Latitude = 40.6971494, Longitude = -74.2598747, Name = "New York", Area = 8683 },
+        new City { Latitude = 40.0024137, Longitude = -75.2581194, Name = "Philadelphia", Area = 4661 },
+        new City { Latitude = 42.3142647, Longitude = -71.11037, Name = "Boston", Area = 4497 },
+        new City { Latitude = 42.3526257, Longitude = -83.239291, Name = "Detroit", Area = 3267 },
+        new City { Latitude = 47.2510905, Longitude = -123.1255834, Name = "Washington", Area = 2996 },
+        new City { Latitude = 25.7823907, Longitude = -80.2994995, Name = "Miami", Area = 2891 },
+        new City { Latitude = 19.3892246, Longitude = -70.1305136, Name = "San Juan", Area = 2309 }
     };
+
     public void MouseMoveEvent(Syncfusion.Blazor.Maps.MouseMoveEventArgs  args)
     {
         // Here you can customize your code
@@ -430,9 +464,10 @@ The [MouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Map
 
 ## OnBubbleClick
 
-The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event will be triggered when clicking on the bubbles. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleClickEventArgs.html).
+The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_MarkerClusterMouseMove) event is triggered when a bubble is clicked. For details about the event arguments, see [BubbleClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleClickEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -449,26 +484,27 @@ The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<Country> PopulationDetails = new List<Country> {
-       new Country
-       {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
-       },
-       new Country
-       {
-           Name = "Russia", Population = 142905208, Color = "#7bc1e8"
-       },
-       new Country
-       {
-           Name="India", Population=1198003000, Color = "#df819c"
-       }
+        new Country
+        {
+            Name = "United States", Population = 325020000, Color = "#b5e485"
+        },
+        new Country
+        {
+            Name = "Russia", Population = 142905208, Color = "#7bc1e8"
+        },
+        new Country
+        {
+            Name = "India", Population = 1198003000, Color = "#df819c"
+        }
     };
 
     public void OnBubbleClickEvent(Syncfusion.Blazor.Maps.BubbleClickEventArgs args)
@@ -476,13 +512,15 @@ The [OnBubbleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnBubbleMouseMove
 
-The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnBubbleMouseMove) event will be triggered when the cursor moves over the bubbles. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleMoveEventArgs.html).
+The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnBubbleMouseMove) event is triggered when the cursor moves over a bubble. For details about the event arguments, see [BubbleMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.BubbleMoveEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -499,39 +537,43 @@ The [OnBubbleMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<Country> PopulationDetails = new List<Country> {
-       new Country
-       {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
-       },
-       new Country
-       {
-           Name = "Russia", Population = 142905208, Color = "#7bc1e8"
-       },
-       new Country
-       {
-           Name="India", Population=1198003000, Color = "#df819c"
-       }
+        new Country
+        {
+            Name = "United States", Population = 325020000, Color = "#b5e485"
+        },
+        new Country
+        {
+            Name = "Russia", Population = 142905208, Color = "#7bc1e8"
+        },
+        new Country
+        {
+            Name = "India", Population = 1198003000, Color = "#df819c"
+        }
     };
+
     public void OnBubbleMouseMoveEvent(Syncfusion.Blazor.Maps.BubbleMoveEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnClick
 
-The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnClick) event will be triggered after the Maps is clicked. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
+The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnClick) event is triggered after the map is clicked. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -543,7 +585,6 @@ The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE
 </SfMaps>
 
 @code {
-
     public void OnClickEvent(Syncfusion.Blazor.Maps.MouseEventArgs args)
     {
         // Here you can customize your code
@@ -553,9 +594,10 @@ The [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE
 
 ## OnDoubleClick
 
-When performing the double click operation on an element in Maps, the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnDoubleClick) will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
+When a double-click operation is performed on an element, the [OnDoubleClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnDoubleClick) event is triggered. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -572,15 +614,17 @@ When performing the double click operation on an element in Maps, the [OnDoubleC
       // Here you can customize your code
     }
 }
+
 ```
 
 ## OnItemHighlight
 
-The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemHighlight) event occurs when the cursor moves over the shapes. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html).
+The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemHighlight) event occurs when the cursor moves over shapes. For details about the event arguments, see [SelectionEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html).
 
 @using Syncfusion.Blazor.Maps
 
 ```cshtml
+
 <SfMaps>
     <MapsEvents OnItemHighlight="@OnItemHighlightEvent"></MapsEvents>
     <MapsLayers>
@@ -598,13 +642,15 @@ The [OnItemHighlight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ma
        // Here you can customize your code
     }
 }
+
 ```
 
 ## OnItemSelect
 
-The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemSelect) event occurs when selecting the shapes in the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html).
+The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnItemSelect) event occurs when shapes are selected. For details about the event arguments, see [SelectionEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SelectionEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -624,14 +670,17 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.
          // Here you can customize your code
     }
 }
+
 ```
 
 ## OnLoad
 
-[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnLoad) event will be triggered before rendering the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadEventArgs.html).
+The [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnLoad) event is triggered before the map is rendered. For details about the event arguments, see [LoadEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.LoadEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
+
 <SfMaps>
     <MapsEvents OnLoad="@OnLoadEvent"></MapsEvents>
     <MapsLayers>
@@ -646,13 +695,15 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnMarkerClick
 
-[OnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerClick) event will be triggered by clicking the markers in the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClickEventArgs.html).
+The [OnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerClick) event is triggered when a marker is clicked. For details about the event arguments, see [MarkerClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerClickEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -668,21 +719,26 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> California = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260}
+        new City {Latitude = 35.145083, Longitude = -117.960260 }
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City {Latitude= 41.657782, Longitude=-91.533857}
+        new City {Latitude = 41.657782, Longitude = -91.533857 }
     };
+
     public void OnMarkerClickEvent(Syncfusion.Blazor.Maps.MarkerClickEventArgs args)
     {
        // Here you can customize your code
@@ -692,9 +748,10 @@ The [OnItemSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.
 
 ## OnMarkerMouseLeave
 
-The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves away from the marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html).
+The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves away from a marker. For details about the event arguments, see [MarkerMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -710,33 +767,40 @@ The [OnMarkerMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> California = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260}
+        new City {Latitude = 35.145083, Longitude = -117.960260 }
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City {Latitude= 41.657782, Longitude=-91.533857}
+        new City {Latitude = 41.657782, Longitude = -91.533857 }
     };
+
     public void OnMarkerMouseLeaveEvent(Syncfusion.Blazor.Maps.MarkerMoveEventArgs args)
     {
        // Here you can customize your code
     }
 }
+
 ```
 
 ## OnMarkerMouseMove
 
-The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves over the marker. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html).
+The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerMouseMove) event is triggered when the cursor moves over a marker. For details about the event arguments, see [MarkerMoveEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MarkerMoveEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -752,34 +816,42 @@ The [OnMarkerMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> California = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260}
+        new City {Latitude = 35.145083, Longitude = -117.960260}
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City {Latitude= 41.657782, Longitude=-91.533857}
+        new City {Latitude = 41.657782, Longitude = -91.533857}
     };
+
     public void OnMarkerMouseMoveEvent(Syncfusion.Blazor.Maps.MarkerMoveEventArgs args)
     {
        // Here you can customize your code
     }
 }
+
 ```
 
 ## OnPan
 
-When panning the Maps, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) event will be triggered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan).
+When panning the map, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) event is triggered. For details about the event arguments, see [OnPan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPan) in the MapsEvents API reference to know more about the arguments of this event.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
+
 <SfMaps>
     <MapsZoomSettings Enable="true" EnablePanning="true">
         <MapsZoomToolbarSettings Orientation="Orientation.Vertical">
@@ -799,13 +871,15 @@ When panning the Maps, the [OnPan](https://help.syncfusion.com/cr/blazor/Syncfus
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnPanComplete
 
-The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) event will be triggered after panning the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete).
+The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) event is triggered after panning completes. For details about the event arguments, see [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPanComplete) in the MapsEvents API reference to know more about the arguments of this event.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 <SfMaps>
     <MapsZoomSettings Enable="true" EnablePanning="true">
@@ -826,13 +900,15 @@ The [OnPanComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnPrint
 
-The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPrint) event will be triggered before the print operation is started. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PrintEventArgs.html).
+The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnPrint) event is triggered before a print operation starts. For details about the event arguments, see [PrintEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PrintEventArgs.html).
 
 ```cshtml
+
 <button @onclick="PrintMap">Print</button>
 
 @using Syncfusion.Blazor.Maps
@@ -846,23 +922,27 @@ The [OnPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsE
 
 @code {
     SfMaps maps;
+
     public async Task PrintMap()
     {
         // using Maps component reference call 'Print' method
         await this.maps.PrintAsync();
     }
+
     public void GetGEOLocation(Syncfusion.Blazor.Maps.PrintEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnRightClick
 
-The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnRightClick) event will be triggered when performing the right click operation on an element in Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
+The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnRightClick) event is triggered when a right-click operation is performed on an element. For details about the event arguments, see [MouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MouseEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -874,20 +954,22 @@ The [OnRightClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.
 </SfMaps>
 
 @code {
-
     public void OnRightClickEvent(Syncfusion.Blazor.Maps.MouseEventArgs args)
     {
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnZoom
 
-The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoom) event will be triggered before zooming-in or zooming-out the Maps. This event is also triggered when the [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called.To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html).
+The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoom) event is triggered before zooming in or out. It is also triggered when [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. For details about the event arguments, see [MapZoomEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
+
 <SfMaps>
     <MapsZoomSettings Enable="true">
         <MapsZoomToolbarSettings Orientation="Orientation.Vertical">
@@ -907,14 +989,17 @@ The [OnZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEv
         // Here you can customize your code
     }
 }
+
 ```
 
 ## OnZoomComplete
 
-The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoomComplete) event will be triggered after performing zooming operation. This event is also triggered when the [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html).
+The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnZoomComplete) event is triggered after a zoom operation completes. It is also triggered when [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) and [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) methods are called. For details about the event arguments, see [MapZoomEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapZoomEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
+
 <SfMaps>
     <MapsZoomSettings Enable="true">
         <MapsZoomToolbarSettings Orientation="Orientation.Vertical">
@@ -934,14 +1019,17 @@ The [OnZoomComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
         // Here you can customize your code
     }
 }
+
 ```
 
 ## Resizing
 
-The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Resizing) event will be triggered when resizing the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ResizeEventArgs.html).
+The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_Resizing) event is triggered when the map is resized. For details about the event arguments, see [ResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ResizeEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
+
 <SfMaps>
     <MapsEvents Resizing="@ResizingEvent"></MapsEvents>
     <MapsLayers>
@@ -956,13 +1044,15 @@ The [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.Maps
        // Here you can customize your code
     }
 }
+
 ```
 
 ## ShapeHighlighted
 
-The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeHighlighted) event is triggered when mouse move on the shape in Maps and before the shape gets highlighted. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html).
+The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeHighlighted) event is triggered when the cursor moves over a shape, before it is highlighted. For details about the event arguments, see [ShapeSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -982,13 +1072,15 @@ The [ShapeHighlighted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.M
         // Here you can customize your code
     }
 }
+
 ```
 
 ## ShapeRendering
 
-The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeRendering) event will be triggered before rendering a shape of the Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeRenderingEventArgs.html).
+The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeRendering) event is triggered before a shape is rendered. For details about the event arguments, see [ShapeRenderingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeRenderingEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -1005,13 +1097,15 @@ The [ShapeRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
         // Here you can customize your code
     }
 }
+
 ```
 
 ## ShapeSelected
 
-The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeSelected) event is triggered when a shape is selected in Maps. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html).
+The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_ShapeSelected) event is triggered when a shape is selected. For details about the event arguments, see [ShapeSelectedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ShapeSelectedEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -1031,13 +1125,16 @@ The [ShapeSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
         // Here you can customize your code
     }
 }
+
+
 ```
 
 ## TooltipRendering
 
-The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_TooltipRendering) event is triggered before the tooltip gets rendered. To know more about the arguments of this event, refer [here](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.TooltipRenderEventArgs.html).
+The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_TooltipRendering) event is triggered before a tooltip is rendered. For details about the event arguments, see [TooltipRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.TooltipRenderEventArgs.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -1055,4 +1152,5 @@ The [TooltipRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.M
        // Here you can customize your code
     }
 }
+
 ```
\ No newline at end of file
diff --git a/blazor/maps/maps-method.md b/blazor/maps/maps-method.md
index 345737856a..40fb21aa0a 100644
--- a/blazor/maps/maps-method.md
+++ b/blazor/maps/maps-method.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Methods in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about methods in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn about all the available methods and how to utilize those methods in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Methods in Blazor Maps Component
 
-This section explains the methods used in the Maps component.
+This section describes the available methods in the Blazor Maps component.
 
 ## ShapeSelectionAsync
 
@@ -17,12 +17,13 @@ The [ShapeSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 |   Argument name      |   Description                            |
 |----------------------| -----------------------------------------|
-|     layerIndex       |    Specifies the index number of layer in which the shape is to be selected. |
-|     propertyName     |    Specifies the property path for map shape data to select the shape.           |
-|     name             |    Specifies the shape data path for the data source of the layer.           |
-|     enable           |    Specifies whether to select or unselect the shape. |
+|     layerIndex       |    Specifies the zero based index of the layer in which the shape is selected. |
+|     propertyName     |    Specifies the property path in the map shape data used to locate the shape.           |
+|     name             |    Specifies the value to match for the given propertyName in the layer data source.           |
+|     enable           |    Specifies whether to select (true) or unselect (false) the shape. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ShapeSelectAsync">Select Shape</button>
@@ -38,18 +39,21 @@ The [ShapeSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 @code {
     SfMaps maps;
+
     public async Task ShapeSelectAsync()
     {
          await maps.ShapeSelectionAsync(0, "name", "Argentina");
     }
 }
+
 ```
 
 ## Refresh
 
-The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Refresh) method can be used to change the state of the component and render it again.
+The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_Refresh) method refreshes the component and renders it again.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="Refresh">Refresh</button>
@@ -64,23 +68,26 @@ The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMap
 
 @code {
     SfMaps maps;
+
     public void Refresh()
     {
        maps.Refresh();
     }
 }
+
 ```
 
 ## PanByDirectionAsync
 
-The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#methods)) method pans the Maps dynamically by specifying direction. The following are the arguments for this method.
+The [PanByDirectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#methods) method pans the Maps dynamically by specifying a direction. The following are the arguments for this method.
 
 |   Argument name      |   Description                            |
 |----------------------| -----------------------------------------|
-|     direction        |    Specifies to the direction of panning operation. |
-|     mouseLocation    |    Specifies the position of the panning within the Maps.  |
+|     direction        |    Specifies the panning direction. |
+|     mouseLocation    |    Specifies the position from which the panning originates within the Maps.  |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="PanByDirectionAsync">Pan by Direction</button>
@@ -95,6 +102,7 @@ The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 @code {
     SfMaps maps;
+
     void PanByDirectionAsync()
     {
         Syncfusion.Blazor.Maps.Internal.Point position = new Syncfusion.Blazor.Maps.Internal.Point();
@@ -103,18 +111,20 @@ The [PanByDirectionAsync]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
         maps.PanByDirectionAsync(Syncfusion.Blazor.Maps.PanDirection.Bottom, position);
     }
 }
+
 ```
 
 ## ZoomByPosition
 
-The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) method zooms the Maps by specifying the center position for the map. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method.
+The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomByPosition_Syncfusion_Blazor_Maps_MapsCenterPosition_System_Double_) method zooms the Maps by specifying the center position. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method.
 
 |   Argument name      |   Description                            |
 |----------------------| -----------------------------------------|
-|     centerPosition   |    Specifies the position of the maps.   |
-|     zoomFactor       |    Specifies the zoom level of maps.     |
+|     centerPosition   |    Specifies the center position of the map.   |
+|     zoomFactor       |    Specifies the zoom level of the map.        |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ZoomByPosition">ZoomByPosition</button>
@@ -129,6 +139,7 @@ The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
 
 @code {
     SfMaps maps;
+
     public void ZoomByPosition()
     {
         MapsCenterPosition centerPosition = new MapsCenterPosition();
@@ -137,11 +148,12 @@ The [ZoomByPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Map
         maps.ZoomByPosition(centerPosition, 2);
     }
 }
+
 ```
 
 ## ZoomToCoordinates
 
-The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) zooms the map to the center point of the provided minimum and maximum coordinates. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method.
+The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ZoomToCoordinates_System_Double_System_Double_System_Double_System_Double_) method zooms the map to the center point of the provided minimum and maximum coordinates. This method triggers the [OnZoom](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoom) event when the zooming operation begins and the [OnZoomComplete](https://blazor.syncfusion.com/documentation/maps/maps-event#onzoomcomplete) event when the zooming operation is completed. The following are the arguments for this method.
 
 |   Argument name      |   Description                            |
 |----------------------| -----------------------------------------|
@@ -151,6 +163,7 @@ The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 |     maxLongitude     |    Specifies the maximum longitude of the coordinate for the zooming operation. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ZoomToCoordinates">ZoomToCoordinates</button>
@@ -165,18 +178,21 @@ The [ZoomToCoordinates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 @code {
     SfMaps maps;
+
     public void ZoomToCoordinates()
     {
         maps.ZoomToCoordinates(0, 0, 100, 100);
     }
 }
+
 ```
 
 ## GetMinMaxLatitudeLongitude
 
-The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_GetMinMaxLatitudeLongitude) method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a [MinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MinMaxLatitudeLongitude.html) class object that contains the Maps minimum and maximum latitude and longitude coordinates.
+The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_GetMinMaxLatitudeLongitude) method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a [MinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MinMaxLatitudeLongitude.html) class instance that contains the minimum and maximum latitude and longitude coordinates.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 @using System.Collections.ObjectModel;
 
@@ -192,7 +208,6 @@ The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusio
     </div>
 }
 
-
 <SfMaps ID="maps" @ref="MapsRef">
     <MapsZoomSettings Enable="true" ZoomFactor="@ZoomFactor"></MapsZoomSettings>
     <MapsCenterPosition Latitude="@CenterLat" Longitude="@CenterLong"></MapsCenterPosition>
@@ -231,4 +246,5 @@ The [GetMinMaxLatitudeLongitude](https://help.syncfusion.com/cr/blazor/Syncfusio
         new MarkerData {Latitude=25.0700428,Longitude=67.2847875}
     };
 }
+
 ```
\ No newline at end of file
diff --git a/blazor/maps/markers.md b/blazor/maps/markers.md
index a8db88585a..eafbec821f 100644
--- a/blazor/maps/markers.md
+++ b/blazor/maps/markers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Markers in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about markers in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to configure and customize markers in the Syncfusion Blazor Maps component for effective data visualization.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,16 +9,17 @@ documentation: ug
 
 # Markers in Blazor Maps Component
 
-Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Visible) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **true**.
+Markers annotate locations on Maps with symbols. Enable markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Visible) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **true**.
 
 ## Adding marker
 
-To add the markers, the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) has a list of objects that contains the data for markers. Using this property, any number of markers can be added to the layers of the Maps. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object should contain the following list of properties.
+To add markers, assign a list of objects to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Any number of markers can be added to map layers. By default, markers render at the specified latitude and longitude in the data source. Each data item should include:
 
-* Latitude - Specifies the position of the marker in latitude co-ordinate.
-* Longitude - Specifies the position of the marker in longitude co-ordinate.
+* Latitude - Specifies the marker position in latitude coordinates.
+* Longitude - Specifies the marker position in longitude coordinates.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -33,31 +34,37 @@ To add the markers, the [DataSource](https://help.syncfusion.com/cr/blazor/Syncf
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> California = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260}
+        new City {Latitude = 35.145083,Longitude = -117.960260}
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City {Latitude= 41.657782, Longitude=-91.533857}
+        new City {Latitude = 41.657782, Longitude = -91.533857}
     };
 }
+
 ```
 
 ![Blazor Maps with Marker](./images/Marker/blazor-maps-marker.png)
 
 ## Adding marker template
 
-The marker can be added as a template in the Maps component. The [MarkerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_MarkerTemplate) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) is used to set HTML element as a template for the marker.
+Markers can be rendered using a template. Use the [MarkerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_MarkerTemplate) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to supply an HTML element as the template.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Height="600" Width="700">
@@ -90,40 +97,46 @@ The marker can be added as a template in the Maps component. The [MarkerTemplate
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> Europe = new List<City> {
-        new City { Latitude=49.95121990866204, Longitude=18.468749999999998 }
+        new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998 }
     };
+
     public List<City> NorthAmerica = new List<City> {
-        new City { Latitude= 59.88893689676585, Longitude= -109.3359375 }
+        new City { Latitude = 59.88893689676585, Longitude = -109.3359375 }
     };
+
     public List<City> SouthAmerica = new List<City> {
-        new City { Latitude= -6.64607562172573, Longitude=-55.54687499999999 }
+        new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999 }
     };
 }
+
 ```
 
 ![Blazor Maps with Marker Template](./images/Marker/blazor-maps-marker-template.PNG)
 
 ## Customization
 
-The following properties and class are available in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to customize the markers of the Maps component.
+Use the following properties and class in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to customize markers in the Maps component.
 
-* [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html) - To customize the color and width of the border for the markers in Maps.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Fill) - To apply the color for markers in Maps.
-* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DashArray) - To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps.
-* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Height) - To customize the height of the markers in Maps.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Width) - To customize the width of the markers in Maps.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Opacity) - To customize the transparency of the markers in Maps.
-* [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDelay) - To change the time delay in the transition for markers.
-* [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDuration) - To change the time duration of animation for markers.
+* [MapsMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerBorder.html) - Customizes the border color and width for markers.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Fill) - Applies a fill color to markers.
+* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DashArray) - Defines the dash pattern for marker outlines.
+* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Height) - Sets marker height.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Width) - Sets marker width.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Opacity) - Controls marker transparency.
+* [AnimationDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDelay) - Sets the transition delay for markers.
+* [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_AnimationDuration) - Sets the animation duration for markers.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -139,25 +152,28 @@ The following properties and class are available in [MapsMarker](https://help.sy
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> MarkerData = new List<City> {
-        new City { Latitude=35.145083, Longitude=-117.960260 },
-        new City { Latitude=40.724546, Longitude=-73.850344 },
-        new City { Latitude= 41.657782, Longitude=-91.533857 }
+        new City { Latitude = 35.145083, Longitude = -117.960260 },
+        new City { Latitude = 40.724546, Longitude = -73.850344 },
+        new City { Latitude = 41.657782, Longitude = -91.533857 }
     };
 }
+
 ```
 
 ![Blazor Maps with Custom Marker](./images/Marker/blazor-maps-custom-marker.PNG)
 
 ## Marker shapes
 
-The Maps component supports the following marker shapes. To set the shape of the marker, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) is used.
+The Maps component supports the following marker shapes. Set the marker shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html).
 
 * Balloon
 * Circle
@@ -165,16 +181,17 @@ The Maps component supports the following marker shapes. To set the shape of the
 * Diamond
 * Image
 * Rectangle
-* Start
+* Star
 * Triangle
 * VerticalLine
 * HorizontalLine
 
 ### Rendering marker shape as image
 
-To render a marker as an image in Maps, set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) as **Image** and specify the path of the image to [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrl) property. There is another way to render a marker as an image using the [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Bind the field name that contains the path of the image in the data source to the [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property.
+To render a marker as an image, set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Shape) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **Image** and specify the image path in [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrl) property. Alternatively, bind the field containing the image path using [ImageUrlValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ImageUrlValuePath) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -189,27 +206,31 @@ To render a marker as an image in Maps, set the [Shape](https://help.syncfusion.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> MarkerData = new List<City> {
-        new City { Latitude=35.145083,Longitude=-117.960260 },
-        new City { Latitude=40.724546, Longitude=-73.850344 },
-        new City { Latitude= 41.657782, Longitude=-91.533857 }
+        new City { Latitude  = 35.145083, Longitude = -117.960260 },
+        new City { Latitude = 40.724546, Longitude = -73.850344 },
+        new City { Latitude = 41.657782, Longitude = -91.533857 }
     };
 }
+
 ```
 
 ![Blazor Maps Marker with Image](./images/Marker/blazor-maps-marker-image.PNG)
 
 ## Multiple marker groups
 
-Multiple groups of markers can be added in the Maps by adding multiple [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) in the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and customization for the markers can be done with the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html).
+Multiple groups of markers can be added by including multiple [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) tags within [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html). Each group can be customized using its corresponding [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -233,18 +254,21 @@ Multiple groups of markers can be added in the Maps by adding multiple [MapsMark
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     private List<City> CitiesInUS = new List<City> {
         new City { Latitude = 37.0000, Longitude = -120.0000, Name = "California" },
-        new City { Latitude= 40.7127, Longitude = -74.0059, Name = "New York" },
+        new City { Latitude = 40.7127, Longitude = -74.0059, Name = "New York" },
         new City { Latitude = 42, Longitude = -93, Name = "Iowa" }
     };
+
     private List<City> CitiesInIndia = new List<City> {
-        new City { Latitude = 19.228825, Longitude = 72.854118, Name= "Mumbai" },
-        new City { Latitude = 28.610001, Longitude = 77.230003, Name= "Delhi" },
-        new City { Latitude = 13.067439, Longitude = 80.237617, Name= "Chennai" }
+        new City { Latitude = 19.228825, Longitude = 72.854118, Name = "Mumbai" },
+        new City { Latitude = 28.610001, Longitude = 77.230003, Name = "Delhi" },
+        new City { Latitude = 13.067439, Longitude = 80.237617, Name = "Chennai" }
     };
 }
+
 ```
 
 ![Blazor Maps with Multiple Marker Group](./images/Marker/blazor-maps-multiple-marker-group.png)
@@ -253,9 +277,10 @@ Multiple groups of markers can be added in the Maps by adding multiple [MapsMark
 
 ### Bind different colors and shapes to the marker from data source
 
-Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties, the color and shape of the marker can be applied from the given data source. Bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and set the field names that contains the shape and color values in the data source to the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties.
+Using [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ShapeValuePath) and [ColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_ColorValuePath) properties, color and shape can be bound from the data source. Bind the data source to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) and set field names containing shape and color values to `ShapeValuePath` and `ColorValuePath`.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -268,6 +293,7 @@ Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class MapMarkerDataSource
     {
@@ -276,22 +302,25 @@ Using the [ShapeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
         public string name { get; set; }
         public string color { get; set; }
         public string shape { get; set; }
-    };
+    }
+
     public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe", color="red", shape="Triangle" },
-        new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America", color="blue", shape="Pentagon" },
-        new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America", color="green", shape="InvertedTriangle" }
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe", color = "red", shape = "Triangle" },
+        new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America", color = "blue", shape = "Pentagon" },
+        new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America", color = "green", shape = "InvertedTriangle" }
     };
 }
+
 ```
 
 ![Blazor Maps with Custom Marker Shape](./images/Marker/blazor-maps-custom-marker-shape.PNG)
 
 ### Setting value path from the data source
 
-The latitude and longitude values are used to determine the location of each marker in the Maps. The [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties.
+Latitude and longitude determine the location of each marker. Use [LatitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LatitudeValuePath) and [LongitudeValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_LongitudeValuePath) properties to specify the corresponding fields in the marker data source.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -305,27 +334,31 @@ The latitude and longitude values are used to determine the location of each mar
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
-    };
+    }
+
     public List<City> MarkerData = new List<City> {
-        new City { Latitude=35.145083, Longitude=-117.960260 },
-        new City { Latitude=40.724546, Longitude=-73.850344 },
-        new City { Latitude= 41.657782, Longitude=-91.533857 }
+        new City { Latitude = 35.145083, Longitude = -117.960260 },
+        new City { Latitude = 40.724546, Longitude = -73.850344 },
+        new City { Latitude = 41.657782, Longitude = -91.533857 }
     };
 }
+
 ```
 
 ![Setting Value Path from DataSource in Blazor Maps Marker](./images/Marker/blazor-maps-marker.PNG)
 
 ### Setting different sizes for markers individually
 
-The size of the markers in a marker group can be customized using the [WidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_WidthValuePath) and [HeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_HeightValuePath) properties, which allow the user to change the width and height of the markers based on values from the given data source. Bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource) property of the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) tag, and specify the field names containing the width and height values in the data source for the `WidthValuePath` and `HeightValuePath` properties.
+Marker sizes within a group can vary using [WidthValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_WidthValuePath) and [HeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_HeightValuePath) properties, which read width and height from the data source. Bind the data source to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_DataSource), and provide the width and height field names.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -339,6 +372,7 @@ The size of the markers in a marker group can be customized using the [WidthValu
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
@@ -346,20 +380,22 @@ The size of the markers in a marker group can be customized using the [WidthValu
         public double Longitude { get; set; }
         public double Width {get; set; }
         public double Height {get; set; }
-    };
+    }
+
     public List<City> MarkerData = new List<City> {
-        new City { Latitude=49.95121990866204, Longitude=18.468749999999998, Width=30, Height=30  },
-        new City { Latitude=59.88893689676585, Longitude=-109.3359375 , Width=20, Height=20 },
-        new City { Latitude=-6.64607562172573, Longitude=-55.54687499999999 , Width=10, Height=10}
+        new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Width = 30, Height = 30  },
+        new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Width = 20, Height = 20 },
+        new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Width = 10, Height = 10 }
     };
 }
+
 ```
 
 ![Setting different sizes for markers from DataSource in Blazor Maps Marker](./images/Marker/blazor-maps-marker-sizes.PNG)
 
 ## Repositioning the marker using drag and drop
 
-The markers on the map can be dragged and dropped to change their position. To enable marker drag and drop, set the [EnableDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_EnableDrag) property to **true** in the `MapsMarker` setting.
+Markers can be repositioned by dragging and dropping. Enable drag-and-drop by setting [EnableDrag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_EnableDrag) property to **true** in the `MapsMarker` settings.
 
 ```cshtml
 
@@ -385,33 +421,35 @@ The markers on the map can be dragged and dropped to change their position. To e
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     public List<City> MarkerDataSource = new List<City> {
-        new City {Latitude=49.95121990866204,Longitude=18.468749999999998, Name = "Marker 1"},
-        new City {Latitude=59.88893689676585,Longitude= -109.3359375, Name = "Marker 2"},
-        new City {Latitude=-6.64607562172573,Longitude=-55.54687499999999, Name = "Marker 3"},
-        new City {Latitude=23.644385824912135,Longitude=77.83189239539234, Name = "Marker 4"},
-        new City {Latitude=63.66569332894224,Longitude= 98.2225173953924, Name = "Marker 5"}
+        new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Name = "Marker 1" },
+        new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Name = "Marker 2" },
+        new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Name = "Marker 3" },
+        new City { Latitude = 23.644385824912135, Longitude = 77.83189239539234, Name = "Marker 4" },
+        new City { Latitude = 63.66569332894224, Longitude = 98.2225173953924, Name = "Marker 5" }
     };
 }
+
 ```
 
 ![Marker with drag and drop functionality in Blazor Maps](./images/Marker/marker-drag-and-drop.gif)
 
-The data of the drag and dropped marker in the marker data source can be customized using the [OnMarkerDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragStart) and [OnMarkerDragEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragEnd) events. When you change the appropriate marker data, the tooltip and legend item text of that marker are automatically updated. The following properties are available in the event argument of the marker drag events.
+The marker data can be updated during drag operations using the [OnMarkerDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragStart) and [OnMarkerDragEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html#Syncfusion_Blazor_Maps_MapsEvents_OnMarkerDragEnd) events. Updating the relevant marker data automatically refreshes tooltip and legend text for that marker. The following properties are available in the event arguments:
 
 |   Argument Name      |   Description                               |
 |----------------------| --------------------------------------------|
-|   DataIndex          |   It represents the index of the data of the dragged marker in the marker data source.                          |
-|   Latitude           |   It represents the latitude coordinate point of the dragged marker.                                            |
-|   Longitude          |   It represents the longitude coordinate point for the dragged marker.                                          |
-|   MarkerIndex        |   It represents the index of the marker setting.                                                                |
-|   LayerIndex         |   It represents the index of the layer in which the marker belongs.                                             |
-|   EventName          |   It represents the name of the event.                                                                     |
-|   X                  |   It represents the horizontal location of the mouse pointer on the map when the drag action is performed.      |
-|   Y                  |   It represents the vertical location of the mouse pointer on the map when the drag action is performed.        |
+|   DataIndex          |   Index of the dragged marker data in the marker data source.         |
+|   Latitude           |   Latitude coordinate of the dragged marker.                          |
+|   Longitude          |   Longitude coordinate of the dragged marker.                         |
+|   MarkerIndex        |   Index of the marker setting.                                        |
+|   LayerIndex         |   Index of the layer containing the marker.                           |
+|   EventName          |   Name of the event.                                                  |
+|   X                  |   Horizontal mouse position on the map during drag.                   |
+|   Y                  |   Vertical mouse position on the map during drag.                     |
 
-The following example shows how to use marker drag events to customize the data of the drag and dropped marker in the marker data source.
+The example below demonstrates customizing marker data in response to drag events.
 
 ```cshtml
 
@@ -433,25 +471,30 @@ The following example shows how to use marker drag events to customize the data
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public SfMaps maps;
+
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     public List<City> MarkerDataSource = new List<City> {
-        new City {Latitude=49.95121990866204,Longitude=18.468749999999998, Name = "Europe"},
-        new City {Latitude=59.88893689676585,Longitude= -109.3359375, Name = "North America"},
-        new City {Latitude=-6.64607562172573,Longitude=-55.54687499999999, Name = "Sout America"},
-        new City {Latitude=23.644385824912135,Longitude=77.83189239539234, Name = "India"},
-        new City {Latitude=63.66569332894224,Longitude= 98.2225173953924, Name = "China"}
+        new City { Latitude = 49.95121990866204, Longitude = 18.468749999999998, Name = "Europe" },
+        new City { Latitude = 59.88893689676585, Longitude = -109.3359375, Name = "North America" },
+        new City { Latitude = -6.64607562172573, Longitude = -55.54687499999999, Name = "Sout America" },
+        new City { Latitude = 23.644385824912135, Longitude = 77.83189239539234, Name = "India" },
+        new City { Latitude = 63.66569332894224, Longitude = 98.2225173953924, Name = "China" }
     };
+
     public void MarkerDragStartEvent(MarkerDragStartEventArgs args)
     {
         // When the marker begins to move on the map, the event is triggered.
     }
+
     public void MarkerDragEndEvent(MarkerDragEndEventArgs args)
     {
         // When the marker on the map stops dragging, the event is triggered.
@@ -459,15 +502,17 @@ The following example shows how to use marker drag events to customize the data
         maps.Refresh();
     }
 }
+
 ```
 
 ![Marker customization using marker drag events in Blazor Maps](./images/Marker/marker-drag-events.gif)
 
 ## Marker zooming
 
-The Maps can be initially scaled to the center value based on the marker distance. This can be achieved by setting the [ShouldZoomInitially](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ShouldZoomInitially) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) as **true**.
+Maps can initially zoom based on marker distribution by setting [ShouldZoomInitially](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ShouldZoomInitially) property to **true** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -484,28 +529,32 @@ The Maps can be initially scaled to the center value based on the marker distanc
         </MapsZoomToolbarSettings>
     </MapsZoomSettings>
 </SfMaps>
+
 @code {
     public class MapMarkerDataSource
     {
         public double latitude { get; set; }
         public double longitude { get; set; }
         public string name { get; set; }
-    };
+    }
+
     public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
-        new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" },
+        new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" }
     };
 }
+
 ```
 
 ![Blazor Maps Marker with Zooming](./images/Marker/blazor-maps-marker-zooming.PNG)
 
 ## Disabling Zoom on Marker Click
 
-Maps typically zoom in when you click or double-click on them. This zooming also occurs when you click on a marker. To prevent zooming when clicking on a marker, you can set [ZoomOnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnMarkerClick) to **false** in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). This setting disables zooming specifically for marker clicks. By default, `ZoomOnMarkerClick` is set to **true**.
+Maps typically zoom on click or double-click, including when clicking a marker. To disable zooming for marker clicks, set [ZoomOnMarkerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnMarkerClick) to **false** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). By default, `ZoomOnMarkerClick` is **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -522,30 +571,34 @@ Maps typically zoom in when you click or double-click on them. This zooming also
         </MapsZoomToolbarSettings>
     </MapsZoomSettings>
 </SfMaps>
+
 @code {
     public class MapMarkerDataSource
     {
         public double latitude { get; set; }
         public double longitude { get; set; }
         public string name { get; set; }
-    };
+    }
+
     public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
-        new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" },
+        new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" }
     };
 }
+
 ```
 
 ![Disabling Zoom on Marker Click in Blazor Maps](./images/Marker/blazor-maps-disabling-zooming-on-marker-click.gif)
 
 ## Marker clustering
 
-Maps support hiding and clustering markers when they overlap. The number on a cluster indicates how many overlapping markers it contains. When zooming into any cluster location on the map, the number on the cluster decreases, and individual markers become visible. When zooming out, the overlapping markers increase, causing them to cluster again, which increases the count on the cluster.
+Maps support clustering of overlapping markers. A cluster displays the count of contained markers. Zooming into a cluster location reduces the count and reveals individual markers; zooming out increases overlap and re-forms clusters.
 
-To enable clustering for markers within a layer, set the [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property of [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **true**. Customization of clustering can be done using the `MapsMarkerClusterSettings` property. 
+To enable clustering within a layer, set [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property to **true** in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) on the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). Customize clustering using the corresponding `MapsMarkerClusterSettings` properties.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -572,38 +625,41 @@ To enable clustering for markers within a layer, set the [AllowClustering](https
         public double Longitude { get; set; }
         public string Name { get; set; }
         public double Area { get; set; }
-    };
+    }
+
     private List<City> LargestCities = new List<City> {
-        new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
-        new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
-        new City { Latitude=42.3142647, Longitude= -71.11037, Name="Boston", Area=4497 },
-        new City { Latitude=42.3526257, Longitude= -83.239291, Name="Detroit", Area=3267 },
-        new City { Latitude=47.2510905, Longitude= -123.1255834, Name="Washington", Area=2996 },
-        new City { Latitude=25.7823907, Longitude= -80.2994995, Name="Miami", Area=2891 },
-        new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
+        new City { Latitude = 40.6971494, Longitude = -74.2598747, Name = "New York", Area = 8683 },
+        new City { Latitude = 40.0024137, Longitude = -75.2581194, Name = "Philadelphia", Area = 4661 },
+        new City { Latitude = 42.3142647, Longitude = -71.11037, Name = "Boston", Area = 4497 },
+        new City { Latitude = 42.3526257, Longitude = -83.239291, Name = "Detroit", Area = 3267 },
+        new City { Latitude = 47.2510905, Longitude = -123.1255834, Name = "Washington", Area = 2996 },
+        new City { Latitude = 25.7823907, Longitude = -80.2994995, Name = "Miami", Area = 2891 },
+        new City { Latitude = 19.3892246, Longitude = -70.1305136, Name = "San Juan", Area = 2309 }
     };
 }
+
 ```
 
 ![Blazr Maps Marker with Clustering](./images/Marker/blazor-maps-marker-clustering.png)
 
 ### Customization of marker cluster
 
-The following properties and classes are available to customize the marker clustering in the Maps component.
+The following properties and classes are available to customize marker clustering in the Maps component.
 
-* [MapsLayerMarkerClusterBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterBorder.html) - To customize the color and width of the border of cluster in Maps.
-* [MapsLayerMarkerClusterConnectorLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterConnectorLineSettings.html) - To customize the connector line in cluster separating the markers.
-* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_DashArray) - To customize the dash array for the marker cluster in Maps.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Fill) - Applies the color of the cluster in Maps.
-* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Height) - To customize the height of the marker cluster in Maps.
-* [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_ImageUrl) - To customize the URL path for the marker cluster when the cluster shape is set as image in Maps.
-* [MapsLayerMarkerClusterLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterLabelStyle.html) - To customize the text in marker cluster.
-* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Offset) - To customize the offset position for the marker cluster in Maps.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Opacity) - To customize the opacity of the marker cluster.
-* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Shape) - To customize the shape for the cluster of markers.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Width) - To customize the width of the marker cluster in Maps.
+* [MapsLayerMarkerClusterBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterBorder.html) - Customizes the border color and width of clusters.
+* [MapsLayerMarkerClusterConnectorLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterConnectorLineSettings.html) - Customizes connector lines separating markers in an expanded cluster.
+* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_DashArray) - Sets the dash array for cluster outlines.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Fill) - Applies the cluster fill color.
+* [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Height) - Sets cluster height.
+* [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_ImageUrl) - Sets the image URL when the cluster shape is an image.
+* [MapsLayerMarkerClusterLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerMarkerClusterLabelStyle.html) - Customizes cluster text.
+* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Offset) - Adjusts the cluster offset.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Opacity) - Controls cluster opacity.
+* [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Shape) - Sets the cluster shape.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_Width) - Sets cluster width.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -632,7 +688,8 @@ The following properties and classes are available to customize the marker clust
         public double Longitude { get; set; }
         public string Name { get; set; }
         public double Area { get; set; }
-    };
+    }
+
     private List<City> LargestCities = new List<City> {
         new City { Latitude=40.6971494, Longitude= -74.2598747, Name="New York", Area=8683 },
         new City { Latitude=40.0024137, Longitude= -75.2581194, Name="Philadelphia", Area=4661 },
@@ -643,15 +700,17 @@ The following properties and classes are available to customize the marker clust
         new City { Latitude=19.3892246, Longitude= -70.1305136, Name="San Juan", Area=2309 }
     };
 }
+
 ```
 
 ![Blazor Maps Marker with Custom Cluster](./images/Marker/blazor-maps-custom-cluster.png)
 
 ### Expanding the marker cluster
 
-The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) as **true** to expand the identical markers. If zooming is performed in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again.
+Clusters group identical and non-identical markers in nearby locations. Enable expansion by setting [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property to **true** in [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html). Zooming in reduces cluster counts and reveals individual markers; zooming out increases counts and re-forms clusters.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -667,34 +726,37 @@ The cluster is formed by grouping an identical and non-identical marker from the
     </MapsLayers>
     <MapsZoomSettings Enable='true' MouseWheelZoom="true"></MapsZoomSettings>
 </SfMaps>
+
 @code {
     public class MapMarkerDataSource
     {
         public double latitude { get; set; }
         public double longitude { get; set; }
         public string name { get; set; }
-    };
+    }
+
     public List<MapMarkerDataSource> MarkerDataSource = new List<MapMarkerDataSource> {
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
-        new MapMarkerDataSource{ latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
-        new MapMarkerDataSource{ latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 49.95121990866204, longitude = 18.468749999999998, name = "Europe" },
+        new MapMarkerDataSource { latitude = 59.88893689676585, longitude = -109.3359375, name = "North America" },
+        new MapMarkerDataSource { latitude = -6.64607562172573, longitude = -55.54687499999999, name = "South America" }
     };
 }
+
 ```
 
 ![Expanding Marker Cluster in Blazor Maps](./images/Marker/blazor-maps-marker-expand-cluster.PNG)
 
 ### Clustering markers within each marker group
 
-Marker clustering can be enabled for each marker group in the map by using the [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) tag within the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) of the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) tag. This allows for individual customization of clusters for each marker group which group markers that are located near each other to reduce clutter and improve readability. When the [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property is set to **true**, the markers within each group are clustered and visually represented as separate clusters. As users zoom in, the clusters expand to reveal individual markers, enabling more detailed exploration. Clusters can also be expanded manually by setting the [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property to **true**. The appearance of the clusters and their expansion behavior can be customized using the `MapsMarkerClusterSettings` property, similar to the `MapsMarkerClusterSettings` property, as explained in the sections above.
+Clustering can be enabled per marker group by placing [MapsMarkerClusterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html) inside each [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) within a [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). This enables individual customization of clusters for each group, reducing clutter and improving readability. When [AllowClustering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClustering) property is **true**, markers in that group are clustered and can expand on zoom. Manual expansion can be enabled using [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerClusterSettings.html#Syncfusion_Blazor_Maps_MapsMarkerClusterSettings_AllowClusterExpand) property. Appearance and behavior can be customized using the same `MapsMarkerClusterSettings` options described above.
 
-N> When the `MapsMarkerClusterSettings` tag is enabled for a specific marker group, the `MapsMarkerClusterSettings` tag within the layers becomes ineffective.
+N> When `MapsMarkerClusterSettings` is enabled for a specific marker group, the `MapsMarkerClusterSettings` defined within the layer does not take effect.
 
 **Detailed Use Case scenario:**
 
@@ -708,52 +770,54 @@ If [AllowClusterExpand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 Each marker group (France/India/USA) can have its own `MapsMarkerClusterSettings`—different cluster icons, colors, sizes, and label styles—so clusters are visually distinct by group.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
-        <MapsZoomSettings Enable="true">
-            <MapsZoomToolbarSettings>
-                <MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,
-                                   ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
-            </MapsZoomToolbarSettings>
-        </MapsZoomSettings>
-        <MapsTitleSettings Text="Attractive places around the world">
-            <MapsTitleTextStyle Size="16px"/>
-        </MapsTitleSettings>
-        <MapsLayers>
-            <MapsLayer  ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json" }' TValue="string">
-                <MapsMarkerSettings>
-                    <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataFrance" Shape="MarkerType.Circle" Fill="#b38600" Height="15" Width="15">
-                        <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
-                        <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-france.svg" Height="40" Width="40">
-                            <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
-                        </MapsMarkerClusterSettings>
-                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
-                            <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
-                        </MapsMarkerTooltipSettings>
-                    </MapsMarker>
-                    <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataUSA" Shape="MarkerType.Circle" Fill="#bf4040" Height="15" Width="15">
-                        <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
-                        <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-usa.svg" Height="40" Width="40">
-                            <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
-                        </MapsMarkerClusterSettings>
-                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
-                            <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
-                        </MapsMarkerTooltipSettings>
-                    </MapsMarker>
-                    <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataIndia" Shape="MarkerType.Circle" Fill="#00b3b3" Height="15" Width="15">
-                        <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
-                        <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-india.svg" Height="40" Width="40">
-                            <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
-                        </MapsMarkerClusterSettings>
-                        <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
-                            <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
-                        </MapsMarkerTooltipSettings>
-                    </MapsMarker>
-                </MapsMarkerSettings>
-            </MapsLayer>
-        </MapsLayers>
-    </SfMaps>
+    <MapsZoomSettings Enable="true">
+        <MapsZoomToolbarSettings>
+            <MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem>() { ToolbarItem.Zoom,
+                                ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
+        </MapsZoomToolbarSettings>
+    </MapsZoomSettings>
+    <MapsTitleSettings Text="Attractive places around the world">
+        <MapsTitleTextStyle Size="16px"/>
+    </MapsTitleSettings>
+    <MapsLayers>
+        <MapsLayer  ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json" }' TValue="string">
+            <MapsMarkerSettings>
+                <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataFrance" Shape="MarkerType.Circle" Fill="#b38600" Height="15" Width="15">
+                    <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
+                    <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-france.svg" Height="40" Width="40">
+                        <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
+                    </MapsMarkerClusterSettings>
+                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
+                        <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
+                    </MapsMarkerTooltipSettings>
+                </MapsMarker>
+                <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataUSA" Shape="MarkerType.Circle" Fill="#bf4040" Height="15" Width="15">
+                    <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
+                    <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-usa.svg" Height="40" Width="40">
+                        <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
+                    </MapsMarkerClusterSettings>
+                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
+                        <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
+                    </MapsMarkerTooltipSettings>
+                </MapsMarker>
+                <MapsMarker Visible="true" TValue="City" DataSource="@MarkerDataIndia" Shape="MarkerType.Circle" Fill="#00b3b3" Height="15" Width="15">
+                    <MapsMarkerBorder Color="#e6f2ff" Width="2"></MapsMarkerBorder>
+                    <MapsMarkerClusterSettings AllowClustering="true" AllowClusterExpand="true" Shape="MarkerType.Image" ImageUrl="https://blazor.syncfusion.com/demos/_content/Blazor_Server_Common_NET9/images/maps/cluster-india.svg" Height="40" Width="40">
+                        <MapsLayerMarkerClusterLabelStyle Color="White" Size="10px"></MapsLayerMarkerClusterLabelStyle>
+                    </MapsMarkerClusterSettings>
+                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>Name:<b> ${Name} <br/> <b>State:<b> ${State} <br/> <b>Country:<b> ${Country}">
+                        <MapsMarkerTooltipTextStyle FontFamily="inherit"></MapsMarkerTooltipTextStyle>
+                    </MapsMarkerTooltipSettings>
+                </MapsMarker>
+            </MapsMarkerSettings>
+        </MapsLayer>
+    </MapsLayers>
+</SfMaps>
+
 @code {
     public class City
     {
@@ -763,36 +827,41 @@ Each marker group (France/India/USA) can have its own `MapsMarkerClusterSettings
         public string State { get; set; }
         public string Country { get; set; }
     }
+
     private List<City> MarkerDataFrance = new List<City> {
-          new City { Latitude= 48.8584, Longitude= 2.2945, Name= "Eiffel Tower", State= "Paris", Country= "France" },
-          new City { Latitude= 48.8606, Longitude= 2.3376, Name= "Louvre Museum", State= "Paris", Country= "France" },
-          new City { Latitude= 48.8529, Longitude= 2.3500, Name= "Notre-Dame Cathedral", State= "Paris", Country= "France" },
-          new City { Latitude= 48.6360, Longitude= 1.5115, Name= "Mont Saint-Michel", State= "Normandy", Country= "France" }
+        new City { Latitude = 48.8584, Longitude = 2.2945, Name = "Eiffel Tower", State = "Paris", Country = "France" },
+        new City { Latitude = 48.8606, Longitude = 2.3376, Name = "Louvre Museum", State = "Paris", Country = "France" },
+        new City { Latitude = 48.8529, Longitude = 2.3500, Name = "Notre-Dame Cathedral", State = "Paris", Country = "France" },
+        new City { Latitude = 48.6360, Longitude = 1.5115, Name = "Mont Saint-Michel", State = "Normandy", Country = "France" }
     };
+
     private List<City> MarkerDataUSA = new List<City> {
-          new City { Latitude= 35.019028, Longitude= -85.339439,  Name= "Ruby Falls", State= "Tennessee", Country= "United States of America" },
-          new City { Latitude= 35.654613, Longitude= -105.996979, Name= "Meow Wolf Santa Fe", State= "New Mexico", Country= "United States of America" },
-          new City { Latitude= 36.107216, Longitude= -115.175804, Name= "City Center of Las Vegas", State= "Nevada", Country= "United States of America" },
-          new City { Latitude= 36.879047, Longitude= -111.510498, Name= "Horseshoe Bend", State= "Arizona", Country= "United States of America" },
-          new City { Latitude= 36.011955, Longitude= -113.810951, Name= "Grand Canyon West Skywalk", State= "Arizona", Country= "United States of America" }
+        new City { Latitude = 35.019028, Longitude = -85.339439, Name = "Ruby Falls", State = "Tennessee", Country = "United States of America" },
+        new City { Latitude = 35.654613, Longitude = -105.996979, Name = "Meow Wolf Santa Fe", State = "New Mexico", Country = "United States of America" },
+        new City { Latitude = 36.107216, Longitude = -115.175804, Name = "City Center of Las Vegas", State = "Nevada", Country = "United States of America" },
+        new City { Latitude = 36.879047, Longitude = -111.510498, Name = "Horseshoe Bend", State = "Arizona", Country = "United States of America" },
+        new City { Latitude = 36.011955, Longitude = -113.810951, Name = "Grand Canyon West Skywalk", State = "Arizona", Country = "United States of America" }
     };
+
     private List<City> MarkerDataIndia = new List<City> {
-          new City { Latitude= 26.985901, Longitude= 75.850700, Name= "Amber Fort, Amer", State= "Rajastan", Country= "India" },
-          new City { Latitude= 22.957390, Longitude= 77.625275, Name= "Bhimbetka, Raisen District", State= "Madhya Pradesh", Country= "India" },
-          new City { Latitude= 26.809330, Longitude= 75.540527, Name= "Bagru Fort, Bagru", State= "Rajasthan", Country= "India" },
-          new City { Latitude= 25.489504, Longitude= 80.330116, Name= "Kalinjar Fort, Banda", State= "Uttar Pradesh", Country= "India" },
-          new City { Latitude= 27.988890, Longitude= 76.388336, Name= "Neemrana", State= "Rajasthan", Country= "India" }
+        new City { Latitude = 26.985901, Longitude = 75.850700, Name = "Amber Fort, Amer", State = "Rajastan", Country = "India" },
+        new City { Latitude = 22.957390, Longitude = 77.625275, Name = "Bhimbetka, Raisen District", State = "Madhya Pradesh", Country = "India" },
+        new City { Latitude = 26.809330, Longitude = 75.540527, Name = "Bagru Fort, Bagru", State = "Rajasthan", Country = "India" },
+        new City { Latitude = 25.489504, Longitude = 80.330116, Name = "Kalinjar Fort, Banda", State = "Uttar Pradesh", Country = "India" },
+        new City { Latitude = 27.988890, Longitude = 76.388336, Name = "Neemrana", State = "Rajasthan", Country = "India" }
     };
 }
+
 ```
 
 ![Clustering Marker Within Each Marker Group in Blazor Maps](./images/Marker/blazor-maps-marker-cluster-for-specific-markergroup.PNG)
 
 ## Tooltip for marker
 
-Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) to **true**. The [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property in the [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) takes the field name that presents in data source and displays that value as tooltip text.
+A tooltip displays additional information about a marker on mouseover or touch end. Enable it by setting [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property to **true** in [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). Set [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_ValuePath) property to the field name in the data source to display as tooltip text.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -815,11 +884,13 @@ Tooltip is used to display more information about a marker on mouse over or touc
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     public List<City> HighestPopulation = new List<City> {
         new City { Latitude = 40.7424509, Longitude = -74.0081468, Name = "New York" }
     };
 }
+
 ```
 
 ![Blazor Maps with Marker Tooltip](./images/blazor-maps-marker-tooltip.png)
diff --git a/blazor/maps/navigation-line.md b/blazor/maps/navigation-line.md
index 0d609bbbbb..854dfccd13 100644
--- a/blazor/maps/navigation-line.md
+++ b/blazor/maps/navigation-line.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Navigation Lines in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about navigation lines in Syncfusion Blazor Maps component and much more.
+description: Check out and learn how to configure and customize navigation lines in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,22 +9,23 @@ documentation: ug
 
 # Navigation Lines in Blazor Maps Component
 
-The navigation lines are used to denote the path between two locations. This feature can be used to draw flight or sea routes. Navigation lines are enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Visible) property of the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to **true**.
+Navigation lines denote the path between two locations and can represent flight or sea routes. Enable navigation lines by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Visible) property of [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to **true**.
 
 ## Customization
 
-The following properties and classes are available in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to customize the navigation line of the Maps component.
+The following properties and classes in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) customize navigation lines in Maps:
 
-* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color) - To apply the color for navigation lines in Maps.
-* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray) - To define the pattern of dashes and gaps that is applied to the outline of the navigation lines.
-* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width) - To customize the width of the navigation lines.
-* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Angle) - To customize the angle of the navigation lines.
-* [MapsNavigationLineHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineHighlightSettings.html) - To customize the highlight settings of the navigation line.
-* [MapsNavigationLineSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineSelectionSettings.html) - To customize the selection settings of the navigation line.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Color) – Applies the line color.
+* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_DashArray) – Defines dash and gap patterns for the line stroke.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Width) – Sets the line width.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Angle) – Adjusts the curvature angle of the line.
+* [MapsNavigationLineHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineHighlightSettings.html) – Configures highlight settings.
+* [MapsNavigationLineSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLineSelectionSettings.html) – Configures selection settings.
 
-To navigate the line between two cities on the world map, [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Longitude) values are used to indicate the start and end points of navigation lines drawn on Maps.
+To draw a line between two cities on the world map, use [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Longitude) values to specify start and end points.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -38,20 +39,22 @@ To navigate the line between two cities on the world map, [Latitude](https://hel
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Navigation Lines](./images/NavigationLine/blazor-maps-navigation-line.png)
 
 ## Enabling the arrows
 
-To enable the arrow in the navigation line, set the [ShowArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_ShowArrow) property of [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to **true**. The following properties are available in [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to customize the arrow of the navigation lines.
+Enable an arrow on the navigation line by setting the [ShowArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_ShowArrow) property of [MapsArrow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html) to true. Customize arrow appearance with the following properties:
 
-* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Color) - To apply the color for arrow of the navigation line.
-* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_OffSet) - To customize the offset position of the arrow of the navigation line.
-* [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Position) - To customize the position of the arrow in navigation line. The possible values can be [**Start**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) and [**End**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_End).
-* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Size) - To customize the size of the arrow in pixels.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Color) – Applies the arrow color.
+* [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_OffSet) – Sets the arrow offset along the line.
+* [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) – Positions the arrow on the line. Possible values: [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.ArrowPosition.html#Syncfusion_Blazor_Maps_ArrowPosition_End).
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsArrow.html#Syncfusion_Blazor_Maps_MapsArrow_Size) – Sets the arrow size in pixels.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -67,6 +70,7 @@ To enable the arrow in the navigation line, set the [ShowArrow](https://help.syn
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
-![Blazor Maps with Navigation Line Arrow](./images/NavigationLine/blazor-maps-navigation-line-arrow.PNG)
\ No newline at end of file
+![Blazor Maps with Navigation Line Arrow](./images/NavigationLine/blazor-maps-navigation-line-arrow.PNG)
diff --git a/blazor/maps/polygon.md b/blazor/maps/polygon.md
index 1f65684da1..de5daf91fb 100644
--- a/blazor/maps/polygon.md
+++ b/blazor/maps/polygon.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Polygon shape in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about polygon shape in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to add, configure and customize polygon shape in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,25 +9,26 @@ documentation: ug
 
 # Polygon shape in Blazor Maps Component
 
-The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. This section describes how to add polygon shape to the map and customize them.
+The Maps component supports adding polygon shapes to a geometry map or an online map using the properties of the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. This section explains how to add polygon shapes to the map and customize them.
 
 ## Adding polygon shape
 
-The polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag in the Maps component. The `Points` property uses a collection of latitude and longitude values to define the polygon shape.
+A polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag in the Maps component. The `Points` property uses a collection of latitude and longitude values to define the polygon shape.
 
-The `MapsPolygon` tag provides the following properties for customizing the polygon shape of the Maps component.
+The `MapsPolygon` tag provides the following properties for customizing polygon shapes in the Maps component.
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape.
-* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape.
-* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape.
-* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderOpacity) - It is used to change the opacity of the border in the polygon shape.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Fill) - Changes the color of the polygon shape.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Opacity) - Changes the opacity of the polygon shape.
+* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderColor) - Changes the color of the polygon border.
+* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderWidth) - Changes the width of the polygon border.
+* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_BorderOpacity) - Changes the opacity of the polygon border.
 
-> You can also include **"n"** polygon shapes inside the [MapsPolygons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygons.html) tag.
+> Multiple polygon shapes can be included inside the [MapsPolygons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygons.html) tag.
 
-The following example shows how to customize the polygon shape over the geometry map.
+The following example shows how to customize a polygon shape on a geometry map.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -42,6 +43,7 @@ The following example shows how to customize the polygon shape over the geometry
 
 @code {
     List<Coordinate> Points = new List<Coordinate>();
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
@@ -92,30 +94,31 @@ The following example shows how to customize the polygon shape over the geometry
         Points.Add(new Coordinate() { Longitude = 34.88539587371454, Latitude = 28.181421087099537 });
     }
 }
+
 ```
 ![Blazor Maps with polygon shape](./images/Polygon/blazor-map-polygon-shape-on-maps-layer.png)
 
 ## Tooltip
 
-Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Visible) property to **true** in the [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html). Additionally, you need to set the desired content as a value to the [TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipText) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag to show the tooltip. If you add 'n' numbers of polygon shapes, you can add the `TooltipText` property to each polygon, which will display the tooltip for the associated polygon shape.
+A tooltip displays additional information about a polygon shape during mouse or touch interaction. Enable the tooltip or tooltip template by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Visible) property to `true` in [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html). Additionally, set the desired content to the [TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipText) property in the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag to show the tooltip. When multiple polygon shapes are added, the `TooltipText` property can be set for each polygon to display the corresponding tooltip.
 
 ### Tooltip customization
 
-The following properties are available in the [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html) to customize the appearance of the tooltip.
-
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Fill) - Applies the color of the tooltip in the polygon shape.
-* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderColor) - To change the color of the border of the tooltip in the polygon shape.
-* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderWidth) - To change the width of the border of the tooltip in the polygon shape.
-* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderOpacity) - To change the opacity of the border of the tooltip in the polygon shape.
-* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontFamily) - To change the font family of the text in the tooltip of the polygon shape.
-* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontWeight) - To change the font weight of the text in the tooltip of the polygon shape.
-* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontStyle) - To change the font style of the text in the tooltip of the polygon shape.
-* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontColor) - To change the font color of the text in the tooltip of the polygon shape.
-* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontSize) - To change the font size of the text in the tooltip of the polygon shape.
-* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontOpacity) - To change the opacity of the text in the tooltip of the polygon shape.
+The following properties in [MapsPolygonTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html) customize the appearance of the tooltip.
 
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_Fill) - Applies the tooltip background color.
+* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderColor) - Changes the tooltip border color.
+* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderWidth) - Changes the tooltip border width.
+* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_BorderOpacity) - Changes the tooltip border opacity.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontFamily) - Changes the tooltip text font family.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontWeight) - Changes the tooltip text weight.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontStyle) - Changes the tooltip text style.
+* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontColor) - Changes the tooltip text color.
+* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontSize) - Changes the tooltip text size.
+* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonTooltipSettings.html#Syncfusion_Blazor_Maps_MapsPolygonTooltipSettings_FontOpacity) - Changes the tooltip text opacity.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -133,6 +136,7 @@ The following properties are available in the [MapsPolygonTooltipSettings](https
 
 @code {
     List<Coordinate> Points = new List<Coordinate>();
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
@@ -190,9 +194,10 @@ The following properties are available in the [MapsPolygonTooltipSettings](https
 
 ### Tooltip template
 
-Any HTML element can be rendered in the tooltip of the polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipTemplate) property of the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html). If you add 'n' numbers of polygon shapes, you can add the `TooltipTemplate` property to each polygon, which will display the tooltip for the associated polygon shape.
+Any HTML element can be rendered in the tooltip of polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_TooltipTemplate) property of [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html). When multiple polygon shapes are added, the `TooltipTemplate` property can be set for each polygon to display the corresponding tooltip.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -268,11 +273,12 @@ Any HTML element can be rendered in the tooltip of the polygon shapes using the
 
 ## Changing a Polygon Shape to a Line
 
-The rendered polygon shape can be changed to a line shape by setting the [ShapeType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_ShapeType) property to [LineString](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PolygonShapeType.html#Syncfusion_Blazor_Maps_PolygonShapeType_LineString).
+A rendered polygon shape can be changed to a line shape by setting the [ShapeType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_ShapeType) property to [LineString](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.PolygonShapeType.html#Syncfusion_Blazor_Maps_PolygonShapeType_LineString).
 
-The following example demonstrates how to customize a line shape on an online map, display a tooltip for the line shape, highlight the line shape, and select the line shape on the map. In this example, latitude and longitude values are extracted from coordinates in a JSON file and assigned to the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property within the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag.
+The following example demonstrates how to customize a line shape on an online map, display a tooltip for the line shape, highlight it, and select it on the map. In this example, latitude and longitude values are extracted from coordinates in a JSON file and assigned to the [Points](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html#Syncfusion_Blazor_Maps_MapsPolygon_Points) property within the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 @inject NavigationManager NavigationManager
 @inject HttpClient Http;
@@ -305,11 +311,11 @@ The following example demonstrates how to customize a line shape on an online ma
             </MapsLayer>
         </MapsLayers>
     </SfMaps>
-
 }
 
 @code {
     public List<Coordinate> Coordinates = new List<Coordinate>();
+
     protected override async Task OnInitializedAsync()
     {
         string path = NavigationManager.BaseUri + "line.json";
@@ -342,7 +348,8 @@ The following example demonstrates how to customize a line shape on an online ma
         public List<List<double>> Coordinates { get; set; }
     }
 }
+
 ```
-> Note: Refer the content of the JSON file [line.json](https://www.syncfusion.com/downloads/support/directtrac/general/ze/line140125043) here.
+> Note: Refer to the content of the JSON file [line.json](https://www.syncfusion.com/downloads/support/directtrac/general/ze/line140125043).
 
 ![Blazor Maps with line shape](./images/Polygon/blazor-map-line-shape-on-tile-images.gif)
diff --git a/blazor/maps/populate-data.md b/blazor/maps/populate-data.md
index 0ce20c30d3..f9ac0d69dc 100644
--- a/blazor/maps/populate-data.md
+++ b/blazor/maps/populate-data.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Populate Data in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about populate data in Syncfusion Blazor Maps component and much more details.
+description: Learn how to provide shape data, bind statistical data and fetch JSON data to populate the Syncfusion Blazor Maps component, with examples.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Populate Data in Blazor Maps Component
 
-This section explains how to populate data inputs and provide it to the Maps component.
+This section explains how to supply data inputs and provide them to the Maps component.
 
 ## Geometry types
 
-GeoJSON data contains geometry objects with properties such as geometry types and coordinates. The geometry types are the values present in the geometry objects of the GeoJSON data that specify the type of shape to be rendered, as well as the coordinates that help to draw the shape's boundary line. The supportive geometry types are:
+GeoJSON data contains geometry objects with properties such as geometry types and coordinates. Geometry types specify the shape to render, and coordinates define the shape's boundary. The supported geometry types are:
 
 | **Shapes** | **Supported** |
 | --- | --- |
@@ -27,15 +27,16 @@ GeoJSON data contains geometry objects with properties such as geometry types an
 
 ## Shape data
 
-The shape data collection describes geographical shape information that is available in GeoJSON format. The Map shapes are rendered with this data. The custom shapes such as seat selection in bus, seat selection in a cricket stadium and more useful information can be also added as [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
+The shape data collection describes geographic shape information in GeoJSON format. Map shapes are rendered from this data. Custom shapes, such as seat selections in a bus or a cricket stadium, can also be added as [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html).
 
 ## Data source
 
-The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component, and it accepts a collection of values as input. For example, a list of objects as input can be provided to the data source. This data source will be used to color the map, display data labels, and display tooltip, among other things.
+The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property represents statistical data for the Maps component and accepts a collection of values. For example, a list of objects can be provided. This data source is used to color shapes, display data labels, show tooltips, and more.
 
-The data source is populated with list of objects relative to shape data. In the following example, **PopulationDetails** can be used as data source in Maps.
+The data source is populated with a list of objects related to the shape data. In the following example, **PopulationDetails** is used as the data source for Maps.
 
 ```cshtml
+
 @code{
     public class PopulationDetail
     {
@@ -69,20 +70,22 @@ The data source is populated with list of objects relative to shape data. In the
         }
     };
 }
+
 ```
 
 ## Data binding
 
-The following properties in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) are used for binding data in the Maps component. Both the properties are related to each other.
+The following properties in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) are used to bind data in the Maps component. These properties work together.
 
 * ShapePropertyPath
 * ShapeDataPath
 
 ### ShapePropertyPath
 
-The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property is used to refer the field name in the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property of shape layers to identify the shape. When the values of [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property from the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property and [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property from the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property match, then the associated object from the data source is bound to the corresponding shape.
+The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property refers to the field name in the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) of shape layers used to identify a shape. When the values of [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property from the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) and [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property from the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) match, the associated object from the data source is bound to the corresponding shape.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -92,11 +95,13 @@ The [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
-N>`world-map.json` file contains following data and its field **name** value is used to map the corresponding shape with the provided data source.
+N> The `world-map.json` file contains the following data, and the **name** field value is used to map the corresponding shape with the provided data source.
 
 ```json
+
 [
     {
         "type": "Feature",
@@ -109,13 +114,15 @@ N>`world-map.json` file contains following data and its field **name** value is
     },
 ...
 ]
+
 ```
 
 ### ShapeDataPath
 
-The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property is similar to the [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath) property, but it refers to the field name in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property. For example, following population data contains field **Name**, **Population** and **Density**. Here the **Name** field is set to the [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) to map the corresponding value of field name in shape data.
+The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property is similar to [ShapePropertyPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapePropertyPath), but it refers to the field name in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource). In the following population data, the fields are **Name**, **Population**, and **Density**. The **Name** field is set to [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeDataPath) property to map the corresponding value of the field name in shape data.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -134,6 +141,7 @@ The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
         public double Population { get; set; }
         public double Density { get; set; }
     };
+
     private List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
         new PopulationDetail {
             Name= "Afghanistan",
@@ -143,11 +151,13 @@ The [ShapeDataPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps
         ...
     };
 }
+
 ```
 
-In the above example, both **name** fields contain the same value as **Afghanistan**, this value is matched in both shape data and data source, so that the details associated with **Afghanistan** will be mapped to the corresponding shape and used to color the corresponding shape, display data labels, display tooltips, and more.
+In the above example, both **name** fields contain the value **Afghanistan**. This value is matched in both shape data and the data source, so the details associated with **Afghanistan** are mapped to the corresponding shape and used to color the shape, display data labels, and display tooltips.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -162,7 +172,7 @@ In the above example, both **name** fields contain the same value as **Afghanist
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationDetail
     {
         public string Code { get; set; }
@@ -171,6 +181,7 @@ In the above example, both **name** fields contain the same value as **Afghanist
         public double Population { get; set; }
         public double Density { get; set; }
     };
+
     private List<PopulationDetail> PopulationDetails = new List<PopulationDetail> {
         new PopulationDetail {
             Code = "AF",
@@ -195,19 +206,21 @@ In the above example, both **name** fields contain the same value as **Afghanist
         }
     };
 }
+
 ```
 
 ![Blazor Maps with Data Binding](./images/populatedata/blazor-map-data-binding.png)
 
 ## Fetching data from JSON file
 
-To retrieve data from a JSON file, you can create a Blazor WebAssembly App or a Blazor Server App. The data from the JSON file is then read, convert it to a C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property.
+To retrieve data from a JSON file, create a Blazor WebAssembly app or a Blazor Server app. Read the data from the JSON file, convert it to a C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property.
 
 ### Fetching data from JSON file using Blazor WebAssembly App
 
-The **Http.GetFromJsonAsync** is used in the **OnInitializedAsync** lifecycle method to load JSON file data. As this will be executed asynchronously, check whether **populationDensity** is available, render the Maps component, or display the loading statement.
+The **Http.GetFromJsonAsync** method is used in the **OnInitializedAsync** lifecycle method to load JSON data. Because this executes asynchronously, check whether **PopulationDensity** is available; then render the Maps component or display a loading message.
 
 ```cshtml
+
 @inject HttpClient Http;
 @using Syncfusion.Blazor.Maps
 @inject NavigationManager NavigationManager
@@ -229,8 +242,10 @@ else
         </MapsLayers>
     </SfMaps>
 }
-@code{
+
+@code {
     PopulationData[] PopulationDensity;
+
     protected override async Task OnInitializedAsync()
     {
         PopulationDensity = await Http.GetFromJsonAsync<PopulationData[]>(NavigationManager.Uri + "sample-data/PopulationDensity.json");
@@ -245,11 +260,13 @@ else
         public float Density { get; set; }
     }
 }
+
 ```
 
-Here, the `PopulationDensity.json` file contains following data.
+Here, the `PopulationDensity.json` file contains the following data.
 
 ```json
+
 [
     {
         "code": "AF",
@@ -273,16 +290,18 @@ Here, the `PopulationDensity.json` file contains following data.
         "density": 15
     }
 ]
+
 ```
 
 ![Blazor Maps with JSON Data Source using WASM App](./images/populatedata/blazor-map-data-binding.png)
 
 ### Fetching data from JSON file using  Blazor Server App
 
-The **Http.GetAsync** is used in the **OnInitializedAsync** lifecycle method to get the JSON file data and read the JSON file as a string. Then, the GeoJSON data in the string can be converted as a deserialized object list and set in the **DataSource** property of the Maps component. As this will be executed asynchronously, check whether **populationDensity** is available, render the Maps component, or display the loading statement.
+The **Http.GetAsync** method is used in the **OnInitializedAsync** lifecycle method to get the JSON file as a response and read it as a string. Then, the JSON data is deserialized to a list of objects and assigned to the **DataSource** property of the Maps component. Because this executes asynchronously, check whether **PopulationDensity** is available; then render the Maps component or display a loading message.
 
 
 ```cshtml
+
 @inject HttpClient Http;
 @using Syncfusion.Blazor.Maps
 @using System.Net.Http.Json
@@ -290,7 +309,6 @@ The **Http.GetAsync** is used in the **OnInitializedAsync** lifecycle method to
 @using Newtonsoft.Json;
 @inject NavigationManager NavigationManager
 
-
 @if (PopulationDensity == null)
 {
     <p><em>Loading Maps component...</em></p>
@@ -308,7 +326,8 @@ else
         </MapsLayers>
     </SfMaps>
 }
-@code{
+
+@code {
     public List<PopulationData> PopulationDensity;
     public string result;
 
@@ -330,6 +349,7 @@ else
         public float Density { get; set; }
     }
 }
+
 ```
 
-![Blazor Maps with JSON Data Source using Blazor Server App](./images/populatedata/blazor-map-data-binding.png)
\ No newline at end of file
+![Blazor Maps with JSON Data Source using Blazor Server App](./images/populatedata/blazor-map-data-binding.png)
diff --git a/blazor/maps/print-and-export.md b/blazor/maps/print-and-export.md
index 0ba1eff3a0..4f56d7b520 100644
--- a/blazor/maps/print-and-export.md
+++ b/blazor/maps/print-and-export.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Print and export in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about print and export in Syncfusion Blazor Maps component and much more.
+description: Check out and learn how to configure print and export feature in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -11,9 +11,10 @@ documentation: ug
 
 ## Print
 
-The rendered Maps can be printed directly from the browser by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_PrintAsync) method. To use the print functionality, set the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPrint) property to **true**.
+The rendered Maps component can be printed directly from the browser by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_PrintAsync) method. Enable printing by setting the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPrint) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="PrintMap">Print</button>
@@ -28,12 +29,14 @@ The rendered Maps can be printed directly from the browser by calling the [Print
 
 @code {
     SfMaps maps;
+
     public async Task PrintMap()
     {
         // using Maps component reference call 'Print' method
         await this.maps.PrintAsync();
     }
 }
+
 ```
 
 ![Printing in Blazor Maps](./images/Print/blazor-maps-printing.png)
@@ -42,13 +45,14 @@ The rendered Maps can be printed directly from the browser by calling the [Print
 
 ### Image Export
 
-To use the image export functionality, set the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowImageExport) property as **true**. The rendered Maps can be exported as an image using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The method requires two parameters: image type and file name. The Maps can be exported as an image in the following formats.
+Enable image export by setting the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowImageExport) property to **true**. Export the rendered Maps as an image using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The method accepts the image type and file name. Supported formats:
 
 * JPEG
 * PNG
 * SVG
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ExportMap">Export</button>
@@ -61,20 +65,23 @@ To use the image export functionality, set the [AllowImageExport](https://help.s
 
 @code {
     SfMaps Maps;
+
     public async Task ExportMap()
     {
         await this.Maps.ExportAsync(ExportType.PNG, "Maps");
     }
 }
+
 ```
 
 ![Exporting in Blazor Maps](./images/Print/blazor-maps-exporting.png)
 
 ### PDF Export
 
-To use the PDF export functionality, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPdfExport) property as **true**. The rendered Maps can be exported as PDF using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method requires three parameters: file type, file name and orientation of the PDF document. The orientation of the PDF document can be set as **0** or **1**. **0** indicates the **portrait** and **1** indicates **landscape**.
+Enable PDF export by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_AllowPdfExport) property to **true**. Export the rendered Maps to PDF using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. This method requires the file type, file name, and the PDF orientation. The orientation value can be set as **0** (portrait) or **1** (landscape).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ExportMap">Export</button>
@@ -87,20 +94,23 @@ To use the PDF export functionality, set the [AllowPdfExport](https://help.syncf
 
 @code {
     SfMaps Maps;
+
     public async Task ExportMap()
     {
         await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0);
     }
 }
+
 ```
 
 ![Blazor Maps with PDF Export](./images/Print/blazor-maps-exporting.png)
 
 ### Exporting Maps as base64 string of the file
 
-The image can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Maps can be exported to image as base64 string using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. The arguments that are required for this method is image type, file name, orientation of the exported PDF document which must be set as **null** for image export and **0** or **1** for the PDF export and finally **allowDownload** which should be set as **false** to return base64 string.
+An image or PDF can be exported as a base64 string for JPEG, PNG, and PDF formats. Export the rendered Maps to a base64 string using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. Provide the image type, file name, orientation (set **null** for image export and **0** or **1** for PDF), and set **allowDownload** to **false** to return a base64 string.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="export">Export</button>
@@ -114,12 +124,14 @@ The image can be exported as base64 string for the JPEG, PNG and PDF formats. Th
 @code {
     SfMaps Maps;
     string exportString;
+
     public async Task export()
     {
         exportString = await this.Maps.ExportAsync(ExportType.PDF, "Maps", 0, false);
         Console.WriteLine(exportString);
     }
 }
+
 ```
 
 N>Add the below service in Program.cs file if the size of the Maps is too large.
@@ -127,13 +139,14 @@ builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMess
 
 ### Export the tile Maps
 
-The rendered Maps with providers such as OSM, Bing and other map providers can be exported using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. It supports the following export formats.
+Maps using tile providers such as OSM, Bing, and other providers can be exported using the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ExportAsync_Syncfusion_Blazor_Maps_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method. Supported export formats:
 
 * JPEG
 * PNG
 * PDF
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <button @onclick="ExportMap">Export</button>
@@ -146,11 +159,13 @@ The rendered Maps with providers such as OSM, Bing and other map providers can b
 
 @code {
     SfMaps Maps;
+
     public async Task ExportMap()
     {
         await this.Maps.ExportAsync(ExportType.PNG, "OSM Map");
     }
 }
+
 ```
 
-![Blazor Maps with OSM Export](./images/Print/blazor-maps-osm-export.png)
\ No newline at end of file
+![Blazor Maps with OSM Export](./images/Print/blazor-maps-osm-export.png)
diff --git a/blazor/maps/providers/azure-maps.md b/blazor/maps/providers/azure-maps.md
index 30153ddb4a..5cd67046fd 100644
--- a/blazor/maps/providers/azure-maps.md
+++ b/blazor/maps/providers/azure-maps.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Azure Maps in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about Azure Maps in the Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to use Azure Maps in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,15 +9,16 @@ documentation: ug
 
 # Azure Maps in Blazor Maps Component
 
-Azure Maps is yet another online Maps provider, owned by Microsoft. As like OSM and Bing Maps, it provides Maps tile images based on our requests and combines those images into a single one to display Maps area.
+Azure Maps is an online map tile provider from Microsoft. Similar to OSM and Bing Maps, it serves map tile images on request and composites them to display the map area.
 
 ## Adding Azure Maps
 
-The Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by online map providers. In the meantime, a subscription key is required for Azure Maps. Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then added the key to the URL.
+Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by the online map provider. A subscription key is required for Azure Maps. Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then add the key to the URL.
 
 N>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/legal/).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -26,15 +27,17 @@ N>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/lega
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Azure Maps](../images/MapProviders/blazor-azure-map.png)
 
 ## Enable zooming and panning
 
-The Azure Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a map for in-depth analysis. Panning helps to move a map around to focus the targeted area.
+The Azure Maps layer supports zooming and panning. Zooming provides a closer view of a specific area for detailed analysis, and panning moves the map to focus on a targeted area.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -50,15 +53,17 @@ The Azure Maps layer can be zoomed and panned. Zooming helps to get a closer loo
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Azure Maps with zooming and panning](../images/MapProviders/blazor-azure-map-zooming.png)
 
 ## Adding markers and navigation line
 
-Markers can be added to the layers of Azure Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of the Azure Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
+Markers can be added to Azure Maps layers by providing latitude and longitude coordinates in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be drawn over the Azure Maps layer to highlight paths between locations by providing latitude and longitude coordinates in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
 
 ```csharp
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -81,27 +86,30 @@ Markers can be added to the layers of Azure Maps by setting the corresponding lo
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
     }
+
     private List<City> Cities = new List<City> {
         new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
         new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
     };
 }
+
 ```
 
 ![Blazor Azure Maps with markers and navigation line](../images/MapProviders/blazor-azure-map-marker-and-line.png)
 
 ## Adding sublayer
 
-Any GeoJSON shape can be rendered as a sublayer on top of the Azure Maps layer for highlighting a particular continent or country in Azure maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
+Any GeoJSON shape can be rendered as a sublayer over the Azure Maps layer to highlight a continent or country. Add another layer and set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -115,15 +123,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the Azure Maps layer f
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Azure Maps with sublayer](../images/MapProviders/blazor-azure-map-sublayer.png)
 
 ## Enable legend
 
-The legend can be added to the Azure Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend can be added to Azure Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="N0" EnableGroupingSeparator="true">
@@ -151,7 +161,7 @@ The legend can be added to the Azure Maps by setting the [Visible](https://help.
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationCityDetails
     {        
         public string Name { get; set; }
@@ -160,20 +170,21 @@ The legend can be added to the Azure Maps by setting the [Visible](https://help.
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"},
-        new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"},
-        new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"},
-        new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"},
-        new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"},
-        new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"},
-        new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"},
-        new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"},
-        new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"},
-        new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"}
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" },
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" },
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" },
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" },
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" },
+        new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" },
+        new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" },
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" },
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" },
+        new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" }
     };
 }
 
 ```
 
-![Blazor Azure Maps with legend](../images/MapProviders/blazor-azure-map-legend.png)
\ No newline at end of file
+![Blazor Azure Maps with legend](../images/MapProviders/blazor-azure-map-legend.png)
diff --git a/blazor/maps/providers/bing-maps.md b/blazor/maps/providers/bing-maps.md
index 6f9504a488..8069b81a46 100644
--- a/blazor/maps/providers/bing-maps.md
+++ b/blazor/maps/providers/bing-maps.md
@@ -9,13 +9,14 @@ documentation: ug
 
 # Bing Maps in Blazor Maps Component
 
-Bing Maps is an online Maps provider, owned by Microsoft, for accessing the external geospatial imagery services for deep-zoom satellite view which is supported in the Blazor Maps component. This provides the ability to visualize satellite, aerial, and street Maps without using any external shape files. As like OSM, it provides Maps tile images based on the requests and combines those images into a single one to display Maps area.
+Bing Maps is an online map provider from Microsoft that offers external geospatial imagery services for deep-zoom satellite views supported by the Blazor Maps component. It enables visualization of satellite, aerial, and street maps without external shapefiles. Similar to OSM, it supplies map tile images based on requests and combines them to display the required map area.
 
 ## Adding Bing Maps
 
-The Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the URL generated from the `GetBingUrlTemplate` method in the Maps component. The format of the required URL of Bing Maps varies from other map providers. As a result, a built-in `GetBingUrlTemplate` method has been included that returns the URL in a generic format. In the meantime, a subscription key is required for Bing Maps. Follow the steps in this [link](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key) to generate an API key, then append it to the Bing Maps URL before passing it to the `GetBingUrlTemplate` method. The URL returned by this method must be passed to the `UrlTemplate` property.
+Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the URL generated from the `GetBingUrlTemplate` method in the Maps component. The required Bing Maps URL format differs from other providers; therefore, the built-in `GetBingUrlTemplate` method returns a URL in a generic format. A subscription key is required for Bing Maps. Follow the steps in the Bing Maps key creation page to generate an API key, then append it to the Bing Maps URL before passing it to the `GetBingUrlTemplate` method. The URL returned by this method must be assigned to the `UrlTemplate` property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -26,11 +27,13 @@ The Bing Maps can be rendered by setting the [UrlTemplate](https://help.syncfusi
 
 @code {
     public string UrlTemplate;
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key=");
     }
 }
+
 ```
 
 N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
@@ -39,18 +42,19 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing
 
 ## Types of Bing Maps
 
-Bing Maps provides different types of Maps and it can be viewed in the Maps component.
+Bing Maps provides multiple map types that can be displayed in the Maps component.
 
-* **Aerial** - Displays satellite images to highlight roads and major landmarks for easy identification.
-* **AerialWithLabelsOnDemand** - Displays aerial Maps with labels for the continent, country, ocean, etc.
-* **Road** - Displays the default Maps view of roads, buildings, and geography.
-* **CanvasDark** - Displays dark version of the road Maps.
-* **CanvasLight** - Displays light version of the road Maps.
-* **CanvasGray** - Displays grayscale version of the road Maps.
+* **Aerial** - Displays satellite imagery highlighting roads and major landmarks for easy identification.
+* **AerialWithLabelsOnDemand** - Displays aerial maps with labels for continents, countries, oceans, and more.
+* **Road** - Displays the default view of roads, buildings, and geography.
+* **CanvasDark** - Displays a dark-themed version of the road map.
+* **CanvasLight** - Displays a light-themed version of the road map.
+* **CanvasGray** - Displays a grayscale version of the road map.
 
-The above types can also be rendered in the Maps component by specifying their URL in the `UrlTemplate` property in the `MapsLayer` class. You can learn more about the available types and the URL for it by visiting the official websites of Bing Maps.
+These types can be rendered by specifying their URLs in the `UrlTemplate` property of the `MapsLayer` class. For available types and corresponding URLs, refer to the official Bing Maps documentation.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -61,11 +65,13 @@ The above types can also be rendered in the Maps component by specifying their U
 
 @code {
     public string UrlTemplate;
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/CanvasGray?output=json&uriScheme=https&key=");
     }
 }
+
 ```
 
 N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
@@ -74,9 +80,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing
 
 ## Enable zooming and panning
 
-Bing Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area.
+The Bing Maps layer supports zooming and panning. Zooming provides a closer view of a specific region for detailed analysis. Panning moves the map to focus on the target area.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -94,11 +101,13 @@ Bing Maps layer can be zoomed and panned. Zooming helps to get a closer look at
 
 @code {
     public string UrlTemplate;
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key=");
     }
 }
+
 ```
 
 N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
@@ -107,9 +116,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing
 
 ## Adding markers and navigation line
 
-Markers can be added to the layers of Bing Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of an Bing Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
+Markers can be added to Bing Maps layers by setting the location coordinates (latitude and longitude) using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be drawn on top of a Bing Maps layer to highlight a path between locations by setting the location coordinates in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -133,22 +143,27 @@ Markers can be added to the layers of Bing Maps by setting the corresponding loc
 </SfMaps>
 
 @code {
+    public string UrlTemplate;
+
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
     }
+
     private List<City> Cities = new List<City> {
         new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
         new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
     };
-    public string UrlTemplate;
+
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key=");
     }
 }
+
 ```
 
 N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
@@ -157,9 +172,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing
 
 ## Adding sublayer
 
-Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer for highlighting a particular continent or country in Bing Maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
+Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer to highlight a specific continent or country by adding another layer and setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -175,11 +191,13 @@ Any GeoJSON shape can be rendered as a sublayer on top of the Bing Maps layer fo
 
 @code {
     public string UrlTemplate;
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/CanvasGray?output=json&uriScheme=https&key=");
     }
 }
+
 ```
 
 N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing Maps key.
@@ -188,9 +206,10 @@ N> In the above URL passed to the `GetBingUrlTemplate` method, specify the Bing
 
 ## Enable legend
 
-The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend can be added to tile maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="N0" EnableGroupingSeparator="true">
@@ -218,7 +237,9 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
+    public string UrlTemplate;
+
     public class PopulationCityDetails
     {        
         public string Name { get; set; }
@@ -227,19 +248,20 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"},
-        new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"},
-        new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"},
-        new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"},
-        new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"},
-        new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"},
-        new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"},
-        new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"},
-        new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"},
-        new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"}
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" },
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" },
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" },
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" },
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" },
+        new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" },
+        new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" },
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" },
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" },
+        new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" }
     };
-    public string UrlTemplate;
+
     protected override async Task OnInitializedAsync()
     {
         UrlTemplate = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&key=");
@@ -248,4 +270,4 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
 
 ```
 
-![Blazor Bing Maps with Legend](../images/MapProviders/blazor-bing-map-legend.png)
\ No newline at end of file
+![Blazor Bing Maps with Legend](../images/MapProviders/blazor-bing-map-legend.png)
diff --git a/blazor/maps/providers/google-maps.md b/blazor/maps/providers/google-maps.md
index d3c2234edf..4a4dbe0683 100644
--- a/blazor/maps/providers/google-maps.md
+++ b/blazor/maps/providers/google-maps.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Google Maps in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about displaying Google Maps in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to display Google Maps tiles in the Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,32 +9,32 @@ documentation: ug
 
 # Google Maps in Blazor Maps component
 
-Google Maps is an online maps provider owned by Google. It provides map tile images based on user requests. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component combines these images into a single view to display the map. You can display Google Maps by specifying their tile service URL in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property.
+Google Maps is an online map provider owned by Google. It provides map tile images based on requests. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component composes these tiles into a single view to render the map. Google Maps tiles can be displayed by specifying the tile service URL in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property.
 
 ## Displaying Google Maps
 
-The Google Map tile service can be accessed using the following URL:
+The Google Maps tile service can be accessed using the following URL:
 https://tile.googleapis.com/v1/2dtiles/z/x/y?session=YOUR_SESSION_TOKEN&key=YOUR_API_KEY
 
-In the above URL template,
+In this URL template:
 
-* {z} - It represents the zoom level of the map. 
-* {x} - It represents the horizontal position of the tile.
-* {y} - It represents the vertical position of the tile. 
+* {z} - Represents the map zoom level.
+* {x} - Represents the horizontal tile index.
+* {y} - Represents the vertical tile index.
 
-These placeholders are replaced by **level**, **tileX**, and **tileY**, respectively, to retrieve the correct map tile.
+These placeholders map to **level**, **tileX**, and **tileY**, respectively, to fetch the correct map tile.
 
-N>You can refer this documentation [link](https://developers.google.com/maps/documentation/tile/roadmap) for the latest URL template for Google Maps.
+N> Refer to the Google documentation at https://developers.google.com/maps/documentation/tile/roadmap for the latest Google Maps URL template.
 
-Below are the outlined steps to integrate Google Maps tiles into the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component.
+Below are the steps to integrate Google Maps tiles into the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component.
 
-1. Generate an API key from the Google Cloud Platform.
-2. Generate a session token to retrieve Google Map tiles.
-3. Initialize the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component using the Google Maps tile service URL, including the generated session token and API key.
+1. Generate an API key from Google Cloud Platform.
+2. Generate a session token to retrieve Google Maps tiles.
+3. Initialize the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component using the Google Maps tile service URL, including the session token and API key.
 
-Here's a step-by-step explanation of how to integrate Google Maps tiles into the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component using the provided code:
+The following walkthrough explains how to integrate Google Maps tiles into the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component using the provided code.
 
-**STEP 1**: Generate an API key from the Google Cloud Platform by enabling the necessary APIs, such as the Google Maps Tile API and Google Maps API. This key is crucial for authentication and must be included in every API call. Follow the steps in [this link](https://developers.google.com/maps/documentation/tile/get-api-key) to generate an API key.
+**STEP 1**: Generate an API key from Google Cloud Platform by enabling the necessary APIs, such as the Google Maps Tile API and Google Maps API. This key is required for authentication and must be included in each API call. Follow the steps in https://developers.google.com/maps/documentation/tile/get-api-key to generate an API key.
 
 ```cshtml
 
@@ -57,7 +57,7 @@ protected override async Task OnInitializedAsync()
 
 ```
 
-**STEP 2**: The **FetchSessionToken** function generates a session token, which is needed to retrieve Google Map tiles, by sending a POST request to the **createSession** endpoint of the Google Maps Tile API.
+**STEP 2**: The **FetchSessionToken** method generates a session token for retrieving Google Maps tiles by sending a POST request to the **createSession** endpoint of the Google Maps Tile API.
 
 ```cshtml
 
@@ -123,7 +123,7 @@ private class ErrorDetails
 
 ```
 
-**STEP 3**: To initialize the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component, the **FetchSessionToken** function is invoked in the **OnInitializedAsync** method. After retrieving the session token, both the session token and the API key are appended to the `UrlTemplate` property of the Maps component. This ensures secure authentication and proper access to the map tiles, allowing the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component to display the map with the appropriate data.
+**STEP 3**: To initialize the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component, invoke **FetchSessionToken** in **OnInitializedAsync**. After retrieving the session token, append both the session token and the API key to the `UrlTemplate` property of the Maps component. This enables authenticated access to map tiles, allowing the Syncfusion<sup style="font-size:70%">&reg;</sup> Maps component to render the map with the required data.
 
 ```cshtml
 
@@ -136,7 +136,7 @@ private class ErrorDetails
 
 ```
 
-In the following example, the Google maps is displayed by setting the `UrlTemplate` property with its tile server URL.
+In the following example, Google Maps tiles are displayed by setting the `UrlTemplate` property with the tile server URL.
 
 ```cshtml
 
@@ -239,9 +239,10 @@ In the following example, the Google maps is displayed by setting the `UrlTempla
 
 ## Enable zooming and panning
 
-The Google Maps layer supports both zooming and panning. Zooming allows you to closely examine a particular area on the map for in-depth analysis, while panning enables you to navigate around the map to focus on the desired area. To enable zooming and panning, set the `Enable` property to **true** in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
+The Google Maps layer supports both zooming and panning. Zooming provides a closer view of a specific area for detailed analysis, while panning enables navigation across the map to focus on the desired area. To enable zooming and panning, set the `Enable` property to **true** in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -261,13 +262,14 @@ The Google Maps layer supports both zooming and panning. Zooming allows you to c
 
 ![Blazor Google Maps with Zooming and Panning](../images/MapProviders/Google-maps/blazor-google-maps-zooming.png)
 
-N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps).
+N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section.
 
 ## Adding markers and navigation line
 
-Markers can be added to the Google Maps layer by setting the latitude and longitude coordinates of the desired location using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Additionally, navigation lines can be added on top of the Google Maps layer to highlight paths between various places by specifying the corresponding latitude and longitude coordinates in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
+Markers can be added to the Google Maps layer by setting the latitude and longitude of the location using the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be overlaid on the Google Maps layer to highlight paths between locations by providing the corresponding latitude and longitude values in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -290,29 +292,32 @@ Markers can be added to the Google Maps layer by setting the latitude and longit
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
     }
+
     private List<City> Cities = new List<City> {
-        new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
-        new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
+        new City { Latitude = 34.060620, Longitude = -118.330491, Name = "California" },
+        new City{ Latitude = 40.724546, Longitude = -73.850344, Name = "New York"}
     };
 }
+
 ```
 
 ![Blazor Google Maps with Markers and Navigation Line](../images/MapProviders/Google-maps/blazor-google-maps-marker-and-line.png)
 
-N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps).
+N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section.
 
 ## Adding sublayer
 
-A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to highlight a specific continent or country. This is achieved by adding another layer using [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and setting its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property to **SubLayer**.
+A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to highlight a specific continent or country. This is done by adding another layer using [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) and setting its [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property to **SubLayer**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -326,19 +331,21 @@ A GeoJSON shape can be rendered as a sublayer on top of the Google Maps layer to
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Google Maps with Sublayer](../images/MapProviders/Google-maps/blazor-google-maps-sublayer.png)
 
-N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps).
+N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section.
 
 ## Enable legend
 
-The legend can be added to the Google Maps layer by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend can be added to the Google Maps layer by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
-In the example below, the legend is added to the markers on the Google Maps layer.
+In the following example, the legend is associated with markers on the Google Maps layer.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="N0" EnableGroupingSeparator="true">
@@ -366,7 +373,7 @@ In the example below, the legend is added to the markers on the Google Maps laye
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationCityDetails
     {        
         public string Name { get; set; }
@@ -375,17 +382,18 @@ In the example below, the legend is added to the markers on the Google Maps laye
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"},
-        new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"},
-        new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"},
-        new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"},
-        new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"},
-        new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"},
-        new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"},
-        new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"},
-        new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"},
-        new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"}
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" },
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" },
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" },
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" },
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" },
+        new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" },
+        new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" },
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" },
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" },
+        new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E" }
     };
 }
 
@@ -393,4 +401,4 @@ In the example below, the legend is added to the markers on the Google Maps laye
 
 ![Blazor Google Maps with Legend](../images/MapProviders/Google-maps/blazor-google-maps-legend.png)
 
-N>You can refer to the method for obtaining the session token as explained in the above section [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps).
\ No newline at end of file
+N> Refer to the session token retrieval method described in the [Displaying Google Maps](https://blazor.syncfusion.com/documentation/maps/providers/google-maps#displaying-google-maps) section.
diff --git a/blazor/maps/providers/openstreetmap.md b/blazor/maps/providers/openstreetmap.md
index 2b99cd273d..b5580fddc8 100644
--- a/blazor/maps/providers/openstreetmap.md
+++ b/blazor/maps/providers/openstreetmap.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: OpenStreetMap in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about OpenStreetMap in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about OpenStreetMap in Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # OpenStreetMap in Blazor Maps Component
 
-The OpenStreetMap (OSM) is the online Maps provider built by a community of developers. It is free to use under an open license. It allows to view geographical data in a collaborative way from anywhere on the earth. The OSM map provides small tile images based on the requests and combines those images into a single image to display the map area in the Maps component.
+OpenStreetMap (OSM) is a collaborative map provider that offers free, openly licensed map tiles. It serves small tile images based on requests and combines them to render the visible map area in the Maps component.
 
 ## Adding OpenStreetMap
 
-The OSM Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the OSM tile server URL. For more details about the OSM tile server, refer [here](https://wiki.openstreetmap.org/wiki/Tiles).
+Render OSM tiles by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property to the OSM tile server URL. For details about OSM tile servers, see the OpenStreetMap tiles documentation.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -23,15 +24,17 @@ The OSM Maps can be rendered by setting the [UrlTemplate](https://help.syncfusio
         <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor OpenStreetMap](../images/MapProviders/blazor-open-sreet-map.png)
 
 ## Enable zooming and panning
 
-The OSM Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area.
+The OSM layer supports zooming and panning. Zooming provides a closer view of specific regions for detailed analysis, and panning moves the map to focus on a target area.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -46,15 +49,17 @@ The OSM Maps layer can be zoomed and panned. Zooming helps to get a closer look
         <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor OpenStreetMap with zooming](../images/MapProviders/blazor-open-street-map-zooming.png)
 
 ## Adding markers and navigation line
 
-Markers can be added to the layers of OSM Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). Navigation lines can be added on top of an OSM Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
+Markers can be added to OSM layers by providing latitude and longitude for each location using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html). A navigation line can be drawn to highlight a path between locations by supplying coordinate arrays in [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -77,27 +82,30 @@ Markers can be added to the layers of OSM Maps by setting the corresponding loca
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
     }
+
     private List<City> Cities = new List<City> {
-        new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
-        new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
+        new City { Latitude = 34.060620, Longitude = -118.330491,  Name = "California" },
+        new City{ Latitude = 40.724546, Longitude = -73.850344,  Name = "New York"}
     };
 }
+
 ```
 
 ![Blazor OpenStreetMap with Markers and Navigation Line](../images/MapProviders/blazor-open-street-map-marker-and-line.png)
 
 ## Adding sublayer
 
-Any GeoJSON shape can be rendered as a sublayer on top of the OSM Maps layer for highlighting a particular continent or country in the OSM map by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
+Any GeoJSON shape can be rendered as a sublayer on top of the OSM layer to emphasize a specific continent or country. Add another layer and set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -111,15 +119,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the OSM Maps layer for
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor OpenStreetMap with SubLayer](../images/MapProviders/blazor-open-street-map-sublayer.png)
 
 ## Enable legend
 
-The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend can be added to tile maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="N0" EnableGroupingSeparator="true">
@@ -147,7 +157,7 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationCityDetails
     {        
         public string Name { get; set; }
@@ -156,20 +166,21 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"},
-        new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"},
-        new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"},
-        new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"},
-        new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"},
-        new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"},
-        new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"},
-        new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"},
-        new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"},
-        new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"}
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8"},
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4"},
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082"},
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67"},
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3"},
+        new PopulationCityDetails { Name = "Cairo ", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0"},
+        new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647"},
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF"},
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD"},
+        new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E"}
     };
 }
 
 ```
 
-![Blazor OpenStreetMap with Legend](../images/MapProviders/blazor-open-street-map-legend.png)
\ No newline at end of file
+![Blazor OpenStreetMap with Legend](../images/MapProviders/blazor-open-street-map-legend.png)
diff --git a/blazor/maps/providers/other-maps.md b/blazor/maps/providers/other-maps.md
index d09a1f85d1..588e9c2c29 100644
--- a/blazor/maps/providers/other-maps.md
+++ b/blazor/maps/providers/other-maps.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Other Maps in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about other maps in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn here all about other maps in Syncfusion Blazor Maps component and much more details.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Other Maps in Blazor Maps Component
 
-Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Maps component.
+Apart from OpenStreetMap and Bing Maps, maps from other online providers can be rendered by assigning the provider’s tile URL to the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. The URL template design supports any provider that follows the standard tile format shown below.
 
 Sample Template: https://< domain_name >/maps/basic/{z}/{x}/{y}.png
 
@@ -17,11 +17,12 @@ Sample Template: https://< domain_name >/maps/basic/{z}/{x}/{y}.png
 * "${x}" - It indicates tile image x-position (tileX).
 * "${y}" - It indicates tile image y-position (tileY).
 
-In this case, the key generated for those online map service providers can also be appended to the URL. This allows to create personalized Maps with your own content and imagery.
+If an access key is required by the provider, append it to the URL to load personalized maps with custom content and imagery.
 
-Following is an example of how to add a TomTom map. You can generate an API key by following the steps in this [link](https://developer.tomtom.com/map-display-api/documentation/product-information/introduction) and then adding the key to the URL.
+The following example shows how to add a TomTom map. Generate an API key using the steps in the TomTom documentation and append the key to the URL.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -30,15 +31,17 @@ Following is an example of how to add a TomTom map. You can generate an API key
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor TomTom Maps](../images/MapProviders/blazor-tomtom-maps.png)
 
 **Enable zooming and panning**
 
-Tile Maps layer can be zoomed and panned. Zooming helps to get a closer look at a particular area on a Maps for in-depth analysis. Panning helps to move Maps around to focus the targeted area.
+Tile map layers support zooming and panning. Zooming provides a closer view for detailed analysis. Panning moves the map to focus on a specific area.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -54,15 +57,17 @@ Tile Maps layer can be zoomed and panned. Zooming helps to get a closer look at
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor TomTom Maps with Zooming and Panning](../images/MapProviders/blazor-tomtom-maps-zooming.png)
 
 **Adding markers and navigation line**
 
-Markers can be added to the layers of tile Maps by setting the corresponding location's coordinates of latitude and longitude using [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be added on top of the tile Maps layer for highlighting a path among various places by setting the corresponding location's coordinates of latitude and longitude in the [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
+Markers can be added to tile layers by providing the latitude and longitude for each location using the [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) class. Navigation lines can be drawn to highlight a path between locations using [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html).
 
 ```csharp
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -85,27 +90,30 @@ Markers can be added to the layers of tile Maps by setting the corresponding loc
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
     }
+
     private List<City> Cities = new List<City> {
         new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
         new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
     };
 }
+
 ```
 
 ![Blazor TomTom Maps with Markers and Navigation Line](../images/MapProviders/blazor-tomtom-maps-marker-and-line.png)
 
 **Adding sublayer**
 
-Any GeoJSON shape can be rendered as a sublayer on top of the tile Maps layer for highlighting a particular continent or country in tile maps by adding another layer and specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
+Any GeoJSON shape can be rendered as a sublayer on top of the tile layer to highlight a continent or country by adding another layer and setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_Type) property of [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to **SubLayer**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -119,15 +127,17 @@ Any GeoJSON shape can be rendered as a sublayer on top of the tile Maps layer fo
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor TomTom Maps with Sublayer](../images/MapProviders/blazor-tomtom-map-sublayer.png)
 
 **Enable legend**
 
-The legend can be added to the tile Maps by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
+A legend can be added to a tile map by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Format="N0" EnableGroupingSeparator="true">
@@ -155,7 +165,7 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class PopulationCityDetails
     {        
         public string Name { get; set; }
@@ -164,17 +174,18 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
         public double Population { get; set; }
         public string Color { get; set; }
     };
+
     public List<PopulationCityDetails> PopulatedCities = new List<PopulationCityDetails> {
-        new PopulationCityDetails { Name ="Tokyo", Latitude= 35.6805245924747, Longitude= 139.76770396213337, Population= 37435191, Color="#2EB6C8"},
-        new PopulationCityDetails { Name ="Delhi", Latitude= 28.644800, Longitude= 77.216721, Population= 29399141, Color="#4A97F4"},
-        new PopulationCityDetails { Name ="Shanghai", Latitude= 31.224361, Longitude= 121.469170, Population= 26317104, Color="#498082"},
-        new PopulationCityDetails { Name ="Sao Paulo", Latitude= -23.550424484747914, Longitude= -46.646471636488315, Population= 21846507, Color="#FB9E67"},
-        new PopulationCityDetails { Name ="Mexico City", Latitude= 19.427402397418774, Longitude= -99.131123716666, Population= 21671908, Color="#8F9DE3"},
-        new PopulationCityDetails { Name ="Cairo ", Latitude= 30.033333, Longitude= 31.233334, Population= 20484965, Color="#7B9FB0"},
-        new PopulationCityDetails { Name ="Dhaka", Latitude= 23.777176, Longitude= 90.399452, Population= 20283552, Color="#4DB647"},
-        new PopulationCityDetails { Name ="Mumbai", Latitude= 19.08492049646163, Longitude= 72.87449446319248, Population= 20185064, Color="#30BEFF"},
-        new PopulationCityDetails { Name ="Beijing", Latitude= 39.90395970055848, Longitude= 116.38831272088059, Population= 20035455, Color="#Ac72AD"},
-        new PopulationCityDetails { Name ="Osaka", Latitude= 34.69024500601642, Longitude= 135.50746225677142, Population= 19222665, Color="#EFE23E"}
+        new PopulationCityDetails { Name = "Tokyo", Latitude = 35.6805245924747, Longitude = 139.76770396213337, Population = 37435191, Color = "#2EB6C8" },
+        new PopulationCityDetails { Name = "Delhi", Latitude = 28.644800, Longitude = 77.216721, Population = 29399141, Color = "#4A97F4" },
+        new PopulationCityDetails { Name = "Shanghai", Latitude = 31.224361, Longitude = 121.469170, Population = 26317104, Color = "#498082" },
+        new PopulationCityDetails { Name = "Sao Paulo", Latitude = -23.550424484747914, Longitude = -46.646471636488315, Population = 21846507, Color = "#FB9E67" },
+        new PopulationCityDetails { Name = "Mexico City", Latitude = 19.427402397418774, Longitude = -99.131123716666, Population = 21671908, Color = "#8F9DE3" },
+        new PopulationCityDetails { Name = "Cairo", Latitude = 30.033333, Longitude = 31.233334, Population = 20484965, Color = "#7B9FB0" },
+        new PopulationCityDetails { Name = "Dhaka", Latitude = 23.777176, Longitude = 90.399452, Population = 20283552, Color = "#4DB647" },
+        new PopulationCityDetails { Name = "Mumbai", Latitude = 19.08492049646163, Longitude = 72.87449446319248, Population = 20185064, Color = "#30BEFF" },
+        new PopulationCityDetails { Name = "Beijing", Latitude = 39.90395970055848, Longitude = 116.38831272088059, Population = 20035455, Color = "#Ac72AD" },
+        new PopulationCityDetails { Name = "Osaka", Latitude = 34.69024500601642, Longitude = 135.50746225677142, Population = 19222665, Color = "#EFE23E"}
     };
 }
 
@@ -184,12 +195,13 @@ The legend can be added to the tile Maps by setting the [Visible](https://help.s
 
 ## Other supportive online map service providers
 
-The Maps component can also render the following online map service providers, which are listed below.
+The Maps component can render maps from the following online providers:
 
-* MapBox
-* ESRI
+- MapBox
+- ESRI
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -202,6 +214,7 @@ The Maps component can also render the following online map service providers, w
         </MapsLayer>-->
     </MapsLayers>
 </SfMaps>
+
 ```
 
-![Blazor MapBox Map](../images/MapProviders/blazor-mapbox-map.png)
\ No newline at end of file
+![Blazor MapBox Map](../images/MapProviders/blazor-mapbox-map.png)
diff --git a/blazor/maps/shapefile.md b/blazor/maps/shapefile.md
index 9a218146b8..c659b70cbd 100644
--- a/blazor/maps/shapefile.md
+++ b/blazor/maps/shapefile.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Shapefile in Blazor Maps component | Syncfusion
-description: Checkout and learn here all about to view shapefile in Syncfusion Blazor Maps component and much more details.
+description: Check out and learn how to view and work with shapefiles in the Syncfusion Blazor Maps component for better map rendering.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -9,15 +9,16 @@ documentation: ug
 
 # Shapefile in Blazor Maps Component
 
-The shapefile is a popular geospatial vector data format for storing location-based information such as shapes, spatial locations, and pertinent properties of geographic landmarks.
+A shapefile is a widely used geospatial vector data format for storing geographic features, their spatial locations, and associated attribute data.
 
 ## Importing and viewing shapefile
 
-The shapefile can be used to render vector shape map in the Maps component by specifying the shapefile's remotely hosted file path in the [MapsLayer's](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property.
+A shapefile can render a vector shape map in the Maps component by providing the remotely hosted file path in the [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property.
 
-> Only shapefiles hosted on a remote server are currently supported by our Maps component.
+> Only shapefiles hosted on a remote server are currently supported by the Maps component.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <div class="control-section">
@@ -52,35 +53,38 @@ The shapefile can be used to render vector shape map in the Maps component by sp
         public string Name { get; set; }
         public string Color { get; set; }
     };
+
     public List<TopUniversitiesDetails> TopUniversities = new List<TopUniversitiesDetails> {
-        new TopUniversitiesDetails { Name="University of Washington", Latitude=47.655548, Longitude=-122.303200 , Color = "#623e8c" },
-        new TopUniversitiesDetails { Name="CUNY Brooklyn College", Latitude=40.631920, Longitude= -73.952904, Color="#45738a" },
-        new TopUniversitiesDetails { Name="Purdue University", Latitude=40.425869, Longitude=-86.908066, Color="#5fb8ad" },
-        new TopUniversitiesDetails { Name="University of Florida", Latitude=29.643946, Longitude=-82.355659, Color="#5fb87b" },
-        new TopUniversitiesDetails { Name="Oklahoma State University", Latitude=35.471901, Longitude=-97.581794, Color="#99b85f" },
-        new TopUniversitiesDetails { Name="University of North Carolina at Chapel Hill", Latitude=35.904613, Longitude=-79.046761, Color="#a1931a" },
-        new TopUniversitiesDetails { Name="California State University-Long Beach", Latitude=33.783823, Longitude=-118.114090, Color="#a1501a" },
-        new TopUniversitiesDetails { Name="California State University-Los Angeles", Latitude=34.022415, Longitude=-118.285530, Color="#db4040" },
-        new TopUniversitiesDetails { Name="Indiana University-Bloomington", Latitude=39.168804, Longitude=-86.536659, Color="#e227e8" },
-        new TopUniversitiesDetails { Name="University of Illinois at Chicago", Latitude=41.789722, Longitude=-87.599724, Color="#0dff00" }
+        new TopUniversitiesDetails { Name = "University of Washington", Latitude = 47.655548, Longitude = -122.303200 , Color = "#623e8c" },
+        new TopUniversitiesDetails { Name = "CUNY Brooklyn College", Latitude = 40.631920, Longitude = -73.952904, Color = "#45738a" },
+        new TopUniversitiesDetails { Name = "Purdue University", Latitude = 40.425869, Longitude = -86.908066, Color = "#5fb8ad" },
+        new TopUniversitiesDetails { Name = "University of Florida", Latitude = 29.643946, Longitude = -82.355659, Color = "#5fb87b" },
+        new TopUniversitiesDetails { Name = "Oklahoma State University", Latitude = 35.471901, Longitude = -97.581794, Color = "#99b85f" },
+        new TopUniversitiesDetails { Name = "University of North Carolina at Chapel Hill", Latitude = 35.904613, Longitude = -79.046761, Color = "#a1931a" },
+        new TopUniversitiesDetails { Name = "California State University-Long Beach", Latitude = 33.783823, Longitude = -118.114090, Color = "#a1501a" },
+        new TopUniversitiesDetails { Name = "California State University-Los Angeles", Latitude = 34.022415, Longitude = -118.285530, Color = "#db4040" },
+        new TopUniversitiesDetails { Name = "Indiana University-Bloomington", Latitude = 39.168804, Longitude = -86.536659, Color = "#e227e8" },
+        new TopUniversitiesDetails { Name = "University of Illinois at Chicago", Latitude = 41.789722, Longitude = -87.599724, Color = "#0dff00" }
     };
 }
+
 ```
 
 ![Shapefile rendered in Blazor Maps](./images/Shapefile/blazor-shapefile.png)
 
 ## Multilayer
 
-The shapefile map, like GeoJSON map, can be rendered in a multilayer structure, as described in [this section](https://blazor.syncfusion.com/documentation/maps/layers#multilayer). The shapefile map can be added to different layers in the ways listed below.
+A shapefile map, like a GeoJSON map, can be rendered using a multilayer structure, as described in [this section](https://blazor.syncfusion.com/documentation/maps/layers#multilayer). A shapefile map can be added to different layers in the following ways:
 
-1. The shapefile map can be displayed as a sublayer over the online map providers.
-2. The shapefile map can be displayed as a sublayer above the GeoJSON map.
-3. The GeoJSON map can be displayed as a sublayer over the shapefile map.
-4. Shapefiles can be displayed as both main and sublayer layers.
+1. Display the shapefile map as a sublayer over online map providers.
+2. Display the shapefile map as a sublayer above the GeoJSON map.
+3. Display the GeoJSON map as a sublayer over the shapefile map.
+4. Use shapefiles as both main and sublayer.
 
-The following example demonstrates how to display the shapefile map as a sublayer above the GeoJSON map.
+The following example demonstrates a shapefile map as a sublayer above the GeoJSON map.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps;
 
 <SfMaps>
@@ -99,13 +103,13 @@ The following example demonstrates how to display the shapefile map as a sublaye
 
 ## Customization
 
-The characteristics of the shapes in the shapefile map, such as fill color, border, projection type, and so on, can be modified. This [link](https://blazor.syncfusion.com/documentation/maps/customization) will teach you more about customizing shapes in the Maps component.
+Shape characteristics in a shapefile map—such as fill color, border, and projection—can be customized. For details, see the [Maps customization](https://blazor.syncfusion.com/documentation/maps/customization) documentation.
 
-> All of the functions listed in the link above will be demonstrated using the GeoJSON file. Replace the GeoJSON file path with the shapefile's file path to see a demonstration of these functions.  
+> The examples in the linked topic use a GeoJSON file. Replace the GeoJSON file path with the shapefile path to view the same behavior with shapefiles.
 
 ## Other supportive features
 
-The shapefile map supports the feature sets listed below, and you can learn more about them by following the links.
+A shapefile map supports the following feature sets. Refer to the topics below to learn more.
 
 1. [Color mapping](https://blazor.syncfusion.com/documentation/maps/color-mapping)
 2. [Data labels](https://blazor.syncfusion.com/documentation/maps/data-labels)
@@ -118,4 +122,4 @@ The shapefile map supports the feature sets listed below, and you can learn more
 9. [User interactions](https://blazor.syncfusion.com/documentation/maps/user-interactions)
 10. [Print and Export](https://blazor.syncfusion.com/documentation/maps/print-and-export)
 
-> All of the functions listed in the links above will be demonstrated using the GeoJSON file. Replace the GeoJSON file path with the shapefile's file path to see a demonstration of these functions.
\ No newline at end of file
+> The examples in the linked topics use a GeoJSON file. Replace the GeoJSON file path with the shapefile path to demonstrate the same features with shapefiles.
diff --git a/blazor/maps/state-persistence.md b/blazor/maps/state-persistence.md
index 91cf72aeb5..088ee46da4 100644
--- a/blazor/maps/state-persistence.md
+++ b/blazor/maps/state-persistence.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: State Persistence in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about state persistence in Syncfusion Blazor Maps component and much more.
+description: Check out and learn how to enable and use state persistence in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -11,9 +11,10 @@ documentation: ug
 
 ## State Persistence
 
-State persistence allows the Maps to retain the current model value in the browser cookies for state maintenance. This action is handled through the `enablePersistence` property which is set to **false** by default. When it is set to **true**, some of the Maps component model values will be retained even after refreshing the page.
+State persistence retains selected Maps model values in browser storage for state maintenance. This behavior is controlled by the `EnablePersistence` property, which is set to **false** by default. When set to **true**, selected Maps component model values are retained after refreshing the page.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps EnablePersistence ="true">
@@ -23,4 +24,5 @@ State persistence allows the Maps to retain the current model value in the brows
     </MapsLayers>
     <MapsZoomSettings Enable='true'></MapsZoomSettings>
 </SfMaps>
+
 ```
\ No newline at end of file
diff --git a/blazor/maps/user-interactions.md b/blazor/maps/user-interactions.md
index 26183cd2a9..56f3670635 100644
--- a/blazor/maps/user-interactions.md
+++ b/blazor/maps/user-interactions.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: User Interactions in Blazor Maps Component | Syncfusion
-description: Checkout and learn here all about user interactions in Syncfusion Blazor Maps component and much more.
+description: Check out and learn here all about user interactions with customization options in the Syncfusion Blazor Maps component.
 platform: Blazor
 control: Maps
 documentation: ug
@@ -24,9 +24,10 @@ By default, [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 <b>Enable zooming</b>
 
-Zooming of Maps is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**.
+Enable zooming by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -36,15 +37,17 @@ Zooming of Maps is enabled by setting the [Enable](https://help.syncfusion.com/c
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Zooming](./images/UserInteraction/blazor-maps-zooming.png)
 
 <b>Enable panning</b>
 
-To enable the panning feature, set the [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**.
+Enable panning by setting the [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -54,27 +57,29 @@ To enable the panning feature, set the [EnablePanning](https://help.syncfusion.c
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ### Various types of zooming
 
-Zooming can be performed in the following types:
+Zooming supports the following types:
 
 #### Zooming toolbar
 
-A toolbar is available in the Maps component to perform zooming and panning operation. The zooming toolbar appears when the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property of [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) is set to **true**.
+A built-in toolbar supports zooming and panning. It appears when the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_Enable) property is set to **true**.
 
-The following options are available in toolbar.
+The toolbar includes the following options:
 
 1. Zoom - Performs selection zooming.
-2. Zoom In - Zooms in the Maps.
-3. Zoom Out - Zooms out the Maps.
+2. Zoom In - Zooms in the map.
+3. Zoom Out - Zooms out the map.
 4. Pan - Switches to panning if selection zoom is enabled.
-5. Reset -  Restores the Maps to the default view.
+5. Reset - Restores the default view.
 
-By default, the toolbar is rendered with **Zoom In**, **Zoom Out**, and **Reset** options.
+By default, the toolbar renders with **Zoom In**, **Zoom Out**, and **Reset**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -85,13 +90,15 @@ By default, the toolbar is rendered with **Zoom In**, **Zoom Out**, and **Reset*
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 #### Pinch zooming
 
-To enable or disable the pinch zooming, use the [PinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_PinchZooming) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
+Enable or disable pinch zooming using the [PinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_PinchZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -101,13 +108,15 @@ To enable or disable the pinch zooming, use the [PinchZooming](https://help.sync
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 #### Single-click zooming
 
-To enable or disable the single-click zooming using mouse, use the [ZoomOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnClick) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
+Enable or disable single-click zooming using the [ZoomOnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomOnClick) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -117,13 +126,15 @@ To enable or disable the single-click zooming using mouse, use the [ZoomOnClick]
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 #### Double-click zooming
 
-To enable or disable the double-click zooming using mouse, use the [DoubleClickZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_DoubleClickZoom) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
+Enable or disable double-click zooming using the [DoubleClickZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_DoubleClickZoom) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -133,13 +144,15 @@ To enable or disable the double-click zooming using mouse, use the [DoubleClickZ
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 #### Mouse wheel zooming
 
-To enable or disable mouse wheel zooming, use the [MouseWheelZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MouseWheelZoom) property in [`MapsZoomSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
+Enable or disable mouse wheel zooming using the [MouseWheelZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MouseWheelZoom) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -149,13 +162,15 @@ To enable or disable mouse wheel zooming, use the [MouseWheelZoom](https://help.
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 #### Selection zooming
 
-To enable or disable selection zooming, use the [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnableSelectionZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) property must be set to **false** to enable the selection zooming in Maps.
+Enable or disable selection zooming using the [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnableSelectionZooming) property in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). To enable selection zooming, set [EnablePanning](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_EnablePanning) to **false**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -170,13 +185,15 @@ To enable or disable selection zooming, use the [EnableSelectionZooming](https:/
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ### Setting minimum and maximum values for zoom factor
 
-The zoom factor range can be adjusted using the [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) and [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) properties in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) value is set to 1 by default, and the [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) value is set to 10.
+Adjust the zoom range using [MinZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MinZoom) and [MaxZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_MaxZoom) properties in [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html). The default values are **1** for MinZoom and **10** for MaxZoom.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -186,13 +203,15 @@ The zoom factor range can be adjusted using the [MinZoom](https://help.syncfusio
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ### Zooming with layer animation
 
-To zoom in and zoom out the shape maps with animation, set the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) with duration value in milliseconds. Most importantly, the animation for the layer works when the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) is set for the base layer of the Maps and not the sublayer.
+Apply animated zooming for shape layers using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_AnimationDuration) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). The animation applies to the base layer when the duration is set on that layer.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -204,21 +223,23 @@ To zoom in and zoom out the shape maps with animation, set the [AnimationDuratio
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ### Customizing the zoom toolbar
 
-The [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html) can be used to customize the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarSettings`.
+Use [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html) to customize the zoom toolbar. The following properties are available:
 
-* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_Orientation) - To customize the orientation (horizontal\vertical) of the zoom toolbar.
-* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_HorizontalAlignment) - To customize the position of the zoom toolbar in near, far, and center positions, during horizontal orientation.
-* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_VerticalAlignment) - To customize the position of the zoom toolbar in near, far, and center positions, during vertical orientation.
-* [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BackgroundColor) - To customize the background color of the zoom toolbar.
-* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderColor) - To apply the border color to the zoom toolbar.
-* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderWidth) - To set the width to the border of the zoom toolbar.
-* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderOpacity) - To set the opacity to the border of the zoom toolbar.
+* [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_Orientation) - Sets the toolbar orientation (horizontal or vertical).
+* [HorizontalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_HorizontalAlignment) - Positions the toolbar for horizontal orientation (near, center, far).
+* [VerticalAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_VerticalAlignment) - Positions the toolbar for vertical orientation (near, center, far).
+* [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BackgroundColor) - Sets the toolbar background color.
+* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderColor) - Sets the toolbar border color.
+* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderWidth) - Sets the toolbar border width.
+* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarSettings_BorderOpacity) - Sets the toolbar border opacity.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -234,27 +255,29 @@ The [MapsZoomToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.B
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with custom zoom toolbar](./images/UserInteraction/blazor-maps-custom-zooming-toolbar.png)
 
 **Customizing the buttons in the zoom toolbar**
 
-The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html) can be used to customize the buttons in the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarButton`.
+Use [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html) to customize the toolbar buttons. The following properties are available:
 
-* [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_ToolbarItems) - To customize the items that are to be shown in the zoom toolbar.
-* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Color) - To apply the color to the icons in the buttons in the zoom toolbar.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Fill) - To apply the fill color to the buttons in the zoom toolbar.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Opacity) - To apply the opacity for the buttons in the zoom toolbar.
-* [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_HighlightColor) - To apply the color for the button in the zoom toolbar, when the mouse has hovered on the appropriate button.
-* [SelectionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_SelectionColor) - To apply the color for the button in the zoom toolbar, when clicking the same.
-* [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Radius) - To set the radius for the buttons in the zoom toolbar.
-* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Padding) - To set the spacing between the buttons in the zoom toolbar.
-* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderColor) - To set the color of the border of the buttons in the zoom toolbar.
-* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderOpacity) - To set the opacity of the border of the buttons in the zoom toolbar.
-* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderWidth) - To set the width of the border of the buttons in the zoom toolbar.
+* [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_ToolbarItems) - Configures the items displayed in the toolbar.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Color) - Sets the icon color.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Fill) - Sets the button fill color.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Opacity) - Sets the button opacity.
+* [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_HighlightColor) - Sets the hover color.
+* [SelectionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_SelectionColor) - Sets the active state color.
+* [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Radius) - Sets the button corner radius.
+* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_Padding) - Sets the spacing between buttons.
+* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderColor) - Sets the border color.
+* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderOpacity) - Sets the border opacity.
+* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarButton.html#Syncfusion_Blazor_Maps_MapsZoomToolbarButton_BorderWidth) - Sets the border width.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -271,27 +294,29 @@ The [MapsZoomToolbarButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with custom zoom toolbar buttons](./images/UserInteraction/blazor-maps-custom-zoom-toolbar-buttons.png)
 
 **Customizing the tooltip of the zoom toolbar**
 
-The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html) can be used to customize the tooltip of the zoom toolbar. The following properties are available for customization in the `MapsZoomToolbarTooltipSettings`.
+Use [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html) to customize the toolbar tooltip. The following properties are available:
 
-* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Visible) - To enable or disable the tooltip in the zoom toolbar.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Fill) - To set the fill color to the tooltip in the zoom toolbar.
-* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderColor) - To set the color of the border of the tooltip in the zoom toolbar.
-* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderOpacity) - To set the opacity of the border of the tooltip in the zoom toolbar.
-* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderWidth) - To set the width of the border of the tooltip in the zoom toolbar.
-* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontColor) - To set the text color in the tooltip of the zoom toolbar.
-* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontFamily) - To set the font family in the tooltip of the zoom toolbar.
-* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontStyle) - To set the font style in the tooltip of the zoom toolbar.
-* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontWeight) - To set the font weight in the tooltip of the zoom toolbar.
-* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontSize) - To set the font size in the tooltip of the zoom toolbar.
-* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontOpacity) - To set the font opacity in the tooltip of the zoom toolbar.
+* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Visible) - Enables or disables the tooltip.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_Fill) - Sets the tooltip background color.
+* [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderColor) - Sets the tooltip border color.
+* [BorderOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderOpacity) - Sets the tooltip border opacity.
+* [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_BorderWidth) - Sets the tooltip border width.
+* [FontColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontColor) - Sets the tooltip text color.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontFamily) - Sets the tooltip font family.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontStyle) - Sets the tooltip font style.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontWeight) - Sets the tooltip font weight.
+* [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontSize) - Sets the tooltip font size.
+* [FontOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomToolbarTooltipSettings.html#Syncfusion_Blazor_Maps_MapsZoomToolbarTooltipSettings_FontOpacity) - Sets the tooltip font opacity.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps Width="700px" Height="500px">
@@ -309,22 +334,24 @@ The [MapsZoomToolbarTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncf
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with custom tooltip in zoom toolbar](./images/UserInteraction/blazor-maps-custom-tooltip-in-zoom-toolbar.png)
 
 ## Selection
 
-Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html) to **true**.
+Shapes can be selected and deselected during interaction. Enable selection by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html) to **true**.
 
-The following properties and class are available to customize the selection of Maps elements such as shapes, bubbles and markers.
+The following properties and class customize selection for shapes, bubbles, and markers:
 
-* [MapsLayerSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionBorder.html) - To customize the color and width of the border of which element is selected in Maps.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Fill) - Applies the color for the element that is selected.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Opacity) - To customize the transparency for the element that is selected.
-* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_EnableMultiSelect) - To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.
+* [MapsLayerSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionBorder.html) - Configures the selected element border color and width.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Fill) - Sets the selected element color.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Opacity) - Sets the selected element opacity.
+* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_EnableMultiSelect) - Enables selection of multiple shapes, markers, or bubbles.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -336,13 +363,15 @@ The following properties and class are available to customize the selection of M
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Shape Selection](./images/UserInteraction/blazor-maps-shape-selection.png)
 
-By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
+Selecting a legend item selects the shapes bound to that legend, and selecting a shape highlights the corresponding legend.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -363,12 +392,13 @@ By tapping on the specific legend, the shapes which are bounded to the selected
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class UNCouncil
     {
         public string Country { get; set; }
         public string Membership { get; set; }
-    };
+    }
+
     private List<UNCouncil> CouncilMemberdetails = new List<UNCouncil>{
         new UNCouncil { Country= "China", Membership= "Permanent" },
         new UNCouncil { Country= "France",Membership= "Permanent" },
@@ -378,15 +408,17 @@ By tapping on the specific legend, the shapes which are bounded to the selected
         new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
     };
 }
+
 ```
 
 ![Blazor Maps with Shape Selection using Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png)
 
 ### Enable selection for bubbles
 
-To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) as **true**.
+Enable bubble selection by configuring [MapsBubbleSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleSelectionSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -404,13 +436,14 @@ To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSetting
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<Country> PopulationDetails = new List<Country> {
        new Country
        {
@@ -426,15 +459,17 @@ To enable the selection for bubbles in Maps, set the [MapsBubbleSelectionSetting
        }
     };
 }
+
 ```
 
 ![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG)
 
 ### Enable selection for markers
 
-To enable the selection for markers in Maps, set the [MapsMarkerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSelectionSettings.html) in the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html#Syncfusion_Blazor_Maps_MapsLayerSelectionSettings_Enable) property of the [MapsLayerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html) as **true**.
+Enable marker selection by configuring [MapsMarkerSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSelectionSettings.html) in [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerSelectionSettings.html#Syncfusion_Blazor_Maps_MapsLayerSelectionSettings_Enable) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -455,38 +490,44 @@ To enable the selection for markers in Maps, set the [MapsMarkerSelectionSetting
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public class City
     {
         public double Latitude { get; set; }
         public double Longitude { get; set; }
     };
+
     public List<City> California = new List<City> {
-        new City { Latitude=35.145083,Longitude=-117.960260 }
+        new City { Latitude = 35.145083, Longitude = -117.960260 }
     };
+
     public List<City> NewYork = new List<City> {
-        new City { Latitude=40.724546, Longitude=-73.850344 }
+        new City { Latitude = 40.724546, Longitude = -73.850344 }
     };
+
     public List<City> Iowa = new List<City> {
-        new City { Latitude= 41.657782, Longitude=-91.533857 }
+        new City { Latitude = 41.657782, Longitude = -91.533857 }
     };
 }
+
 ```
 
 ![Enabling Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG)
 
 ### Enable selection for polygons
 
-When the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Enable) property of [MapsPolygonSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html) is set to **true**, the polygon shapes can be selected via user interaction. The following properties and a class are available in  `MapsPolygonSelectionSettings` to customize the polygon shape when it is selected.
+Enable polygon selection by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Enable) property of [MapsPolygonSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html) to **true**. The following properties and class customize selected polygon shapes:
 
-* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_EnableMultiSelect) - It is used to enable multiple selection of polygon shapes.
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Fill) - It is used to change the color of the selected polygon shape.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Opacity) - It is used to change the opacity of the selected polygon shape.
-* [MapsPolygonSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionBorder.html) - This class is used to change the color, width, and opacity of the border of the selected polygon shape.
+* [EnableMultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_EnableMultiSelect) - Enables selection of multiple polygons.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Fill) - Sets the selected polygon color.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionSettings.html#Syncfusion_Blazor_Maps_MapsPolygonSelectionSettings_Opacity) - Sets the selected polygon opacity.
+* [MapsPolygonSelectionBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonSelectionBorder.html) - Configures the border color, width, and opacity.
 
-The following example shows how to select the polygon shape in the geometry map.
+The following example demonstrates selecting a polygon in a geometry map.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -504,6 +545,7 @@ The following example shows how to select the polygon shape in the geometry map.
 
 @code {
     List<Coordinate> Brazil = new List<Coordinate>();
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
@@ -543,46 +585,54 @@ The following example shows how to select the polygon shape in the geometry map.
         Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
     }
 }
+
 ```
 ![Blazor Maps with selected polygon shape](./images/Polygon/blazor-map-polygon-shape-selected.gif)
 
 ### Public method for the shape selection
 
-The [ShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ShapeSelection_System_Int32_System_String_System_String_System_Boolean_) method can be used to select each shape in the Maps. **layerIndex**, **propertyName**, **shapeDataPath**, and **isSelect** boolean value to select or deselect the shape are the input parameters for this method.
+Use the [ShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_ShapeSelection_System_Int32_System_String_System_String_System_Boolean_) method to select a shape programmatically. Input parameters are the **layerIndex**, **propertyName**, **shapeDataPath**, and the **isSelect** boolean to select or deselect the shape.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
-        <div>
-            <SfMaps @ref="mapsref">
-                <MapsLayers>
-                    <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
-                        <MapsLayerSelectionSettings Enable="true" Fill="green">
-                            <MapsLayerSelectionBorder Color="white" Width="2"></MapsLayerSelectionBorder>
-                        </MapsLayerSelectionSettings>
-                    </MapsLayer>
-                </MapsLayers>
-            </SfMaps>
-        </div>
-        <button id="select" @onclick="Select">select</button>
-        <button id="unselect" @onclick="Unselect">unselect</button>
-@code{
+
+<div>
+    <SfMaps @ref="mapsref">
+        <MapsLayers>
+            <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
+                <MapsLayerSelectionSettings Enable="true" Fill="green">
+                    <MapsLayerSelectionBorder Color="white" Width="2"></MapsLayerSelectionBorder>
+                </MapsLayerSelectionSettings>
+            </MapsLayer>
+        </MapsLayers>
+    </SfMaps>
+</div>
+<button id="select" @onclick="Select">select</button>
+<button id="unselect" @onclick="Unselect">unselect</button>
+
+@code {
     SfMaps mapsref;
+
     public void Select() {
         mapsref.ShapeSelectionAsync(0, "continent", "Asia", true);
     }
+
     public void Unselect() {
         mapsref.ShapeSelectionAsync(0, "continent", "Asia", false);
     }
 }
+
 ```
 
 ![Blazor Maps Marker with Cluster](./images/Marker/blazor-maps-marker-cluster.PNG)
 
 ### Initial shape selection
 
-The shape is initially selected using the [MapsInitialShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html), and the values are mapped to the [ShapePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapePath) and [ShapeValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapeValue).
+Initialize selection using [MapsInitialShapeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html) by mapping values to [ShapePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapePath) and [ShapeValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsInitialShapeSelection.html#Syncfusion_Blazor_Maps_MapsInitialShapeSelection_ShapeValue).
 
 ```cshtml
+
 <SfMaps>
     <MapsLayers>
         <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
@@ -596,15 +646,17 @@ The shape is initially selected using the [MapsInitialShapeSelection](https://he
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Initial Shape Selection](./images/Marker/blazor-maps-initial-shape-selection.PNG)
 
 ### Initial marker selection
 
-Using the [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html), the marker shape can be selected initially. Markers render based on the [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Longitude) values.
+Select markers initially using [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html). Markers render based on [Latitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Latitude) and [Longitude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.InitialMarkerSelection.html#Syncfusion_Blazor_Maps_InitialMarkerSelection_Longitude).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -629,30 +681,33 @@ Using the [InitialMarkerSelection](https://help.syncfusion.com/cr/blazor/Syncfus
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     private List<City> Cities = new List<City> {
-        new City {Latitude=35.145083,Longitude=-117.960260, Name= "Californiya"},
-        new City { Latitude=40.724546, Longitude=-73.850344, Name="New York"},
-        new City {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa"}
+        new City { Latitude = 35.145083, Longitude = -117.960260, Name = "Californiya" },
+        new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" },
+        new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" }
     };
 }
+
 ```
 
 ![Blazor Maps with Initial Marker Selection](./images/UserInteraction/blazor-maps-marker-selection.PNG)
 
 ## Highlight
 
-Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html) to **true**.
+Shapes can be highlighted on mouse hover, including shapes, bubbles, markers, and legends. Enable highlight by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html) to **true**.
 
-The following properties and classes are available to customize the highlight of Maps elements such as shapes, bubbles and markers.
+The following properties and classes customize highlight behavior for shapes, bubbles, and markers:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Fill) - Applies the color for the element that is highlighted.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Opacity) - To customize the transparency for the element that is highlighted.
-* [MapsLayerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerHighlightBorder.html) - To customize the color and width of the border of the layer when that is highlighted.
-* [MapsBubbleHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightBorder.html) - To customize the color and width of the border of the bubble when that is highlighted.
-* [MapsMarkerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightBorder.html) - To customize the color and width of the border of the marker when that is highlighted.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Fill) - Sets the highlight color.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Opacity) - Sets the highlight opacity.
+* [MapsLayerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerHighlightBorder.html) - Configures the layer border during highlight.
+* [MapsBubbleHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightBorder.html) - Configures the bubble border during highlight.
+* [MapsMarkerHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightBorder.html) - Configures the marker border during highlight.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -664,13 +719,15 @@ The following properties and classes are available to customize the highlight of
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Highlighting Blazor Maps Shape](./images/UserInteraction/blazor-maps-highlight-shape.png)
 
-Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.
+Hovering over a legend highlights the shapes bound to that legend, and hovering over a shape highlights the corresponding legend.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -691,30 +748,32 @@ Hovering on the specific legend, the shapes which are bounded to the selected le
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class UNCouncil
     {
         public string Country { get; set; }
         public string Membership { get; set; }
-    };
+    }
+
     private List<UNCouncil> CouncilMemberDetails = new List<UNCouncil>{
-         new UNCouncil { Country= "China", Membership= "Permanent"},
-         new UNCouncil { Country= "France",Membership= "Permanent" },
-         new UNCouncil { Country= "Russia",Membership= "Permanent"},
-         new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent"},
-         new UNCouncil { Country= "Poland",Membership= "Non-Permanent"},
-         new UNCouncil { Country= "Sweden",Membership= "Non-Permanent"}
+        new UNCouncil { Country = "China", Membership = "Permanent" },
+        new UNCouncil { Country = "France", Membership = "Permanent" },
+        new UNCouncil { Country = "Russia", Membership = "Permanent" },
+        new UNCouncil { Country = "Kazakhstan", Membership = "Non-Permanent" },
+        new UNCouncil { Country = "Poland", Membership = "Non-Permanent" }
     };
 }
+
 ```
 
 ![Highlighting Blazor Maps Shape with Legend](./images/UserInteraction/blazor-maps-shape-selection-using-legend.png)
 
 ### Enable highlight for bubbles
 
-To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property of [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) as **true**.
+Enable bubble highlight by configuring [MapsBubbleHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleHighlightSettings.html) in [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsSelectionSettings.html#Syncfusion_Blazor_Maps_MapsSelectionSettings_Enable) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -734,17 +793,18 @@ To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSet
     </MapsLayers>
 </SfMaps>
 
-@code{
+@code {
     public class Country
     {
         public string Name { get; set; }
         public double Population { get; set; }
         public string Color { get; set; }
-    };
+    }
+
     private List<Country> PopulationDetails = new List<Country> {
         new Country
        {
-           Name ="United States", Population = 325020000, Color = "#b5e485"
+           Name = "United States", Population = 325020000, Color = "#b5e485"
        },
        new Country
        {
@@ -752,19 +812,21 @@ To enable the highlight for the bubbles in Maps, set the [MapsBubbleHighlightSet
        },
        new Country
        {
-           Name="India", Population=1198003000, Color = "#df819c"
+           Name = "India", Population = 1198003000, Color = "#df819c"
        }
     };
 }
+
 ```
 
 ![Enabling Bubble Selection in Blazor Maps](./images/UserInteraction/blazor-maps-bubble-selection.PNG)
 
 ### Enable highlight for markers
 
-To enable the highlight for markers in Maps, set the [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property of [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) as **true**.
+Enable marker highlight by configuring [MapsMarkerHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerHighlightSettings.html) in [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) and setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsHighlightSettings.html#Syncfusion_Blazor_Maps_MapsHighlightSettings_Enable) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -786,28 +848,31 @@ To enable the highlight for markers in Maps, set the [MapsMarkerHighlightSetting
         public double Latitude { get; set; }
         public double Longitude { get; set; }
         public string Name { get; set; }
-    };
+    }
+
     private List<City> Cities = new List<City> {
-        new City { Latitude=35.145083,Longitude=-117.960260, Name= "California" },
-        new City { Latitude=40.724546, Longitude=-73.850344, Name="New York" },
-        new City { Latitude= 41.657782, Longitude=-91.533857, Name="Iowa" }
+        new City { Latitude = 35.145083, Longitude = -117.960260, Name = "California" },
+        new City { Latitude = 40.724546, Longitude = -73.850344, Name = "New York" },
+        new City { Latitude = 41.657782, Longitude = -91.533857, Name = "Iowa" }
     };
 }
+
 ```
 
 ![Highlighting Marker Selection in Blazor Maps](./images/UserInteraction/blazor-maps-marker-selection.PNG)
 
 ### Enable highlight for polygons
 
-The polygon shapes can be highlighted via user interaction if the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Enable) property of [MapsPolygonHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html) is set to **true**. The following properties and a class are available in `MapsPolygonHighlightSettings` to customize the polygon shape when it is highlighted.
+Enable polygon highlight by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Enable) property of [MapsPolygonHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html) to **true**. The following properties and class customize the highlighted polygon:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Fill) - It is used to change the color of the highlighted polygon shape.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Opacity) - It is used to change the opacity of the highlighted polygon shape.
-* [MapsPolygonHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightBorder.html) - This class is used to change the color, width, and opacity of the border of the highlighted polygon shape.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Fill) - Sets the highlight color.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightSettings.html#Syncfusion_Blazor_Maps_MapsPolygonHighlightSettings_Opacity) - Sets the highlight opacity.
+* [MapsPolygonHighlightBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygonHighlightBorder.html) - Configures the border color, width and opacity.
 
-The following example shows how to highlight a polygon shape on a geometry map.
+The following example illustrates highlighting a polygon on a geometry map.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -825,6 +890,7 @@ The following example shows how to highlight a polygon shape on a geometry map.
 
 @code {
     List<Coordinate> Brazil = new List<Coordinate>();
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
@@ -864,18 +930,20 @@ The following example shows how to highlight a polygon shape on a geometry map.
         Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });
     }
 }
+
 ```
 ![Blazor Maps with highlighted polygon shape](./images/Polygon/blazor-map-polygon-shape-highlight.gif)
 
 ## Tooltip
 
-On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. It can be enabled separately for layer or bubble or marker by using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property of [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html) or [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html) or [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html) respectively. The [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) is set to **MouseMove**.
+Tooltips display additional information for layers, bubbles, or markers on mouse over or touch end. Enable tooltips using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Visible) property in [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html), [MapsBubbleTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubbleTooltipSettings.html), or [MapsMarkerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerTooltipSettings.html). Use [TooltipDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html#Syncfusion_Blazor_Maps_SfMaps_TooltipDisplayMode) property to change when the tooltip is shown. The available modes are:
 
 * MouseMove
 * Click
 * DoubleClick
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -886,18 +954,20 @@ On mouse over or touch end event, the tooltip is used to get more information ab
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 ```
 
 ![Blazor Maps with Tooltip](./images/UserInteraction/blazor-maps-tooltip.PNG)
 
 ### Customization
 
-The following properties are available to customize the tooltip of the Maps component.
+Use the following properties to customize tooltips:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Fill) - Applies the color of the tooltip in layers, markers, and bubbles of Maps.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Format) - To customize the format of the tooltip in layers, markers, and bubbles of Maps.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Fill) - Sets the tooltip background color for layers, markers, and bubbles.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Format) - Configures the tooltip format for layers, markers, and bubbles.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -921,21 +991,6 @@ The following properties are available to customize the tooltip of the Maps comp
 </SfMaps>
 
 @code {
-    public List<Country> PerformanceReport = new List<Country> {
-            new Country { CountryName="India", Name="India", Finalist="3", Winner="2" },
-            new Country { CountryName="United Kingdom", Name="United Kingdom", Finalist="4", Winner="1" },
-            new Country { CountryName="Australia", Name="Australia", Finalist="7", Winner="5" },
-            new Country { CountryName="Sri Lanka", Name="Sri Lanka", Finalist="3", Winner="1"},
-            new Country { CountryName="Pakistan", Name="Pakistan", Finalist="2", Winner="1"  },
-            new Country { CountryName="New Zealand", Name="New Zealand", Finalist="1", Winner="0"},
-            new Country { CountryName="West Indies", Name="Dominican Rep", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies", Name="Cuba", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies", Name="Jamaica", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies", Name="Haiti", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies",Name="Gayana", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies", Name="Suriname", Finalist="3", Winner="2"},
-            new Country { CountryName="West Indies", Name="Trinidad and Tobago", Finalist="3", Winner="2"}
-        };
     public class Country
     {
         public string Name { get; set; }
@@ -943,16 +998,34 @@ The following properties are available to customize the tooltip of the Maps comp
         public string Finalist { get; set; }
         public string CountryName { get; set; }
     }
+
+    public List<Country> PerformanceReport = new List<Country> {
+        new Country { CountryName = "India", Name = "India", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "United Kingdom", Name = "United Kingdom", Finalist = "4", Winner = "1" },
+        new Country { CountryName = "Australia", Name = "Australia", Finalist = "7", Winner = "5" },
+        new Country { CountryName = "Sri Lanka", Name = "Sri Lanka", Finalist = "3", Winner = "1" },
+        new Country { CountryName = "Pakistan", Name = "Pakistan", Finalist = "2", Winner = "1" },
+        new Country { CountryName = "New Zealand", Name = "New Zealand", Finalist = "1", Winner = "0" },
+        new Country { CountryName = "West Indies", Name = "Dominican Rep", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Cuba", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Jamaica", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Haiti", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Gayana", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Suriname", Finalist = "3", Winner = "2" },
+        new Country { CountryName = "West Indies", Name = "Trinidad and Tobago", Finalist = "3", Winner = "2" }
+    };
 }
+
 ```
 
 ![Blazor Maps with Custom Tooltip](./images/UserInteraction/blazor-maps-custom-tooltip.png)
 
 ### Tooltip template
 
-The HTML element can be rendered in the tooltip of the Maps using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html#Syncfusion_Blazor_Maps_MapsLayerTooltipSettings_TooltipTemplate) property of the [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
+Render HTML in tooltips using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html#Syncfusion_Blazor_Maps_MapsLayerTooltipSettings_TooltipTemplate) property of [MapsLayerTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayerTooltipSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
@@ -997,27 +1070,14 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe
         </MapsLayer>
     </MapsLayers>
 </SfMaps>
+
 @code {
     public string[] ShapePropertyPath = { "name" };
     public string[] ShapeColorOne = { "#b3daff" };
     public string[] ShapeColorTwo = { "#80c1ff" };
     public string[] ShapeColorThree = { "#1a90ff" };
     public string[] ShapeColorFour = { "#005cb3" };
-    public List<Country> PerformanceReport = new List<Country> {
-        new Country { Name="India", Winner="3", Runner="2", City="India" },
-        new Country { Name="Dominican Rep.", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Cuba", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Jamaica", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Haiti", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Guyana", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Suriname", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Trinidad and Tobago", Winner="3", Runner="2", City="West Indies" },
-        new Country { Name="Sri Lanka", Winner="3", Runner="1", City="Sri Lanka" },
-        new Country { Name="United Kingdom", Winner="3", Runner="0", City="England" },
-        new Country { Name="Pakistan", Winner="2", Runner="1", City="Pakistan" },
-        new Country { Name="New Zealand", Winner="1", Runner="0", City="New Zealand" },
-        new Country { Name="Australia", Winner="7", Runner="5", City="Australia" }
-    };
+
     public class Country
     {
         public string Name { get; set; }
@@ -1025,7 +1085,24 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe
         public string Runner { get; set; }
         public string City { get; set; }
     }
+
+    public List<Country> PerformanceReport = new List<Country> {
+        new Country { Name = "India", Winner = "3", Runner = "2", City = "India" },
+        new Country { Name = "Dominican Rep.", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Cuba", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Jamaica", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Haiti", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Guyana", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Suriname", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Trinidad and Tobago", Winner = "3", Runner = "2", City = "West Indies" },
+        new Country { Name = "Sri Lanka", Winner = "3", Runner = "1", City = "Sri Lanka" },
+        new Country { Name = "United Kingdom", Winner = "3", Runner = "0", City = "England" },
+        new Country { Name = "Pakistan", Winner = "2", Runner = "1", City = "Pakistan" },
+        new Country { Name = "New Zealand", Winner = "1", Runner = "0", City = "New Zealand" },
+        new Country { Name = "Australia", Winner = "7", Runner = "5", City = "Australia" }
+    };
 }
+
 <style>
     .toolback {
         width: 100px;
@@ -1048,17 +1125,19 @@ The HTML element can be rendered in the tooltip of the Maps using the [TooltipTe
         font-weight: 500;
     }
 </style>
+
 ```
 
 ![Blazor Maps with Tooltip Template](./images/UserInteraction/blazor-maps-tooltip-template.PNG)
 
 ### Changing duration in mobile devices
 
-To change the duration of the tooltips on mobile devices, you can use the [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Duration) property in the tooltip settings for features such as layers, markers, bubbles, polygons, and more. By default, this property is set to **2000** milliseconds. Setting the value to **0** will keep the tooltip visible indefinitely, removing it only on the next interaction. If it is greater than **0**, the tooltip will be removed after the specified time.
+Control tooltip lifetime on mobile devices using [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsTooltipSettings.html#Syncfusion_Blazor_Maps_MapsTooltipSettings_Duration) property in the tooltip settings for layers, markers, bubbles, polygons, and more. The default is **2000** milliseconds. A value of **0** keeps the tooltip visible until the next interaction; values greater than **0** remove the tooltip after the specified time.
 
-In the following example, we demonstrate how to change the duration of the tooltip in mobile devices for layers in the Maps component.
+The following example changes tooltip duration for layer tooltips in the Maps component.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Maps
 
 <SfMaps>
diff --git a/blazor/multicolumn-combobox/accessibility.md b/blazor/multicolumn-combobox/accessibility.md
index 597fa15039..e14ec64e1f 100644
--- a/blazor/multicolumn-combobox/accessibility.md
+++ b/blazor/multicolumn-combobox/accessibility.md
@@ -9,12 +9,11 @@ documentation: ug
 
 # Accessibility in Blazor MultiColumn ComboBox Component
 
-The [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component has been designed with the `WAI-ARIA` specifications in mind, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized
-by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+The [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) is designed in accordance with WAI-ARIA specifications and applies appropriate roles, states, and properties, along with robust keyboard support. The component offers complete keyboard interaction and ARIA support to assist users who rely on assistive technologies (AT) or keyboard navigation.
 
 The Blazor ComboBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor ComboBox component is outlined below.
+The accessibility compliance for the Blazor MultiColumn ComboBox component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -33,30 +32,32 @@ The accessibility compliance for the Blazor ComboBox component is outlined below
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor MultiColumn ComboBox component uses the `combobox` role, and each list item has an `option` role. The following `ARIA attributes` denotes the ComboBox state:
+The Blazor MultiColumn ComboBox uses the combobox pattern with an input (textbox), a popup listbox, and list options. The input applies the combobox role, the popup uses the listbox role, and each list item uses the option role. The following ARIA attributes denote the component state and relationships:
 
 | **Properties** | **Functionalities** |
 | --- | --- |
-| `aria-haspopup` | Indicates whether the ComboBox input element has a popup list or not. |
-| `aria-expanded` | Indicates whether the popup list has expanded or not. |
-| `aria-selected` | Indicates the selected option. |
-| `aria-readonly` | Indicates the readonly state of the ComboBox element. |
-| `aria-disabled` | Indicates whether the ComboBox component is in a disabled state or not. |
-| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
-| `aria-owns` | This attribute contains the ID of the popup list to indicate popup as a child element. |
-| `aria-autocomplete`  | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
+| `aria-haspopup` | Indicates that the input element opens a popup list. |
+| `aria-expanded` | Indicates whether the popup list is expanded. |
+| `aria-selected` | Indicates the selected option in the list. |
+| `aria-readonly` | Indicates the read-only state of the input element. |
+| `aria-disabled` | Indicates whether the component is disabled. |
+| `aria-activedescendant` | Holds the ID of the active list item to convey focus within the popup list. |
+| `aria-owns` | Identifies the popup element associated with the input when it is not a DOM descendant. |
+| `aria-autocomplete`  | Indicates the autocomplete behavior (for example, “both” to show a list of options and inline completion). |
+
+Screen readers announce expanded and collapsed states, the active option while navigating, and the selected value when committed.
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor MultiColumn ComboBox without interruptions:
+Use the following key shortcuts to interact with the Blazor MultiColumn ComboBox:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
@@ -65,19 +66,20 @@ You can use the following key shortcuts to access the Blazor MultiColumn ComboBo
 |**Input Navigation**| | |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Cursor moves before the first character in the input. |
-| <kbd>End</kbd> | <kbd>End</kbd> | Cursor moves before the last character in the input. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves the cursor to the beginning of the input. |
+| <kbd>End</kbd> | <kbd>End</kbd> | Moves the cursor to the end of the input. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
 |**Selection**| | |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item. When the popup is open, confirms selection and closes the list; otherwise, toggles the popup. |
 |**Popup Navigation** | | |
-| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
+| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup when open and preserves the current selection. |
+
 
 ## Ensuring accessibility
 
-The Blazor MultiColumn ComboBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor MultiColumn ComboBox component’s accessibility is validated with the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
-The accessibility compliance of the MultiColumn ComboBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the accessibility of the MultiColumn ComboBox component with accessibility tools.
+The accessibility compliance of the MultiColumn ComboBox component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate accessibility with your preferred tools. The component also supports right-to-left (RTL) rendering and high-contrast themes for improved readability and usability.
 
 ## See also
 
diff --git a/blazor/multicolumn-combobox/column.md b/blazor/multicolumn-combobox/column.md
index d6cfb8cf50..fa38ad3f02 100644
--- a/blazor/multicolumn-combobox/column.md
+++ b/blazor/multicolumn-combobox/column.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## TextWrap for column 
 
-The TextWrap in the Blazor `MultiColumn ComboBox` ensures proper wrapping of text within data content for a particular column. By enabling `EnableTextWrap`, you can manage how text appears when it exceeds the available space.
+The TextWrap in the Blazor MultiColumn ComboBox ensures proper wrapping of text within a specific column’s header or content. By enabling EnableTextWrap, text that exceeds the available space is wrapped for improved readability.
 
 **Key features**
 
@@ -28,7 +28,7 @@ The following example enables text wrapping for a particular column in the Blazo
 {% endhighlight %}
 
 
-![Blazor MultiColumn ComboBox with Text Wrap](./images/column/blazor_multicolumncombobox_textwrapcolumn.gif)
+![Blazor MultiColumn ComboBox with text wrap](./images/column/blazor_multicolumncombobox_textwrapcolumn.gif)
 
 ## Setting the text align
 
@@ -46,7 +46,7 @@ The MultiColumn ComboBox supports auto-generating columns, which simplifies the
 
 The MultiColumn ComboBox supports [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Template) within the column, allowing you to define a column template that renders a customized element in each cell.|
 
-In the following sample, defines how to use `Template` inside the column.
+In the following sample, it demonstrates how to use Template inside the column.
 
 {% highlight cshtml %}
 
@@ -66,7 +66,7 @@ In the following sample, defines how to use `HeaderTemplate`.
 
 {% endhighlight %}
 
-![Blazor MultiColumn ComboBox with Column header](./images/column/blazor_multicolumn_combobox_column-header.gif)
+![Blazor MultiColumn ComboBox with column header template](./images/column/blazor_multicolumn_combobox_column-header.gif)
 
 ## Setting display as checkbox 
 
@@ -86,13 +86,13 @@ To enable the rendering of boolean values as checkboxes, you need to set the `Di
 
 You can customize the appearance of the column headers in MultiColumn ComboBox using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_CustomAttributes) property.
 
-You can set the **CustomAttributes** property of the desired column to an object that contains the CSS class custom css. This CSS class will be applied to the header cell of the specified rows in the Multicolumn.
+Set the CustomAttributes property of the target column to a dictionary that defines CSS attributes (for example, a class). The specified CSS is applied to the header cell of that column.
 
 ```cshtml
 <MultiColumnComboboxColumn Field="Name" Width="200px" CustomAttributes="@(new Dictionary<string, object>() { { "class", "customcss" } })"></MultiColumnComboboxColumn>
 ```
 
-The following example demonstrates how to customize the appearance of the Multicolumn Combobox columns using custom attributes.
+The following example demonstrates how to customize the appearance of MultiColumn ComboBox columns using custom attributes.
 
 {% highlight cshtml %}
 
@@ -106,11 +106,10 @@ The following example demonstrates how to customize the appearance of the Multic
 
 The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Format) property to a column in the SfMultiColumnComboBox, specify a valid format string that matches the data type of the column, such as numeric or date formats. For example, you can apply currency formatting to a price field by using the format "C2".
 
-The following example the Price column uses "C2" to display values in a currency format.
+In the following example, the Price column uses "C2" to display values in a currency format.
 
 {% highlight cshtml %}
 
 {% include_relative code-snippet/column/format.razor %}
 
-{% endhighlight %}
-
+{% endhighlight %} 
diff --git a/blazor/multicolumn-combobox/custom-value.md b/blazor/multicolumn-combobox/custom-value.md
index 6996523b5e..f7c5c0918e 100644
--- a/blazor/multicolumn-combobox/custom-value.md
+++ b/blazor/multicolumn-combobox/custom-value.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Adding Custom Value to Blazor MultiColumn ComboBox Component
 
-You can include custom values in the MultiColumn ComboBox component. If the entered character(s) are not found in the list, a button will appear in the popup menu. Clicking this button will add the custom character(s) to the existing list as a new item. By default, the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowCustom) property is set to `true`.
+Custom values can be added to the Blazor MultiColumn ComboBox when the typed value does not match any item in the list. In this case, an action button appears in the popup; selecting it adds the typed value as a new item to the current list. By default, the [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowCustom) property is set to `true`. To prevent adding custom values, set `AllowCustom` to `false`.
 
 **[Index.razor]**
 
@@ -46,7 +46,7 @@ You can include custom values in the MultiColumn ComboBox component. If the ente
         return base.OnInitializedAsync();
     }
 }
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BNrzNaLUIDqNTtMS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with custom value](./images/blazor-multicolumn-custom-value.gif)" %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/data-binding.md b/blazor/multicolumn-combobox/data-binding.md
index 8b31417339..be06b82d02 100644
--- a/blazor/multicolumn-combobox/data-binding.md
+++ b/blazor/multicolumn-combobox/data-binding.md
@@ -9,13 +9,22 @@ documentation: ug
 
 # Data Binding in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox can retrieve data from either local data sources or remote data services. To connect local data, use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property. For remote data binding, utilize the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+The MultiColumn ComboBox can retrieve data from either local data sources or remote data services. To connect local data, use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property with an IEnumerable-compatible source. For remote data, create a [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) instance configured with an adaptor and assign it to DataSource.
 
-* **TItem** - Specifies the type of the datasource of the MultiColumn ComboBox component.
+* **TItem** - Specifies the data model type for items in the MultiColumn ComboBox.
 
 ## Binding local data
 
-The MultiColumn ComboBox loads the data from local data sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property. It supports the data type of `Array of primitive type`, `Array of object`, `List of primitive type`,`List of object`, `Observable Collection`, `ExpandoObject`, `DynamicObject`.
+The MultiColumn ComboBox loads data from local sources through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property. Supported types include:
+- Array of primitive type
+- Array of object
+- List of primitive type
+- List of object
+- ObservableCollection
+- ExpandoObject
+- DynamicObject
+
+Ensure [TextField] and [ValueField] are set appropriately for your data model so display text and values are mapped correctly.
 
 {% highlight cshtml %}
 
@@ -27,7 +36,7 @@ The MultiColumn ComboBox loads the data from local data sources through the [Dat
 
 ## Index value binding
 
-Index value binding can be accomplished with the `bind-Index` attribute, which supports both integer and nullable integer types. This attribute allows you to bind values according to their corresponding index.
+Index value binding can be accomplished with the `bind-Index` attribute, which supports both integer and nullable integer types. This binds the selected item by its zero-based index in the current view. Sorting or filtering may change indices, which affects the bound value.
 
 ```cshtml
 
@@ -69,7 +78,7 @@ Index value binding can be accomplished with the `bind-Index` attribute, which s
 
 ### Expando object binding
 
-Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiColumn ComboBox component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
+Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiColumn ComboBox component. In the following example, an `ExpandoObject` collection of vehicles is bound. Set TextField and ValueField to the corresponding dynamic property names.
 
 {% highlight cshtml %}
 
@@ -81,7 +90,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Dynamic object binding
 
-Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiColumn ComboBox component. In the following example, the `DynamicObject` is bound to the collection of customer data.
+Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiColumn ComboBox component. In the following example, a `DynamicObject` collection of customers is bound. Ensure TextField and ValueField map to the dynamic members exposed at runtime.
 
 {% highlight cshtml %}
 
@@ -93,7 +102,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### ValueTuple data binding
 
-Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiColumn ComboBox component. The following code helps you to get a string value from the enumeration data by using `ValueTuple`
+Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiColumn ComboBox component. The following example retrieves a string value from enumeration data using `ValueTuple`. Map TextField/ValueField to the tuple members (for example, `Item1`, `Item2`) as used in the sample.
 
 {% highlight cshtml %}
 
@@ -105,17 +114,17 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 ## Binding remote data 
 
-The MultiColumn ComboBox loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property. 
+The MultiColumn ComboBox loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property when it is assigned a [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) instance.
 
-The MultiColumn ComboBox supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the MultiColumn ComboBox.
+The MultiColumn ComboBox supports retrieving data from remote services with the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started). Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to shape requests and fetch data, then bind the results to the component.
 
 * [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint. 
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor used to communicate with the service. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. Choose the adaptor based on your API (for example, ODataV4Adaptor, WebApiAdaptor, UrlAdaptor).
+* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides predefined adaptors designed to interact with specific service endpoints.
 
 ### OnActionBegin event
 
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionBegin) event triggers before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionBegin) event triggers before fetching data from the remote server. Use it to adjust the query, show a loading indicator, or log outgoing requests.
 
 {% highlight cshtml %}
 
@@ -127,7 +136,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult
 
 ### OnActionFailure event
 
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionFailure) event triggers when the data fetch request from the remote server fails. Handle this event to log errors, display user-friendly messages, or retry operations.
 
 {% highlight cshtml %}
 
@@ -139,7 +148,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mu
 
 ### OData v4 services
 
-The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
+The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from the `Customers` table of the `Northwind` data service.
 
 {% highlight cshtml %}
 
@@ -151,7 +160,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 ### Web API adaptor
 
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request. 
+The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API endpoints that follow OData conventions. The `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). The endpoint must recognize OData-formatted queries sent with the request.
 
 {% highlight cshtml %}
 
@@ -164,9 +173,9 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
 
 ### Offline mode
 
-To avoid post back for every action, set the MultiColumn ComboBox to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
+To avoid a postback for every action, load all data on initialization and process actions on the client side. Enable this behavior by setting the `Offline` property of `DataManager`. In offline mode, data is fetched once; filtering and searching then occur client side.
 
-The following example is for remote data binding and enabled offline mode.
+The following example demonstrates remote data binding with offline mode enabled.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multicolumn-combobox/filtering.md b/blazor/multicolumn-combobox/filtering.md
index c2b5c1046b..e75efd3c37 100644
--- a/blazor/multicolumn-combobox/filtering.md
+++ b/blazor/multicolumn-combobox/filtering.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Filtering in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox offers built-in functionality for filtering data items when the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowFiltering) option is enabled. The filtering action starts as soon as you begin typing in the search box. By default, the AllowFiltering property is set to `false`.
+The MultiColumn ComboBox offers built-in functionality for filtering data items when the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowFiltering) option is enabled. Filtering begins as the user types in the input field. By default, the AllowFiltering property is set to `false`.
 
 ## Local data
 
@@ -39,15 +39,15 @@ The following code illustrates the filtering capabilities using the [ODataAdapto
 
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_FilterType) property to specify how the input text is matched during filtering. The available filter types are:
 
 FilterType     | Description
 ------------ | -------------
-  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_Contains)      | Checks whether a value contained with specified value.
+  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_StartsWith)       | Checks whether a value begins with the specified text.
+  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_EndsWith)     | Checks whether a value ends with the specified text.
+  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilterType.html#Syncfusion_Blazor_MultiColumnComboBox_FilterType_Contains)      | Checks whether a value contains the specified text.
 
-In the following example, `EndsWith` filter type has been mapped to the `FilterType` property.
+In the following example, the `EndsWith` filter type is assigned to the `FilterType` property.
 
 {% highlight cshtml %}
 
@@ -102,7 +102,7 @@ The following example shows how to perform case-sensitive filter.
 
 ## Custom filtering
 
-The MultiColumn ComboBox dropdown component allows you to customize filter queries using the [`Filtering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Filtering) event. You can also filter data in multiple columns using the `FilterAsync` method in combination with the `Filtering` event.
+The MultiColumn ComboBox allows you to customize filter queries using the [`Filtering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Filtering) event. Multiple-column filtering can be implemented by composing predicates and applying them with the `FilterAsync` method in combination with the `Filtering` event.
 
 In the following example, the filter is configured to search based on both the `Name` and `Category` fields. The `Filtering` event uses a [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Condition) with an `or` condition to allow filtering across these fields.
 
@@ -120,11 +120,11 @@ For instance, if a data source item has a `Name` of "Smartwatch" and a `Category
 
 ## Prevent popup opening when filtering
 
-To prevent the MultiColumn ComboBox dropdown from opening when filtering is applied, you can use the [PopupOpeningEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupOpeningEventArgs_Cancel) argument in the [PopupOpeningEventArgs](hhttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#properties). The `PopupOpeningEventArgs.Cancel` argument is a boolean value that can be set to true to cancel the dropdown opening, or false to allow the dropdown to open.
+To prevent the MultiColumn ComboBox popup from opening while filtering is in progress, use the [PopupOpeningEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupOpeningEventArgs_Cancel) argument exposed in the [PopupOpeningEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#properties). Set `Cancel` to `true` to stop the popup from opening, or `false` to allow it.
 
-In the following example, the isTyped flag is used to track whether the filtering action is taking place. The `OnFiltering` method sets the flag to true when the filtering action starts, and the `OnBeforeOpen` method cancels the dropdown opening if the flag is set to true. Finally, the `OnBeforeOpen` method resets the flag to false to prepare for the next filtering action.
+In the following example, the `isTyped` flag tracks whether filtering is occurring. The `OnFiltering` method sets the flag to `true` when filtering starts, and the popup-opening handler (for example, `OnBeforeOpen`) cancels opening if the flag is `true`. The handler then resets the flag to `false` for the next interaction.
 
-> This will prevent the MultiColumn ComboBox dropdown from opening when filtering is applied, while still allowing the user to filter the items using the input field in the MultiColumn ComboBox.
+> This approach prevents the popup from opening during filtering while still allowing users to filter items through the input field.
 
 {% highlight cshtml %}
 
@@ -132,4 +132,4 @@ In the following example, the isTyped flag is used to track whether the filterin
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzNEhqqOUhpwzY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzNEhqqOUhpwzY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/form-validation.md b/blazor/multicolumn-combobox/form-validation.md
index 8fa64d99e3..62d14b298b 100644
--- a/blazor/multicolumn-combobox/form-validation.md
+++ b/blazor/multicolumn-combobox/form-validation.md
@@ -7,15 +7,15 @@ control: MultiColumn ComboBox
 documentation: ug
 ---
 
-# Form Validation in MultiColumn ComboBox
+# Form validation in MultiColumn ComboBox
 
-This demonstrates the creation of a form that includes a MultiColumn ComboBox, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted.
+This article demonstrates how to use the Blazor MultiColumn ComboBox in a validated form with Blazor’s `EditForm`. It covers binding to a model, applying data annotations, and showing validation messages so the form submits only when required fields are valid.
 
 ## MultiColumn ComboBox inside edit form
 
 The MultiColumn ComboBox component can be used inside an EditForm to create a form that includes a list for selecting an option. The `EditForm` component validates all data annotation rules using the `DataAnnotationsValidator` component.
 
-When the MultiColumn ComboBox input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.
+When the MultiColumn ComboBox input is valid, the form is ready to be submitted; if invalid, a validation message is shown until a valid value is selected.
 
 * The EditForm component wraps the entire form, has the Model attribute set to the model variable of type, and triggers the OnValidSubmit() method when the form is submitted.
 * The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties.
@@ -29,4 +29,4 @@ When the MultiColumn ComboBox input is valid, the form is ready to be submitted.
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/getting-started-with-web-app.md b/blazor/multicolumn-combobox/getting-started-with-web-app.md
index 0350d9a516..a7a7953b54 100644
--- a/blazor/multicolumn-combobox/getting-started-with-web-app.md
+++ b/blazor/multicolumn-combobox/getting-started-with-web-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor MultiColumn ComboBox Component in Web App
 
-This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 
 To get started quickly with Blazor MultiColumn ComboBox component, you can check the video below.
@@ -26,15 +26,17 @@ To get started quickly with Blazor MultiColumn ComboBox component, you can check
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumnComboBox and Themes NuGet in the Blazor Web App
 
-To add **Blazor MultiColumn ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor MultiColumn ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -47,7 +49,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -59,9 +61,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -75,11 +77,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumnComboBox and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -97,20 +97,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumnComboBox and Themes NuGet in the App
+
+Here's an example of how to add **Blazor MultiColumn ComboBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.MultiColumnComboBox/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.MultiColumnComboBox --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -121,9 +170,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` names
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -157,27 +208,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -198,7 +228,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumn ComboBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumn ComboBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiColumn ComboBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
@@ -270,7 +300,7 @@ After initialization, populate the MultiColumn ComboBox with data using the [Dat
 
 ## Configuring the Columns
 
-The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability.
+The MultiColumn ComboBox supports auto-generating columns from the data source. You can also customize the column header text, adjust [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Width) for optimal display, and set [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_TextAlign) (left, center, or right) to enhance readability.
 
 {% tabs %}
 {% highlight razor %}
@@ -290,7 +320,7 @@ The MultiColumn ComboBox supports auto-generating columns, which simplifies the
 
 ## Configuring the popup list
 
-By default, the width of the popup list automatically adjusts to match the width of the MultiColumn ComboBox input element, and the height is set to `350px`. Both the height and width of the popup list can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) properties, respectively.
+By default, the popup list width matches the input element width, and the height is `350px`. Customize the popup height and width using [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth).
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/multicolumn-combobox/grid-settings.md b/blazor/multicolumn-combobox/grid-settings.md
index 7febcc595c..d92bdc0527 100644
--- a/blazor/multicolumn-combobox/grid-settings.md
+++ b/blazor/multicolumn-combobox/grid-settings.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Setting the gridlines
 
-Grid lines refer to the visual lines displayed between rows and columns in a grid-like structure. You can customize how these lines appear by using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GridLines) property. This allows for control over the visibility of horizontal, vertical, both, or no grid lines at all. The default value is Default.
+Grid lines are the visual dividers shown between rows and columns in the popup’s grid layout. Configure their appearance using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GridLines) property to show horizontal lines, vertical lines, both, or none. The default value is `Default`.
 
 The following example configures the GridLines property to show both horizontal and vertical lines in the dropdown popup.
 
@@ -23,9 +23,9 @@ The following example configures the GridLines property to show both horizontal
 
 ## Setting alternate rows
 
-The [EnableAltRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_EnableAltRow) property controls whether the rows in the grid are styled with alternating colors. This property helps in improving readability by differentiating rows visually. When enabled, every other row will be rendered with a different style, while all rows will have the same styling if this property is disabled.
+The [EnableAltRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_EnableAltRow) property enables alternating row styles to improve readability. When enabled, every other row uses an alternate style; when disabled, all rows share the same style. The default value is `false`.
 
-The following example enables alternate row styling, where every other row will have a different style.
+The following example enables alternate row styling, where every other row has a different style.
 
 {% highlight cshtml %}
 
@@ -35,7 +35,7 @@ The following example enables alternate row styling, where every other row will
 
 ## Resizing the column
 
-The Column resizing allows users to adjust the width of columns in the MultiColumn ComboBox by dragging the edge of the column header. The [AllowColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowColumnResizing) property. This property is useful for providing flexibility in adjusting the grid layout based on user preferences.
+Column resizing lets users adjust column widths by dragging the edge of a column header. Enable this behavior with the [AllowColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowColumnResizing) property. This provides flexibility to tailor the popup layout to the data and available space.
 
 The following example enables column resizing, allowing users to adjust the width of the columns by dragging the header edges.
 
@@ -47,14 +47,13 @@ The following example enables column resizing, allowing users to adjust the widt
 
 ## TextWrap for header and content
 
-The TextWrap in the Blazor `MultiColumn ComboBox` ensures proper wrapping of text within both headers and data content. By enabling `EnableTextWrap`, you can manage how text appears when it exceeds the available space.
+Text wrapping ensures longer text in headers and cell content is displayed neatly within the available space. Enable wrapping with the `EnableTextWrap` property and configure behavior as needed.
 
-**Key features**
-* **TextWrapElement**: This is an enum(Header,Content ,Both) Defines the element where text wrapping is applied.
+Key features
+* TextWrapElement: enum (Header, Content, Both) that specifies where text wrapping is applied.
+* TextOverflowMode: enum (Ellipsis, EllipsisWithTooltip) that specifies how overflowed content is handled—truncate with an ellipsis or show an ellipsis with a tooltip.
 
-* **TextOverflowMode**:This is an enum(Ellipsis ,EllipsisWithTooltip) Defines truncates the cell content when it overflows its area.
-
-The following example enables text wrapping for the header in the Blazor MultiColumn ComboBox, ensuring that longer text is properly displayed without overflowing.
+The following example enables text wrapping for the header in the Blazor MultiColumn ComboBox, ensuring that longer text is displayed without overflowing.
 
 {% highlight cshtml %}
 
@@ -62,4 +61,4 @@ The following example enables text wrapping for the header in the Blazor MultiCo
 
 {% endhighlight %}
 
-![Blazor MultiColumn ComboBox with Text Wrap](./images/blazor_multicolumn_combobox_text_wrap.gif)
+![Blazor MultiColumn ComboBox with Text Wrap](./images/blazor_multicolumn_combobox_text_wrap.gif)
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/grouping.md b/blazor/multicolumn-combobox/grouping.md
index 4e6c0e21a9..d205b67c7e 100644
--- a/blazor/multicolumn-combobox/grouping.md
+++ b/blazor/multicolumn-combobox/grouping.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Grouping in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [GroupByField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GroupByField) field in the data table. 
+The Blazor MultiColumn ComboBox supports grouping items by a specified category. Use the [GroupByField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GroupByField) property to map the data field that provides the group key for each item.
 
-In the following sample, the product names are grouped according to their category using the [GroupByField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GroupByField) field.
+In the following example, product names are grouped by their category using the `GroupByField` property.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multicolumn-combobox/localization.md b/blazor/multicolumn-combobox/localization.md
index c86681bb55..d29b86eac7 100644
--- a/blazor/multicolumn-combobox/localization.md
+++ b/blazor/multicolumn-combobox/localization.md
@@ -7,8 +7,10 @@ control: MultiColumn ComboBox
 documentation: ug
 ---
 
-# Globalization and Localization in Blazor ComboBox Component
+# Globalization and Localization in Combobox Component
 
 ## Localization
 
-[Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) supports localization of built-in UI text (for example, messages such as “No records found” and “Action failure”). Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+
+Globalization is also supported. Dates, numbers, and other culture-sensitive values are formatted based on the current application culture. For guidance on configuring culture, number/date formats, and calendars, see the [Blazor globalization](https://blazor.syncfusion.com/documentation/common/globalization) documentation. For languages that read right-to-left, enable RTL rendering as described in [right-to-left support](../common/accessibility#right-to-left-support).
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/paging.md b/blazor/multicolumn-combobox/paging.md
index b2e53f52d8..becf3c0a73 100644
--- a/blazor/multicolumn-combobox/paging.md
+++ b/blazor/multicolumn-combobox/paging.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Paging in Blazor MultiColumn ComboBox component
 
-Paging provides an option to display data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
-
-To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the MultiColumn ComboBox. When paging is enabled, a pager component rendered at the bottom of the MultiColumn ComboBox popup, allowing you to navigate through different pages of data.
+Paging provides an option to display data in segmented pages, making it easier to navigate large datasets. To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowPaging) property to `true` (default is `false`). When paging is enabled, a pager component is rendered at the bottom of the MultiColumn ComboBox popup to navigate between pages. If the total records fit on a single page, the pager is hidden. Paging works with both local and remote data sources; when used with remote data, queries can be shaped to request only the current page of data.
 
 ## Customize the pager options
 
-Customizing the pager options in the Syncfusion<sup style="font-size:70%">&reg;</sup> MultiColumn ComboBox allows you to tailor the pagination control according to your specific requirements. You can customize the pager to display the number of pages using the  [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageCount)  property and display the number of records in the MultiColumn ComboBox using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageSize) property.
+Customize the pager to meet specific requirements using the following properties:
+- [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageCount): Number of page links displayed in the pager (default is `8`).
+- [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageSize): Number of records displayed per page (default is `12`).
 
 ### Change the page size
 
@@ -33,11 +33,11 @@ The following example demonstrates how to change the page size of a MultiColumn
 
 ### Change the page count
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> MultiColumn ComboBox allows you to adjust the number of pages displayed in the pager container. This is useful when you want to manage the number of pages you see while navigating through extensive datasets. The default value of **PageCount** property is 8.
+Adjust how many page links are visible in the pager using the `PageCount` property (default is `8`). Increasing the page count shows more page links at once; decreasing it shows fewer links and may require more navigation.
 
-To change the page count in the Syncfusion<sup style="font-size:70%">&reg;</sup> MultiColumn ComboBox, you can utilize the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageCount) property, which defines the number of pages displayed in the pager container.
+To change the page count in the Blazor MultiColumn ComboBox, use the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PageCount) property.
 
-The following example demonstrates how to change the page count of a Grid using an external button click based on **NumericTextBox** input.
+The following example demonstrates how to change the page count of a MultiColumn ComboBox using an external button click based on NumericTextBox input.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multicolumn-combobox/placeholder-and-floatlabel.md b/blazor/multicolumn-combobox/placeholder-and-floatlabel.md
index 5977dac01c..3ba9a2fb43 100644
--- a/blazor/multicolumn-combobox/placeholder-and-floatlabel.md
+++ b/blazor/multicolumn-combobox/placeholder-and-floatlabel.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Placeholder
 
-Utilize the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Placeholder) property to show a brief description of the expected input value. In the example below, assign `Select a game` to the `Placeholder` property, which will update the `Placeholder` attribute of the input element in the DOM accordingly.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Placeholder) property to display a short hint about the expected value when no selection has been made. In the following example, setting `Select a game` guides the user until an item is chosen.
 
 {% highlight cshtml %}
 
@@ -33,7 +33,9 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 ## Add mandatory indicator using placeholder
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+A visual mandatory indicator (*) can be appended to the floating placeholder label by targeting the `.e-float-text::after` CSS selector and setting the `content` style.
+
+For accessibility, pair this visual cue with semantic validation (for example, apply `[Required]` to the bound model property or set `aria-required="true"`) so assistive technologies convey the required state.
 
 {% highlight cshtml %}
 
@@ -45,17 +47,17 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
 
 ## Floating label
 
-Use the [FloatLabelType]() property to define how the floating label behaves in the DropDownList, allowing the `Placeholder` text to float above the TextBox. This functionality is relevant only when a `Placeholder` is present. The `FloatLabelType` depends on the `Placeholder` setting, with its default value being `Never`.
+Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html) property to control how the placeholder text floats as a label above the input. Floating labels work when a `Placeholder` is provided. The default is `Never`.
 
-The floating label supports the types of actions as follow.
+The floating label supports the following options.
 
 Type     | Description
 ------------ | -------------
-  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The floating label will float above the input after focusing, or entering a value in the input.
-  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The floating label will always float above the input.
-  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | By default, never float the label in the input when the placeholder is available.
+  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | Floats the label on focus or after a value is entered.
+  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | Always keeps the label floated above the input.
+  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | Never floats the label when a placeholder is available (default).
 
-The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
+The `FloatLabelType` set to `Auto` is demonstrated in the following example.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multicolumn-combobox/popup-setting.md b/blazor/multicolumn-combobox/popup-setting.md
index 89a2a9b478..fc900b9522 100644
--- a/blazor/multicolumn-combobox/popup-setting.md
+++ b/blazor/multicolumn-combobox/popup-setting.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Popup Setting in Syncfusion Blazor MultiColumn ComboBox
+title: Popup settings in Syncfusion Blazor MultiColumn ComboBox
 description: Checkout and learn here all about Popup Setting in Syncfusion Blazor MultiColumn ComboBox component and much more.
 platform: Blazor
 control: MultiColumn ComboBox
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Change the popup width
 
-Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) property. If popup width unspecified, it sets based on the width of the MultiColumn ComboBox component.
+Customize the popup width using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) property. If `PopupWidth` is not specified, the popup width matches the MultiColumn ComboBox input width.
 
-In the following sample, the `PopupWidth` is set as `600px`.
+In the following example, `PopupWidth` is set to `600px`.
 
 {% highlight cshtml %}
 
@@ -25,9 +25,9 @@ In the following sample, the `PopupWidth` is set as `600px`.
 
 ## Change the popup height
 
-Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) property.
+Customize the popup height using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) property.
 
-In the following sample, the `PopupHeight` is set as `500px`.
+In the following example, `PopupHeight` is set to `500px`.
 
 {% highlight cshtml %}
 
@@ -39,13 +39,11 @@ In the following sample, the `PopupHeight` is set as `500px`.
 
 ## Change the popup z-index
 
-Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ZIndex) value of the component popup element.
-
-Defaults to `1000`
+Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ZIndex) value to control the popup’s stacking order relative to other overlays. The default `ZIndex` is `1000`. Increase it if the popup needs to appear above dialogs or other positioned elements.
 
 ## Show popup on initial loading
 
-You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) Event.
+Show the popup automatically when the component is initialized by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ShowPopupAsync) in the [`Created`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) event. Use a component reference to access the method.
 
 {% highlight Razor %}
 
@@ -53,11 +51,11 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 {% endhighlight %}
 
-![Blazor MultiColumn ComboBox with Show popup on initial loading](./images/popup-setting/blazor_multicolumn_combobox_show-popup-on-initial-loading.gif)
+![Blazor MultiColumn ComboBox showing popup on initial load](./images/popup-setting/blazor_multicolumn_combobox_show-popup-on-initial-loading.gif)
 
-## Preventing opening and closing
+## Prevent opening and closing
 
-Prevent the popup open and close in the event argument like [PopupOpeningEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupOpeningEventArgs_Cancel) and [PopupClosingEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupClosingEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupClosingEventArgs_Cancel) as `true`. It is achieved by the [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) and [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) events. 
+Prevent the popup from opening or closing by setting the event argument properties [PopupOpeningEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupOpeningEventArgs_Cancel) and [PopupClosingEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupClosingEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupClosingEventArgs_Cancel) to `true` in the corresponding [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) and [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) events. This is useful to enforce conditions (for example, read-only state or validation in progress).
 
 {% highlight Razor %}
 
@@ -71,7 +69,7 @@ The following events are used to trigger when opening and closing popup.
 
 ### PopupOpening event
 
-The [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) event triggers just before the popup opens. Cancel this event to keep the popup closed.
 
 {% highlight Razor %}
 
@@ -83,11 +81,11 @@ The [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Multi
 
 ### PopupOpened event
 
-The [PopupOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpened) event triggers when the popup opens.
+The [PopupOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpened) event triggers after the popup has opened.
 
 ### PopupClosing event
 
-The [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) event triggers just before the popup closes. Cancel this event to keep the popup open.
 
 {% highlight Razor %}
 
@@ -99,7 +97,7 @@ The [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Multi
 
 ### PopupClosed event
 
-The [PopupClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosed) event triggers after the popup has been closed.
+The [PopupClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosed) event triggers after the popup has closed.
 
 {% highlight Razor %}
 
@@ -111,7 +109,7 @@ The [PopupClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiC
 
 ## Popup height based on available space
 
-You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
+Adjust the popup height dynamically based on available viewport space by handling the window `resize` event and updating the popup height accordingly. Place the script in a layout or host page and ensure the element IDs in the script match the component instance.
 
 {% highlight Razor %}
 
@@ -139,4 +137,4 @@ You can achieve this by binding the `resize` event in window and update the heig
 </script>
 
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/selection.md b/blazor/multicolumn-combobox/selection.md
index b1bee695d6..9d12f51a5c 100644
--- a/blazor/multicolumn-combobox/selection.md
+++ b/blazor/multicolumn-combobox/selection.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Get selected value
 
-Retrieve the selected value from the MultiColumn ComboBox component during the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event by utilizing the [ValueChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_Value) property.
+Retrieve the selected value from the Blazor MultiColumn ComboBox during the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event by using the [ValueChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_Value) property. This event also provides both the current and previous values.
 
 {% highlight cshtml %}
 
@@ -21,7 +21,7 @@ Retrieve the selected value from the MultiColumn ComboBox component during the [
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBfXYhUKacoERWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-Retrieve the full object list corresponding to the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event by utilizing the [ValueChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_ItemData) property.
+Retrieve the full data object corresponding to the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event by using the [ValueChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_ItemData) property.
 
 {% highlight cshtml %}
 
@@ -33,7 +33,7 @@ Retrieve the full object list corresponding to the selected value in the [ValueC
 
 ## Preselected value on OnInitializedAsync
 
-To associate a pre-selected value with the MultiColumn ComboBox component, use the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. You can set the value property in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following example illustrates how to bind the value when the component is initially rendered.
+pre-selected value with the MultiColumn ComboBox component, use the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. You can set the value property in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following example illustrates how to bind the value when the component is initially rendered.
 
 {% highlight cshtml %}
 
@@ -45,7 +45,7 @@ To associate a pre-selected value with the MultiColumn ComboBox component, use t
 
 ## Programmatically change the selected value
 
-You can change the component's value either programmatically or externally via the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following example illustrates how to update the component's value when a button is clicked.
+Change the component's value either programmatically or externally via the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following example illustrates how to update the component's value when a button is clicked.
 
 {% highlight cshtml %}
 
@@ -57,7 +57,7 @@ You can change the component's value either programmatically or externally via t
 
 ### ValueChange event
 
-The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event is triggered when the value of the MultiColumn ComboBox component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event triggers when the value of the Blazor MultiColumn ComboBox changes and returns the necessary arguments, including the current and previously selected values and the selected item data.
 
 {% highlight cshtml %}
 
@@ -69,7 +69,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiC
 
 ### OnValueSelect event 
 
-The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnValueSelect) event is activated whenever a value is chosen in the DropDownList component. You can access the relevant arguments, including the [ValueSelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_ItemData). Additionally, you can prevent item selection by setting the [ValueSelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_Cancel) property to `true` within the event arguments.
+The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnValueSelect) event is raised when a value is chosen in the Blazor MultiColumn ComboBox. Access the selected data via [ValueSelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueSelectEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueSelectEventArgs_2_ItemData). To prevent selection, set [ValueSelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueSelectEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueSelectEventArgs_2_Cancel) to `true`.
 
 {% highlight cshtml %}
 
@@ -83,7 +83,7 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult
 
 Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. It binds the respective value present in the specified index position of the datasource.
 
-The following sample shows how to bind the index on the initial rendering.
+The following sample shows how to bind the index on initial rendering.
 
 {% highlight cshtml %}
 
@@ -115,7 +115,7 @@ Get the entire object belonging to the value selected in the component using the
 
 ## Focus the next component on selection
 
-Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_FocusAsync) public method. It will set focus instantly to the MultiColumn ComboBox component when invoking it. 
+Programmatically move focus using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_FocusAsync) method. This sets focus to the Blazor MultiColumn ComboBox when invoked.
 
 {% highlight cshtml %}
 
@@ -123,7 +123,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus
 
 {% endhighlight %}
 
-![Blazor ComboBox with Focus the next component on selection](./images/selection/blazor_combobox_focus-next-component.gif)
+![Blazor MultiColumn ComboBox focusing the next component on selection](./images/selection/blazor_combobox_focus-next-component.gif)
 
 <!-- ## Programmatically clear the selected value
 
@@ -137,7 +137,7 @@ To programmatically reset the value of the MultiColumn ComboBox, you can utilize
 
 ## Prevent reload on form submit
 
-To prevent the page from reloading when using the MultiColumn ComboBox component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked.
+When using the Blazor MultiColumn ComboBox inside a form, prevent a full page reload by setting the button’s type to `"button"` through the `HTMLAttributes` configuration for that button. This ensures clicks do not submit the form unless explicitly intended.
 
 {% highlight cshtml %}
 
@@ -171,7 +171,7 @@ While focusing and focus out the following event get triggered. -->
 
 ### Focus event
 
-The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Focus) event will trigger when the component gets focused. 
+The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Focus) event triggers when the component receives focus. 
 
 {% highlight cshtml %}
 
@@ -183,7 +183,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnC
 
 ### Blur event
 
-The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Blur) event will trigger when focus moves out from the component. 
+The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Blur) event triggers when focus moves out of the component.
 
 {% highlight cshtml %}
 
@@ -191,4 +191,4 @@ The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnCo
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTNYBKfNhYoGKt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTNYBKfNhYoGKt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/sorting.md b/blazor/multicolumn-combobox/sorting.md
index d7eaa8aca5..37a3af1f45 100644
--- a/blazor/multicolumn-combobox/sorting.md
+++ b/blazor/multicolumn-combobox/sorting.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Sorting in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox component provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the MultiColumn ComboBox, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**.
+The Blazor MultiColumn ComboBox provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowSorting) property to `true`.
 
-To sort a particular column in the MultiColumn ComboBox, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**.
+To sort a column, click its header. Each click toggles the sort direction between ascending and descending. Sort indicators on the headers reflect the current sort direction. In remote binding scenarios, sorting can be applied on the server via DataManager queries.
 
 {% tabs %}
 {% highlight razor %}
@@ -57,10 +57,10 @@ To sort a particular column in the MultiColumn ComboBox, click on its column hea
 
 ## Multi-column sorting
 
-The MultiColumn ComboBox component allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the MultiColumn ComboBox, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.
+The Blazor MultiColumn ComboBox allows sorting more than one column at a time. Enable multi-column sorting by setting both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowMultiSorting) to `true`. Then hold Ctrl and click additional column headers to add or modify sort levels.
 
-> * The `AllowSorting` must be **true** while enabling multi-column sort.
-> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting.
+> - `AllowSorting` must be `true` to enable multi-column sorting.
+> - Set `AllowMultiSorting` to `false` to disable multi-column sorting.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/multicolumn-combobox/style.md b/blazor/multicolumn-combobox/style.md
index 5dd3b0aaf5..201e1c1047 100644
--- a/blazor/multicolumn-combobox/style.md
+++ b/blazor/multicolumn-combobox/style.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and appearance in Blazor MultiColumn ComboBox Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+Use the following options and CSS hooks to customize the appearance and interaction states of the Blazor MultiColumn ComboBox. Add styles in a global stylesheet (or scoped CSS for the page/component) based on your project setup.
 
 ## Read-only mode
 
-Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ReadOnly) whether the MultiColumn ComboBox allows the user to change the value or not.
+Set the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ReadOnly) property to `true` to prevent users from changing the value while keeping the component focusable and interactive (for example, users can still focus and open the popup to view items).
 
 {% highlight cshtml %}
 
@@ -25,7 +25,7 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
 
 ## Disabled state
 
-Specify the boolean value to the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Disabled) property that indicates whether the component is disabled or not.
+Set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Disabled) property to `true` to make the component non-interactive and inaccessible via keyboard (removed from tab order). Disabled components do not trigger UI events.
 
 {% highlight cshtml %}
 
@@ -35,14 +35,13 @@ Specify the boolean value to the [Disabled](https://help.syncfusion.com/cr/blazo
 
 ## Applying custom CSS classes
 
-Specifies the CSS class name that can be appended to the root element of the MultiColumn ComboBox. One or more custom CSS classes can be added to a MultiColumn ComboBox.
+Apply one or more custom CSS classes to the root element using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_CssClass) property. These classes can be used to convey visual states or brand styling.
 
-Some of the possible values are:
-
-* `e-success`: Denotes the component in a success state, adding a green color to the ComboBox input field.
-* `e-warning`: Denotes the component in a warning state, adding an orange color to the ComboBox input field.
-* `e-error`: Denotes the component in an error state, adding a red color to the ComboBox input field.
-* `e-outline`: Supports only the material theme.
+Common examples:
+- `e-success`: Renders a success state (typically green accent) on the input.
+- `e-warning`: Renders a warning state (typically orange accent) on the input.
+- `e-error`: Renders an error state (typically red accent) on the input.
+- `e-outline`: Outline style support is specific to the Material theme.
 
 {% highlight Razor %}
 
@@ -52,7 +51,7 @@ Some of the possible values are:
 
 ## Customizing the disabled component’s text color
 
-You can customize the text color of a disabled component by targeting its CSS class `.e-input[disabled]`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
+Customize the text color for disabled inputs by targeting the `.e-input[disabled]` selector and setting the `-webkit-text-fill-color` (and related properties as needed) to your desired color.
 
 {% highlight cshtml %}
 
@@ -60,4 +59,4 @@ You can customize the text color of a disabled component by targeting its CSS cl
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/template.md b/blazor/multicolumn-combobox/template.md
index 8ecf9bef87..b93c980235 100644
--- a/blazor/multicolumn-combobox/template.md
+++ b/blazor/multicolumn-combobox/template.md
@@ -9,8 +9,8 @@ documentation: ug
 
 # Templates in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox has been provided with several options to customize each elements.
+The Blazor MultiColumn ComboBox supports templating options to customize specific UI elements without altering core behavior. Templates enable adding custom content and layout to improve clarity, branding, or usability.
 
 ## Header template
 
-The header element is shown statically at the top of the popup list items within the MultiColumn ComboBox, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_HeaderTemplate) property. For more details about the header template, please refer to this [link](https://blazor.syncfusion.com/documentation/multicolumn-combobox/column#header-template).
+The header is rendered at the top of the popup list and remains static while items are scrolled. Use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_HeaderTemplate) property to render custom content (such as titles, icons, or additional context) in the header area. For more information and examples, see the [header template documentation](https://blazor.syncfusion.com/documentation/multicolumn-combobox/column#header-template).
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/value-binding.md b/blazor/multicolumn-combobox/value-binding.md
index f80936217c..62b9c119c2 100644
--- a/blazor/multicolumn-combobox/value-binding.md
+++ b/blazor/multicolumn-combobox/value-binding.md
@@ -9,16 +9,18 @@ documentation: ug
 
 # Value Binding in MultiColumn ComboBox
 
-Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are.
+Value binding synchronizes the selected value between the Blazor MultiColumn ComboBox and the parent component. The control supports two binding approaches:
+- `@bind-Value` to bind the selected value
+- `@bind-Index` to bind by the zero-based item index
 
-* bind-Value Binding 
-* bind-Index Binding
+## Value binding
 
-## Bind value binding
+Bind the selected value using the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. Supported value types include primitives (such as `string`, `int`, `bool`, `enum`) and complex types. Ensure the bound value type aligns with the configured [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueField) and [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_TextField) mapping.
 
-Value binding can be accomplished using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute, which supports `string`, `int`, `enum`, `bool`, and `complex types`. When the component's value changes, it will impact all instances where the variable is bound using the `@bind-value` attribute. For the binding to function correctly, the value assigned to the `@bind-value` attribute should correspond to the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_TextField) and [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueField) mapped to the component.
+- `TValue`: Specifies the selected value type.
+- `TItem`: Specifies the data model type of each item.
 
-* **TValue** - Specifies the type of each list item on the suggestion list.
+When the component value changes, all places bound with the same variable are updated.
 
 {% highlight cshtml %}
 
@@ -54,11 +56,11 @@ In the example provided, the `Name` column is linked to the [ValueField](https:/
 
 ## Show or hide clear button
 
-Utilize the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ShowClearButton) property to control the visibility of the clear button. When the clear button is activated, the `Value`, `Text`, and `Index` properties will all revert to null.
+Control the clear button visibility using the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ShowClearButton) property. When the clear button is clicked, the `Value`, `Text`, and `Index` properties reset to `null`.
 
 N> If the TValue is a non-nullable type, pressing the clear button will reset it to the default value for that data type. Conversely, if TValue is a nullable type, pressing the clear button will set it to null. For instance, if TValue is defined as `int`, clearing it will assign a value of 0 to the component, whereas if TValue is defined as `int?`, it will assign a value of null.
 
-The following example illustrates the use of `string` as the TValue. Therefore, when the clear button is used, the value will be set to null, as that is the default for that type.
+The following example uses `string` as the `TValue`, so clearing sets the value to `null`.
 
 {% highlight cshtml %}
 
@@ -70,11 +72,11 @@ The following example illustrates the use of `string` as the TValue. Therefore,
 
 ## Dynamically change TItem
 
-The `TItem` property can be modified dynamically by specifying the datasource type of the MultiColumn ComboBox component using the `@typeparam` directive. The sample demonstration below illustrates how to dynamically change the `TItem` with various types of datasources.
+`TItem` can be changed dynamically by wrapping the MultiColumn ComboBox in a generic component that declares `@typeparam` parameters for `TValue` and `TItem`, and exposes parameters for the data source and bound value. The following sample demonstrates using a generic component to switch data types.
 
-### Creating generic MultiColumn Combobox component
+### Creating a generic MultiColumn ComboBox component
 
-First, create a `MultiColumnComboBox.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `<TItem>` and `TValue`.
+Create a `MultiColumnComboBox.razor` file that defines `@typeparam` for `TValue` and `TItem`, and exposes parameters for `customData` and `ComboBoxValue`.
 
 {% tabs %}
 {% highlight razor %}
@@ -100,11 +102,11 @@ First, create a `MultiColumnComboBox.razor` file as a parent component in the `/
 {% endhighlight %}
 {% endtabs %}
 
-### Usage of generic component with different type
+### Use the generic component with different types
 
-Then, render the Generic MultiColumn ComboBox component with the required `TValue` and `TItem` in the respective razor components. 
+Render the generic component with the required `TValue` and `TItem` in the corresponding Razor page.
 
-Here, the MultiColumn ComboBox component with TValue as an int nullable type in the `/Index.razor` file.
+Example: Use `int?` for `TValue` and a `Games` model for `TItem` in `Index.razor`.
 
 **[Index.razor]**
 
@@ -138,4 +140,4 @@ Here, the MultiColumn ComboBox component with TValue as an int nullable type in
 }
 
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/multicolumn-combobox/virtualization.md b/blazor/multicolumn-combobox/virtualization.md
index 736bc1a7ff..9084143a57 100644
--- a/blazor/multicolumn-combobox/virtualization.md
+++ b/blazor/multicolumn-combobox/virtualization.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Virtualization in Blazor MultiColumn ComboBox Component
 
-The MultiColumn ComboBox component includes a virtual scrolling feature designed to enhance UI performance, particularly for handling large datasets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_EnableVirtualization) option, the MultiColumn ComboBox intelligently manages data rendering, ensuring only a subset of items is initially loaded when the component is rendered. As you interact with the dropdown, additional items are dynamically loaded as you scroll, creating a smooth and efficient user experience.
+The Blazor MultiColumn ComboBox supports virtualization to improve performance with large datasets. When [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_EnableVirtualization) is enabled, the component initially renders only the items needed to fill the visible popup area. As the user scrolls, additional items are fetched and rendered on demand, creating smooth scrolling with reduced DOM size.
 
 This feature is applicable to both local and remote data scenarios, providing flexibility in its implementation. For instance, consider a case where the MultiColumn ComboBox is bound to a dataset containing 2000 items. Upon opening the dropdown, only a few items are loaded initially, based on the height of the popup. As you scroll through the list, additional items are fetched and loaded on-demand, allowing you to effortlessly explore the complete dataset.
 
@@ -31,4 +31,4 @@ This feature is applicable to both local and remote data scenarios, providing fl
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfjurUfXpSdkUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with virtualization](./images/blazor_multicolumn_combobox_remote-data-virtualization.gif)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfjurUfXpSdkUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with virtualization](./images/blazor_multicolumn_combobox_remote-data-virtualization.gif)" %}
diff --git a/blazor/multiselect-dropdown/accessibility.md b/blazor/multiselect-dropdown/accessibility.md
index 2a2c2f21a9..7e706aedd5 100644
--- a/blazor/multiselect-dropdown/accessibility.md
+++ b/blazor/multiselect-dropdown/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor MultiSelect Dropdown Component
 
-The [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component has been designed, keeping in mind the `WAI-ARIA` specifications, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+The [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component is designed in accordance with WAI-ARIA specifications and applies appropriate roles, states, and properties along with full keyboard support. It offers complete keyboard interaction and ARIA support to ensure usability for people who use assistive technologies or rely on keyboard navigation.
 
 The Blazor MultiSelect Dropdown component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
@@ -20,7 +20,7 @@ The accessibility compliance for the Blazor MultiSelect Dropdown component is ou
 | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Right-to-left support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
@@ -40,40 +40,40 @@ The accessibility compliance for the Blazor MultiSelect Dropdown component is ou
 
 ## WAI-ARIA attributes
 
-The Blazor MultiSelect Dropdown component uses the `Listbox` role, and each list item has an `option` role. The following `ARIA attributes` denotes the MultiSelect state:
+The Blazor MultiSelect Dropdown component follows the `Listbox` role, and each list item has an `option` role. The following `ARIA attributes` denotes the MultiSelect state:
 
 | **Properties** | **Functionalities** |
 | --- | --- |
-| aria-haspopup | Indicates whether the MultiSelect input element has a popup list or not. |
-| aria-expanded | Indicates whether the popup list has expanded or not. |
+| aria-haspopup | Indicates that the input has a popup listbox. |
+| aria-expanded | Indicates whether the popup list is expanded. |
 | aria-selected | Indicates the selected option. |
-| aria-readonly | Indicates the readonly state of the MultiSelect element. |
-| aria-disabled | Indicates whether the MultiSelect component is in disabled state or not. |
-| aria-activedescendent | This attribute holds the ID of the active list item  to focus its descendant child element. |
-| aria-owns | This attribute contains the ID of the popup list to indicate popup as a child element. |
+| aria-readonly | Indicates the read-only state of the MultiSelect element. |
+| aria-disabled | Indicates whether the MultiSelect component is disabled. |
+| aria-activedescendant | Holds the ID of the active list item to expose the focused descendant. |
+| aria-owns | Contains the ID of the popup list to reference it as a child when it is not a DOM descendant. |
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor MultiSelect Dropdown without interruptions:
+Use the following key shortcuts to access the Blazor MultiSelect Dropdown without interruptions:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Sets focus at the first item in the MultiSelect when no item is selected. Otherwise, moves focus next to the currently selected item. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus previous to the currently selected one. |
-| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down to the next page and set focus to the first item when popup list opens. |
-| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up to the previous page and set focus to the first item when popup list opens. |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in an close state the popup list opens. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
-| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Sets focus to the first item when no item is selected; otherwise moves focus to the next item. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the previous item. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Scrolls down one page and sets focus to the first visible item when the popup is open. |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Scrolls up one page and sets focus to the first visible item when the popup is open. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item; when closed, opens the popup list. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the tab order when the popup is closed; otherwise closes the popup and retains focus on the component. |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the tab order when the popup is closed; otherwise closes the popup and retains focus on the component. |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup list. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup list. |
-| <kbd>Esc(Escape)</kbd> | <kbd>Escape</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
+| <kbd>Escape</kbd> | <kbd>Escape</kbd> | Closes the popup list when open; the current selection remains unchanged. |
 | <kbd>Home</kbd> | <kbd>Home</kbd> | Sets focus to the first item. |
 | <kbd>End</kbd> | <kbd>End</kbd> | Sets focus to the last item. |
 
 ## Ensuring accessibility
 
-The Blazor MultiSelect Dropdown component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor MultiSelect Dropdown component's accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
 The accessibility compliance of the MultiSelect Dropdown component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/multiselect) in a new window to evaluate the accessibility of the MultiSelect Dropdown component with accessibility tools.
 
diff --git a/blazor/multiselect-dropdown/custom-value.md b/blazor/multiselect-dropdown/custom-value.md
index 193d2e65b1..a0801dc293 100644
--- a/blazor/multiselect-dropdown/custom-value.md
+++ b/blazor/multiselect-dropdown/custom-value.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Custom Value in Blazor MultiSelect Dropdown Component
 
-The MultiSelect allows the user to select and tag the typed custom value that is not present in the data source when you set the [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowCustomValue) as true. The selected custom value is added to the suggestion list alone. It will not affect the original data source. The `CustomValueSpecifier` event will trigger when you select or tag the typed custom value.
+The MultiSelect allows users to select and tag a typed custom value that is not present in the data source when [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowCustomValue) as true. The selected custom value is added to the suggestion list alone. It will not affect the original data source. The `CustomValueSpecifier` event will trigger when you select or tag the typed custom value.
 
-N> The `Value` field, `Text` field, and `Value` property must be of `string` type when you enable the custom value. For other types, you must provide the custom data for the typed custom value in the `CustomValueSpecifier` event. Find the details on [Value as non-string type](https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value#value-as-non-string-type) section. 
+N> The `Value` field, `Text` field, and `Value` property must be of `string` type when custom value is enabled. For other types, provide the custom data for the typed custom value in the `CustomValueSpecifier` event. Find the details on [Value as non-string type](https://blazor.syncfusion.com/documentation/multiselect-dropdown/custom-value#value-as-non-string-type) section. 
 
 {% highlight cshtml %}
 
@@ -19,15 +19,15 @@ N> The `Value` field, `Text` field, and `Value` property must be of `string` typ
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Custom Value](./images/blazor-multiselect-dropdown-custom-value.png)
+![Blazor MultiSelect Dropdown with custom value](./images/blazor-multiselect-dropdown-custom-value.png)
 
 ## Value as non-string type
 
-By default, the typed custom value is updated to both the Value and Text field of the custom data. If the TValue type is a non-`string` type, then you have to provide the custom data for the typed custom value in the `CustomValueSpecifier` event.
+By default, the typed custom value is used for both the Value and Text fields of the custom data. If the `TValue` type is a non-`string` type, provide the custom data for the typed value in the `CustomValueSpecifier` event.
 
-In the `CustomValueSpecifier` event, you will get the typed custom value in the `Text` argument of the event. Based on that text value, you should form the data for the custom value and set it to the `NewData` argument of the event.
+In the `CustomValueSpecifier` event, the typed custom text is available in the `Text` argument. Based on this text, construct the appropriate custom data and assign it to the event’s `NewData` argument.
 
-The following sample demonstrates configuration of custom value in `CustomValueSpecifier` event.
+The following sample demonstrates configuring custom value in the `CustomValueSpecifier` event.
 
 {% highlight cshtml %}
 
@@ -37,5 +37,4 @@ The following sample demonstrates configuration of custom value in `CustomValueS
 
 ## Limitation in Checkbox mode 
 
-The MultiSelect component supports adding custom values in various modes, including `Default`, `Box`, and `Delimiter`. However, in `Checkbox` mode, the input element is non-editable, preventing the addition of custom values. This limitation is due to the specific functionality of Checkbox mode, where the parent input field remains read-only. As a result, entering custom values is not supported in Checkbox mode, which is the default behavior of the component.
-
+The MultiSelect component supports adding custom values in `Default`, `Box`, and `Delimiter` modes. In `Checkbox` mode, the input element is non-editable, preventing the addition of custom values. This limitation is due to the read-only nature of the parent input in Checkbox mode, so entering custom values is not supported and is the intended behavior of the component.
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/data-binding.md b/blazor/multiselect-dropdown/data-binding.md
index 6e9944b500..3fe66e8c8c 100644
--- a/blazor/multiselect-dropdown/data-binding.md
+++ b/blazor/multiselect-dropdown/data-binding.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Data Binding in Blazor MultiSelect Dropdown Component
 
-The MultiSelect loads the data either from the local data sources or remote data services. Using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property,  bind the local data or using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), bind the remote data.
+The MultiSelect loads data from either local data sources or remote data services. Use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property to bind local data, or use the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) to bind remote data.
 
-* **TItem** - Specifies the type of the datasource of the multiselect component.
+* **TItem** - Defines the type of the items in the MultiSelect data source.
 
 ## Binding local data
 
@@ -27,7 +27,7 @@ The MultiSelect loads the data from local data sources through the [DataSource](
 
 ### DataBound event
 
-The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_DataBound) event triggers when the data source is populated in the popup list.
+The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_DataBound) event is triggered when the data source is populated in the popup list.
 
 {% highlight cshtml %}
 
@@ -37,9 +37,9 @@ The [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDown
 
 ### Primitive type
 
-Bind the data to the MultiSelect as an array or list of the `string`, `int`, `double` and `bool` type items.
+Bind data to the MultiSelect as an array or list of items of type `string`, `int`, `double`, or `bool`.
 
-The following code demonstrates array of string values to the MultiSelect component.
+The following example demonstrates binding an array of string values to the MultiSelect component.
 
 {% highlight cshtml %}
 
@@ -49,7 +49,7 @@ The following code demonstrates array of string values to the MultiSelect compon
 
 ![Blazor MultiSelect with Primitive string type](./images/data-binding/blazor_multiselect_primitive-type-string.png)
 
-The following code demonstrates array of integer values to the DropDownList component.
+The following example demonstrates binding an array of integer values to the MultiSelect component.
 
 {% highlight cshtml %}
 
@@ -57,13 +57,13 @@ The following code demonstrates array of integer values to the DropDownList comp
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Primitive int type](./images/data-binding/blazor_multiselect_primitive-type-int.png)
+![Blazor MultiSelect with primitive int type](./images/data-binding/blazor_multiselect_primitive-type-int.png)
 
 ### Complex data type
 
-The MultiSelect can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html) property.
+The MultiSelect can generate list items from an array of complex objects. Map the appropriate fields to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html) property.
 
-In the following example, `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value) field and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Text) field, respectively.
+In the following example, the `Code.ID` field and `Country.CountryID` field from the complex data are mapped to the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Text) fields, respectively.
 
 {% highlight cshtml %}
 
@@ -71,11 +71,11 @@ In the following example, `Code.ID` column and `Country.CountryID` column from c
 
 {% endhighlight %}
 
-![Binding Complext Items with Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-complex-item.png)
+![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.png)
 
 ### Expando object binding
 
-Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiSelect component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiSelect component. In the following example, the `ExpandoObject` is bound to a collection of vehicles.
 
 {% highlight cshtml %}
 
@@ -87,7 +87,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ### Observable collection binding
 
-Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the MultiSelect component. In the following example, the `Observable Data` is bound to a collection of colors data.
+Bind [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the MultiSelect component. In the following example, the `Observable Data` is bound to a collection of colors data.
 
 {% highlight cshtml %}
 
@@ -99,7 +99,7 @@ Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/comm
 
 ### Dynamic object binding
 
-Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiSelect component. In the following example, the `DynamicObject` is bound to the collection of customer data.
+Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiSelect component. In the following example, the `DynamicObject` is bound to  collection of customer data.
 
 {% highlight cshtml %}
 
@@ -107,11 +107,11 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 {% endhighlight %}
 
-![Blazor MultiSelect with dynamic object data binding](./images/blazor_multiselect_dynamic-object.png)
+![Blazor MultiSelect with DynamicObject data binding](./images/blazor_multiselect_dynamic-object.png)
 
 ### Enum data binding
 
-Convert the Enum data into a list of strings and bind it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property of the SfMultiSelect component to bind Enum types to the MultiSelect Dropdown component.
+Convert enum values into a list of strings and bind them to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property of the SfMultiSelect component to bind enum types to the MultiSelect Dropdown component.
 
 {% highlight cshtml %}
 
@@ -119,11 +119,11 @@ Convert the Enum data into a list of strings and bind it to the [DataSource](htt
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Enum data binding](./images/data-binding/blazor_multiselect_enum-data-binding.png)
+![Blazor MultiSelect with enum data binding](./images/data-binding/blazor_multiselect_enum-data-binding.png)
 
 ### ValueTuple data binding
 
-Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiSelect component. The following code helps you to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiSelect component. The following example shows how to obtain a string value from enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
 
 {% highlight cshtml %}
 
@@ -131,20 +131,20 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown ValueTuple Data](./images/blazor-multiselect-dropdown-valuetuple.png)
+![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.png)
 
 
 ## Binding remote data 
 
-The MultiSelect supports the retrieval of data from the remote data services with the help of the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) control. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the MultiSelect.
+The MultiSelect supports retrieving data from remote services by using the [DataManager](https://blazor.syncfusion.com/documentation/data/getting-started) component. Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property to fetch data from the server and bind it to the MultiSelect.
 
 * [DataManager.Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) - Defines the service endpoint to fetch data.
-* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Defines the adaptor option. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used for remote binding. The adaptor is responsible for processing responses and requests from or to the service endpoint. 
-* [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides some predefined adaptors that are designed to interact with particular service endpoints.
+* [DataManager.Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) - Specifies the adaptor. By default, the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is used when a URL is provided; choose an adaptor that matches your service endpoint.
+* The [Syncfusion.Blazor.Data](https://www.nuget.org/packages/Syncfusion.Blazor.Data/) package provides predefined adaptors designed to interact with specific service endpoints.
 
 ### OnActionBegin event
 
-The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionBegin) event triggers before fetching data from the remote server.
+The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionBegin) event is triggered before fetching data from the remote server.
 
 {% highlight cshtml %}
 
@@ -154,7 +154,7 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ### OnActionComplete event
 
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
+The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionComplete) event is triggered after data is successfully fetched from the remote server.
 
 {% highlight cshtml %}
 
@@ -164,7 +164,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D
 
 ### OnActionFailure event
 
-The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
+The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnActionFailure) event is triggered when the data fetch request fails.
 
 {% highlight cshtml %}
 
@@ -174,7 +174,7 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ### OData v4 services
 
-The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
+The [OData v4 adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from the `Customers` table of the `Northwind` data service.
 
 {% highlight cshtml %}
 
@@ -182,11 +182,11 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 {% endhighlight %}
 
-![Blazor MultiSelect with OData v4 Adaptor](./images/data-binding/blazor_multiselect_odata-v4-services.png)
+![Blazor MultiSelect with OData v4 adaptor](./images/data-binding/blazor_multiselect_odata-v4-services.png)
 
 ### Web API adaptor
 
-The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API created under OData standards. The `WebApiAdaptor` is extended from the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). Hence to use the `WebApiAdaptor`, the endpoint should understand the OData formatted queries sent along with the request. 
+The [Web API adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is used to interact with Web API endpoints that follow OData conventions. The `WebApiAdaptor` extends the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor). To use `WebApiAdaptor`, the endpoint must understand OData-formatted queries sent with the request.
 
 {% highlight cshtml %}
 
@@ -194,15 +194,15 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Web API Data](./images/blazor-multiselect-dropdown-web-api-data.png)
+![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.png)
 
 ### Custom adaptor
 
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the MultiSelect component.
+The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) supports custom adaptors to perform manual operations on data. This can be used to implement custom data binding and editing operations in the MultiSelect component.
 
-For implementing custom data binding in MultiSelect, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+For custom data binding in the MultiSelect, use the `DataAdaptor` class. This abstract class acts as the base for a custom adaptor.
 
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor.
+The `DataAdaptor` abstract class provides synchronous and asynchronous method signatures that can be overridden in the custom adaptor.
 
 ```csharp
 public abstract class DataAdaptor
@@ -219,9 +219,9 @@ public abstract class DataAdaptor
 }
 ```
 
-The custom data binding can be performed in the MultiSelect component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
+Custom data binding can be performed in the MultiSelect component by providing the custom adaptor class and overriding the Read or ReadAsync method of the `DataAdaptor` abstract class.
 
-The following sample code demonstrates implementing custom data binding using custom adaptor.
+The following example demonstrates implementing custom data binding using a custom adaptor.
 
 {% highlight cshtml %}
 
@@ -231,9 +231,9 @@ The following sample code demonstrates implementing custom data binding using cu
 
 ### Offline mode
 
-To avoid post back for every action, set the MultiSelect to load all data on initialization and make the actions process in client-side. To enable this behaviour, use the `Offline` property of `DataManager`.
+To avoid a postback for every action, load all data during initialization and process actions on the client. To enable this behavior, set the `Offline` property of `DataManager` to true.
 
-The following example is for remote data binding and enabled offline mode.
+The following example demonstrates remote data binding with offline mode enabled.
 
 {% highlight cshtml %}
 
@@ -241,15 +241,15 @@ The following example is for remote data binding and enabled offline mode.
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown in Offline Mode](./images/blazor-multiselect-dropdown-web-api-data.png)
+![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.png)
 
 ## Entity Framework
 
-Follow these steps to consume data from the [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the MultiSelect component.
+Follow these steps to consume data from [Entity Framework](https://blazor.syncfusion.com/documentation/common/data-binding/bind-entity-framework) in the MultiSelect component.
 
 #### Create DBContext class
 
-The first step is to create a DBContext class called `OrderContext` to connect to a Microsoft SQL Server database.
+Create a DbContext class named `OrderContext` to connect to a Microsoft SQL Server database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -278,7 +278,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Create data access layer to perform data operation
 
-Now, create a class named `OrderDataAccessLayer`, which act as data access layer for retrieving the records from the database table.
+Create a class named `OrderDataAccessLayer` that acts as the data access layer for retrieving records from the database table.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -312,7 +312,7 @@ namespace EFDropDown.Shared.DataAccess
 
 #### Creating web API controller
 
-A Web API Controller has to be created which allows MultiSelect directly to consume data from the Entity framework.
+Create a Web API controller that allows the MultiSelect to consume data directly from Entity Framework.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -359,7 +359,7 @@ namespace EFDropDown.Controllers
 
 ### Configure MultiSelect component using Web API adaptor
 
-Now, configure the MultiSelect using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
+Configure the MultiSelect by using the [SfDataManager](https://blazor.syncfusion.com/documentation/data/getting-started) to interact with the created Web API and consume the data appropriately. To interact with web API, use the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor).
 
 {% highlight cshtml %}
 
@@ -369,7 +369,7 @@ Now, configure the MultiSelect using the [SfDataManager](https://blazor.syncfusi
 
 ## Adding new items
 
-Add the new item in the popup with the help of [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) public method. This method will add a mentioned item in the MultiSelect popup without affecting the data source items.
+Add new items to the popup by using the [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_AddItemsAsync_System_Collections_Generic_IEnumerable__0__System_Nullable_System_Int32__) method. This method adds the specified items to the MultiSelect popup without modifying the data source.
 
 {% highlight cshtml %}
 
@@ -377,11 +377,11 @@ Add the new item in the popup with the help of [AddItemsAsync](https://help.sync
 
 {% endhighlight %}
 
-![Blazor MultiSelect with adding new Item](./images/data-binding/blazor_multiselect_add-new-item.png)
+![Blazor MultiSelect with adding new item](./images/data-binding/blazor_multiselect_add-new-item.png)
 
 ## Customizing the Change Event
 
-MultiSelect component by default fires the `Change event` when the component loses focus. However, if you want the Change event to be fired every time a value is selected or removed, disable the [EnabledChangeOnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableChangeOnBlur) property. This will make the Change event be fired on every value selection and removal instead of just when the component loses focus. The default value of `EnableChangeOnBlur` is `true.`
+By default, the MultiSelect fires the Change event when the component loses focus. To fire the Change event whenever a value is selected or removed, set the [EnableChangeOnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableChangeOnBlur) property to false. The default value of `EnableChangeOnBlur` is `true`.
 
 {% highlight Razor %}
 
@@ -391,7 +391,7 @@ MultiSelect component by default fires the `Change event` when the component los
 
 ## Get Data by value
 
-You can retrieve the selected value from the dropdown list by using the `GetDataByValue(TValue)` method through an instance of the dropdown list. You can bind the click event of a button to the `GetDataByValue(TValue)` method of the dropdown list instance. When the button is clicked, it will trigger the `GetDataByValue(TValue)` method on the dropdown list and return the selected value.
+Retrieve the data item corresponding to a specified value by using the `GetDataByValue(TValue)` method from an instance of the MultiSelect. For example, bind a button click to call `GetDataByValue(TValue)` on the component instance and return the item data for that value.
 
 {% highlight Razor %}
 
@@ -401,10 +401,10 @@ You can retrieve the selected value from the dropdown list by using the `GetData
 
 ## Get List Item
 
-You can retrieve the list items from the dropdown list by using the `GetItemsAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `GetItemsAsync()` method of the dropdown list instance. When the button is clicked, it will trigger the `GetItemsAsync()` method on the dropdown list and return the list items
+Retrieve the list items from the dropdown list by using the `GetItemsAsync()` method through an instance of the dropdown list. You can bind the click event of a button to the `GetItemsAsync()` method of the dropdown list instance. When the button is clicked, it will trigger the `GetItemsAsync()` method on the dropdown list and return the list items.
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/data-binding/getItemsAsync-method.razor %}
 
-{% endhighlight %} 
\ No newline at end of file
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/data-source.md b/blazor/multiselect-dropdown/data-source.md
index 26a6722055..5defb8e2c3 100644
--- a/blazor/multiselect-dropdown/data-source.md
+++ b/blazor/multiselect-dropdown/data-source.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Data Source in Blazor MultiSelect Dropdown Component
 
-The MultiSelect loads the data either from local data sources or remote data services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. It supports the data type of `array` or [DataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.DataManager.html).
+The MultiSelect loads data from local collections or remote services using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Local data can be an array, list, or any IEnumerable. Remote data is bound via [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
 
-The MultiSelect also supports different kinds of data services such as OData, OData V4, and Web API, and data formats such as XML, JSON, and JSONP with the help of [DataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.DataManager.html) adaptors.
+The MultiSelect also supports various data services such as OData, OData v4, and Web API, and data formats including XML, JSON, and JSONP by using [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) adaptors.
 
 | Fields | Type | Description |
 |------|------|-------------|
@@ -20,7 +20,7 @@ The MultiSelect also supports different kinds of data services such as OData, OD
 | GroupBy |  `string` | Specifies the category under which the list item has to be grouped. |
 | IconCss |  `string` | Specifies the icon class of each list item. |
 
-N> When binding complex data to the MultiSelect, fields should be mapped correctly. Otherwise, the selected item remains undefined.
+N> When binding complex data to the MultiSelect, fields must be mapped correctly. Otherwise, the selected item remains undefined.
 
 ## Binding local data
 
@@ -73,13 +73,13 @@ In the following example, `Name` column from complex data have been mapped to th
 }
 ```
 
-![Binding Blazor MultiSelect DropDown Items](./images/blazor-multiselect-dropdown-binding-items.png)
+![Binding Blazor MultiSelect Dropdown items](./images/blazor-multiselect-dropdown-binding-items.png)
 
 ### Array of complex object
 
-The MultiSelect can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html) property.
+The MultiSelect can generate its list items from an array of complex data. Map the appropriate fields to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html) property.
 
-In the following example, `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the `Value` field and `Text` field, respectively.
+In the following example, the `Code.ID` field and `Country.CountryID` field from complex data are mapped to the `Value` and `Text` fields, respectively.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -120,13 +120,13 @@ public List<Complex> LocalData { get; set; } = new Complex().GetData();
 }
 ```
 
-![Binding Complext Items with Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-complex-item.png)
+![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.png)
 
 ## Binding remote data
 
-The MultiSelect supports retrieval of data from remote data services with the help of `DataManager` component. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the MultiSelect.
+The MultiSelect supports retrieving data from remote services by using the `DataManager` component. The [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the server and bind it to the MultiSelect.
 
-The following sample displays the first 6 contacts from **Customers** table of the `Northwind` Data Service.
+The following sample displays the first six orders from the `Orders` table of the `Northwind` OData v4 service.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -157,11 +157,11 @@ The following sample displays the first 6 contacts from **Customers** table of t
 }
 ```
 
-![Blazor MultiSelect DropDown with Data Binding](./images/blazor-multiselect-dropdown-with-data-binding.png)
+![Blazor MultiSelect Dropdown with data binding](./images/blazor-multiselect-dropdown-with-data-binding.png)
 
 ### Web API Adaptor
 
-Use the `WebApiAdaptor` to bind MultiSelect with Web API created using OData.
+Use the `WebApiAdaptor` to bind the MultiSelect with Web API endpoints that follow OData conventions.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -185,15 +185,15 @@ Use the `WebApiAdaptor` to bind MultiSelect with Web API created using OData.
 }
 ```
 
-![Blazor MultiSelect DropDown with Web API Data](./images/blazor-multiselect-dropdown-web-api-data.png)
+![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.png)
 
 ### Custom Adaptor
 
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows to perform manual operations on the data. This can be utilized for implementing custom data binding and editing operations in the MultiSelect component.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support that allows manual operations on data. This can be used to implement custom data binding and editing operations in the MultiSelect component.
 
-For implementing custom data binding in MultiSelect, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
+For custom data binding in the MultiSelect, use the `DataAdaptor` class. This abstract class acts as a base class for the custom adaptor.
 
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures which can be overridden in the custom adaptor.
+The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures that can be overridden in the custom adaptor.
 
 ```csharp
 public abstract class DataAdaptor
@@ -266,7 +266,7 @@ The custom data binding can be performed in the MultiSelect component by providi
 
 ### Offline mode
 
-To avoid post back for every action, set the MultiSelect to load all data on initialization and make the actions process in client-side. To enable this behaviour, use the `Offline` property of `DataManager`.
+To avoid a postback for every action, load all data during initialization and process actions on the client. To enable this behavior, use the `Offline` property of `DataManager`.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
@@ -290,11 +290,11 @@ To avoid post back for every action, set the MultiSelect to load all data on ini
 }
 ```
 
-![Blazor MultiSelect DropDown in Offline Mode](./images/blazor-multiselect-dropdown-web-api-data.png)
+![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.png)
 
 ### ValueTuple data binding
 
-You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiSelect component. The following code helps to get a string value from the enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
+Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0) data to the MultiSelect component. The following code shows how to get a string value from enumeration data by using [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple-2?view=net-8.0).
 
 ```csharp
 
@@ -307,11 +307,11 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
 
 ```
 
-![Blazor MultiSelect DropDown ValueTuple Data](./images/blazor-multiselect-dropdown-valuetuple.png)
+![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.png)
 
 ## Binding ExpandoObject
 
-You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiSelect component. The following example `ExpandoObject` is bound to the collection of vehicles data.
+Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-8.0) data to the MultiSelect component. In the following example, `ExpandoObject` is bound to a collection of vehicles.
 
 ```csharp
 
@@ -338,11 +338,11 @@ You can bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ```
 
-![Blazor MultiSelect with expando object data binding](./images/blazor_multiselect_expando-object.png)
+![Blazor MultiSelect with ExpandoObject data binding](./images/blazor_multiselect_expando-object.png)
 
 ## Binding DynamicObject
 
-You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiSelect component. The following example `DynamicObject` is bound to the collection of customers data.
+Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-8.0) data to the MultiSelect component. In the following example, `DynamicObject` is bound to a collection of customers.
 
 ```csharp
 
@@ -392,7 +392,7 @@ You can bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system
 
 ## Binding ObservableCollection
 
-You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the MultiSelect component. The following example `Observable Data` is bound to a collection of colors data.
+Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-8.0) data to the MultiSelect component. The following example `Observable Data` is bound to a collection of colors data.
 
 ```csharp
 
@@ -435,11 +435,11 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api
 
 ## Entity Framework
 
-You need to follow the below steps to consume data from the **Entity Framework** in the MultiSelect component.
+Follow these steps to consume data from the **Entity Framework** in the MultiSelect component.
 
 ### Create DBContext class
 
-The first step is to create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database.
+Create a DBContext class called **OrderContext** to connect to a Microsoft SQL Server database.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -468,7 +468,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Create data access layer to perform data operation
 
-Now, create a class named **OrderDataAccessLayer**, which acts as data access layer for retrieving the records from the database table.
+Create a class named **OrderDataAccessLayer** that acts as the data access layer for retrieving records from the database table.
 
 ```csharp
 using Microsoft.EntityFrameworkCore;
@@ -502,7 +502,7 @@ namespace EFDropDown.Shared.DataAccess
 
 ### Creating Web API Controller
 
- A Web API Controller has to be created which allows MultiSelect directly to consume data from the Entity framework.
+A Web API controller must be created to allow the MultiSelect to consume data directly from Entity Framework.
 
 ```csharp
 using EFDropDown.Shared.DataAccess;
@@ -549,7 +549,7 @@ namespace EFDropDown.Controllers
 
 ### Configure MultiSelect component using Web API adaptor
 
-Now, the MultiSelect can be configured using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
+Now, the MultiSelect can be configured using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with a Web API, use `WebApiAdaptor`.
 
 ```cshtml
 @using Syncfusion.Blazor.Data
diff --git a/blazor/multiselect-dropdown/events.md b/blazor/multiselect-dropdown/events.md
index efe90a6ab3..793191b9ba 100644
--- a/blazor/multiselect-dropdown/events.md
+++ b/blazor/multiselect-dropdown/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor MultiSelect Component
 
-This section explains the list of events of the MultiSelect component which will be triggered for appropriate MultiSelect actions.
+This section lists the events available in the Blazor MultiSelect Dropdown component and when they are triggered during user interactions.
 
 ## Blur
 
-`Blur` event triggers when the input loses focus.
+The `Blur` event is triggered when the input loses focus. Typical uses include validation and committing changes.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -46,7 +46,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## ValueChange
 
-`ValueChange` event triggers when the MultiSelect value is changed.
+The `ValueChange` event is triggered when the MultiSelect value changes due to selection or removal actions.
 
 ```cshtml
 
@@ -81,7 +81,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Closed
 
-`Closed` event triggers after the popup has been closed.
+The `Closed` event is triggered after the popup is closed and is useful for post-close logic.
 
 ```cshtml
 
@@ -89,7 +89,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Created
 
-`Created` event triggers when the component is created.
+The `Created` event is triggered after the component has been initialized. Use it for one-time setup.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -122,7 +122,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Destroyed
 
-`Destroyed` event triggers when the component is destroyed.
+The `Destroyed` event is triggered when the component is disposed. Use it for cleanup logic.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -155,7 +155,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Focus
 
-`Focus` event triggers when the input gets focus.
+The `Focus` event is triggered when the input gains focus. Use it to customize focus behavior.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -188,7 +188,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnOpen
 
-`OnOpen` event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The `OnOpen` event is triggered before the popup opens. This event is cancelable; cancel it to keep the popup closed.
 
 ```cshtml
 
@@ -196,7 +196,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnClose
 
-`OnClose` event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The `OnClose` event is triggered before the popup closes. This event is cancelable; cancel it to keep the popup open.
 
 ```cshtml
 
@@ -205,7 +205,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## DataBound
 
-`DataBound` event triggers when the data source is populated in the popup list.
+The `DataBound` event is triggered when the data source has been populated in the popup list.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -238,7 +238,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Filtering
 
-`Filtering` event triggers on typing a character in the filter bar when the AllowFiltering is enabled.
+The `Filtering` event is triggered while typing in the filter bar when `AllowFiltering` is enabled. Use it to customize filtering logic.
 
 ```cshtml
 
@@ -273,7 +273,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnActionBegin
 
-`OnActionBegin` event triggers before fetching data from the remote server.
+The `OnActionBegin` event is triggered before a remote data request is sent. Use it to modify queries or parameters.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -311,7 +311,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnActionFailure
 
-`OnActionFailure` event triggers when the data fetch request from the remote server fails.
+The `OnActionFailure` event is triggered when a remote data request fails. Use it for error handling and logging.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -349,7 +349,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnValueSelect
 
-`OnValueSelect` event triggers when a user selects an item in the popup using the mouse or keyboard navigation.
+The `OnValueSelect` event is triggered when a user selects an item in the popup using the mouse or keyboard.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -382,7 +382,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Opened
 
-`Opened` event triggers when the popup opens.
+The `Opened` event is triggered after the popup has opened. Use it to run logic that requires rendered popup content.
 
 ```cshtml
 
@@ -390,7 +390,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## ChipSelected
 
-`ChipSelected` event triggers when the chip is selected.
+The `ChipSelected` event is triggered when a value chip is selected in the input area (chip mode).
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -424,7 +424,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## Cleared
 
-`Cleared` event triggers after clearing all items using the clear icon.
+The `Cleared` event is triggered after clearing all selected items using the clear icon.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -457,7 +457,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnChipTag
 
-`OnChipTag` event triggers before setting the selected item as chip in the component.
+The `OnChipTag` event is triggered before the selected item is displayed as a chip in the input area. Use it to customize tagging behavior.
 
 ```cshtml
 @using Syncfusion.Blazor.DropDowns
@@ -490,7 +490,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## OnValueRemove
 
-`OnValueRemove` event triggers before the selected item is removed from the widget.
+The `OnValueRemove` event is triggered before a selected item is removed from the component. Use it to intercept and optionally prevent removal.
 
 ```cshtml
 
@@ -524,7 +524,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## ValueRemoved
 
-`ValueRemoved` event triggers after the selected item is removed from the widget.
+The `ValueRemoved` event is triggered after a selected item is removed from the component.
 
 ```cshtml
 
@@ -558,7 +558,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## CustomValueSpecifier
 
-`CustomValueSpecifier` event triggers when the CustomValue is selected.
+The `CustomValueSpecifier` event is triggered when a custom value is selected while `AllowCustomValue` is enabled. Use it to provide custom item data.
 
 ```cshtml
 
@@ -592,7 +592,7 @@ This section explains the list of events of the MultiSelect component which will
 
 ## SelectedAll
 
-`SelectedAll` event triggers after the select all process is completed.
+The `SelectedAll` event is triggered after the select-all operation completes (CheckBox mode with ShowSelectAll).
 
 ```cshtml
 
@@ -624,4 +624,4 @@ This section explains the list of events of the MultiSelect component which will
 }
 ```
 
-N> MultiSelect is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
+N> The MultiSelect currently provides the events listed above. Additional events may be added in future releases based on user requests. If a required event is missing, submit a request using the Syncfusion Blazor feedback portal: [Request a feature](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/filtering.md b/blazor/multiselect-dropdown/filtering.md
index 84f68e1088..33ca4b85f1 100644
--- a/blazor/multiselect-dropdown/filtering.md
+++ b/blazor/multiselect-dropdown/filtering.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Filtering in Blazor MultiSelect Dropdown Component
 
-The MultiSelect has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowFiltering) is enabled. The filter operation starts as soon as you start typing characters in the search box. Default value of AllowFiltering is `false`.
+The MultiSelect provides built-in filtering when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowFiltering) is enabled. Filtering begins as the user types in the search box. The default value of AllowFiltering is `false`.
 
 ## Local data
 
-The following code demonstrates the filtering functionality with local data in the MultiSelect component.
+The following example demonstrates filtering with local data in the MultiSelect component.
 
 {% highlight cshtml %}
 
@@ -21,13 +21,13 @@ The following code demonstrates the filtering functionality with local data in t
 
 {% endhighlight %}
 
-![Filtering in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-filtering.png)
+![Filtering in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-filtering.png)
 
 ## Remote data
 
-For Remote data, each key press, filter action request is made at the server end.
+For remote data, each keystroke triggers a server query for filtering (subject to debounce settings). Use an adaptor such as [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) along with the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property to perform server-side filtering. For best performance, combine remote filtering with debounce or a minimum character length.
 
-The below code demonstrates the filtering functionality with [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) in the MultiSelect component with help of [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property.
+The following example demonstrates remote filtering using OData.
 
 {% highlight cshtml %}
 
@@ -37,7 +37,8 @@ The below code demonstrates the filtering functionality with [ODataAdaptor](http
 
 ## Debounce delay
 
-You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
+Use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_DebounceDelay) property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. To disable this feature entirely, can set it to 0ms.
+
 
 {% highlight cshtml %}
 
@@ -45,19 +46,19 @@ You can use the [DebounceDelay](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with DebounceDelay in filtering](./images/filtering/blazor_multiselect_debounce-delay.gif)
+![Blazor MultiSelect Dropdown with DebounceDelay in filtering](./images/filtering/blazor_multiselect_debounce-delay.gif)
 
 ## Filter type
 
-You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
+Use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_FilterType) property to specify how search text is matched against item text.
 
 FilterType     | Description
 ------------ | -------------
-  [StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith)       | Checks whether a value begins with the specified value.
-  [EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith)     | Checks whether a value ends with specified value.
-  [Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains)      | Checks whether a value contained with specified value.
+[StartsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith) | Checks whether the value starts with the specified text.
+[EndsWith](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith) | Checks whether the value ends with the specified text.
+[Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains) | Checks whether the value contains the specified text.
 
-In the following example, `EndsWith` filter type has been mapped to the `FilterType` property.
+In the following example, the `EndsWith` filter type is configured using the `FilterType` property.
 
 {% highlight cshtml %}
 
@@ -65,13 +66,13 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Filter Type](./images/filtering/blazor_MultiSelect_filter-type.png)
+![Blazor MultiSelect with filter type](./images/filtering/blazor_MultiSelect_filter-type.png)
 
 ## Case sensitive filtering
 
-The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).
+Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). Specify the [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) option in the [Where](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_) clause to control case sensitivity.
 
-The following example shows how to perform case-sensitive filter.
+The following example shows case-sensitive filtering.
 
 {% highlight cshtml %}
 
@@ -79,9 +80,9 @@ The following example shows how to perform case-sensitive filter.
 
 {% endhighlight %}
 
-## Filter Textbox Placeholder 
+## Filter text box placeholder 
 
-Accepts the value to be displayed as a watermark text on the filter bar. [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FilterBarPlaceholder) is applicable when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowFiltering) is set as `true` in the checkbox mode. `FilterBarPlaceholder` is depends on `AllowFiltering` in checkbox mode.
+Display watermark text in the filter bar by using the [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FilterBarPlaceholder) property. This applies when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowFiltering) is set to `true` in CheckBox mode.`FilterBarPlaceholder` is depends on `AllowFiltering` in checkbox mode.
 
 {% highlight Razor %}
 
@@ -89,11 +90,11 @@ Accepts the value to be displayed as a watermark text on the filter bar. [Filter
 
 {% endhighlight %} 
 
-![Blazor MultiSelect DropDown with FilterBarPlaceholder property](./images/filtering/blazor_multiselect_filterBarPlaceholder-property.png)
+![Blazor MultiSelect Dropdown with FilterBarPlaceholder property](./images/filtering/blazor_multiselect_filterBarPlaceholder-property.png)
 
 ## Custom Filtering
 
-The MultiSelect component filter queries can be customized. You can also use your own filter libraries to filter data like Fuzzy search.
+The MultiSelect filtering query can be customized through the Filtering event. Custom filter libraries (for example, fuzzy search) can also be integrated.
 
 {% highlight cshtml %}
 
@@ -103,9 +104,9 @@ The MultiSelect component filter queries can be customized. You can also use you
 
 ## Minimum filter length
 
-When filtering the list items, you can set the limit for character count to raise a remote request and fetch filtered data on the MultiSelect. This can be done by manual validation by using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Filtering) event handler.
+To control when remote filtering occurs, validate the minimum number of characters before sending a query by using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_Text) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Filtering) event handler.
 
-In the following example, the remote request does not fetch the search data until the search key contains three characters.
+In the following example, a remote request is not made until the search text contains at least three characters.
 
 {% highlight cshtml %}
 
@@ -113,5 +114,4 @@ In the following example, the remote request does not fetch the search data unti
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Minimum filter length](./images/filtering/blazor_MultiSelect_minimum-filter-length.gif)
-
+![Blazor MultiSelect with minimum filter length](./images/filtering/blazor_MultiSelect_minimum-filter-length.gif)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/form-validation.md b/blazor/multiselect-dropdown/form-validation.md
index e1a1a50e38..8b32b86629 100644
--- a/blazor/multiselect-dropdown/form-validation.md
+++ b/blazor/multiselect-dropdown/form-validation.md
@@ -11,15 +11,15 @@ documentation: ug
 
 ## Edit form validation
 
-The MultiSelect component can be used inside an EditForm to create a form that includes a list for selecting an option. The `EditForm` component validates all data annotation rules using the `DataAnnotationsValidator` component.
+The MultiSelect component can be used inside an EditForm to build a form that supports selecting multiple values. The `EditForm` component validates data annotation rules via the `DataAnnotationsValidator` component.
 
-When the MultiSelect input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.
+When the MultiSelect input is valid, the form can be submitted. If the input is invalid, a validation message is displayed until a valid value is provided.
 
-* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type Countries, and triggers the handleSubmit() method when the form is submitted.
-* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties.
-* The ValidationSummary component displays a summary of all validation errors on the form.
-* The ValidationMessage component displays a validation error message for the Name property of the model variable.
-* The submit button submits the form and triggers the handleSubmit() method when clicked.
+- The `EditForm` wraps the form, sets the `Model` parameter to a model instance, and wires up the form submit handler.
+- The `DataAnnotationsValidator` enables validation based on data annotation attributes applied to model properties.
+- The `ValidationSummary` displays a summary of all validation errors in the form.
+- The `ValidationMessage` displays a validation error message for the property bound to the MultiSelect.
+- The submit button submits the form and invokes the configured submit handler.
 
 {% highlight cshtml %}
 
@@ -27,13 +27,13 @@ When the MultiSelect input is valid, the form is ready to be submitted. If the i
 
 {% endhighlight %}
 
-![Blazor MultiSelect inside editform](./images/form-validation/blazor_multiselect_inside-editform.png)
+![Blazor MultiSelect inside EditForm](./images/form-validation/blazor_multiselect_inside-editform.png)
 
 ## Selection Limit
 
 The number of selectable items in the MultiSelect component can be limited by setting the [MaximumSelectionLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_MaximumSelectionLength) property.
 
-In the example below, the selection limit is set to three items, and the MultiSelect component displays the selected items in CheckBox mode.
+In the following example, the selection limit is set to three items, and the MultiSelect component displays the selected items in CheckBox mode.
 
 {% highlight cshtml %}
 
@@ -41,4 +41,4 @@ In the example below, the selection limit is set to three items, and the MultiSe
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Limit Selection in CheckBox](./images/blazor-multiselect-dropdown-limit-selection.png)
\ No newline at end of file
+![Blazor MultiSelect Dropdown with limit selection in CheckBox mode](./images/blazor-multiselect-dropdown-limit-selection.png)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/getting-started-webapp.md b/blazor/multiselect-dropdown/getting-started-webapp.md
index 9c558da42e..b49aac3b33 100644
--- a/blazor/multiselect-dropdown/getting-started-webapp.md
+++ b/blazor/multiselect-dropdown/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor MultiSelect DropDown in Web App
 
-This section briefly explains about how to include [Blazor MultiSelect DropDown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
+This section briefly explains about how to include [Blazor MultiSelect DropDown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor MultiSelect DropDown]
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
 
 ![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor MultiSelect DropDown** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor MultiSelect DropDown** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -56,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -74,7 +74,7 @@ cd BlazorWebApp.Client
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,7 +92,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -128,13 +128,13 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
 Here's an example of how to add **Blazor MultiSelect DropDown** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -146,7 +146,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -169,7 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)" %}
 
@@ -261,7 +261,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 ## Binding data source
 
-After initialization, populate the MultiSelect with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the MultiSelect component. `TItem` specifies the type of the Datasource in MultiSelect.
+After initialization, populate the MultiSelect using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the component, and `TItem` specifies the data type. Display and value fields are mapped via `MultiSelectFieldSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -298,9 +298,9 @@ After initialization, populate the MultiSelect with data using the [DataSource](
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the MultiSelect input element's width, and the height auto adjust's according to the height of the popup list items.
+By default, the popup list width adjusts to the MultiSelect input width, and the height adjusts to the number of items.
 
-The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+Customize the popup size by setting [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_PopupWidth).
 
 {% tabs %}
 {% highlight razor %}
@@ -316,7 +316,7 @@ The height and width of the popup list can also be customized using the [PopupHe
 
 ## Get selected value
 
-Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
+Handle the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multiselect-dropdown/getting-started-with-maui-app.md b/blazor/multiselect-dropdown/getting-started-with-maui-app.md
index 0c36259af2..1015f7fec4 100644
--- a/blazor/multiselect-dropdown/getting-started-with-maui-app.md
+++ b/blazor/multiselect-dropdown/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor MultiSelect DropDown Component
 
-This section explains you through the step-by-step process of integrating the Syncfusion® Blazor MultiSelect DropDown component into your Blazor Maui app using both Visual Studio and Visual Studio Code.
+This guide walks through integrating the Syncfusion Blazor MultiSelect Dropdown component into a .NET MAUI Blazor app using Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -17,15 +17,18 @@ This section explains you through the step-by-step process of integrating the Sy
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For details, see the .NET MAUI installation guide for Visual Studio or use the Syncfusion Blazor Extension.
+
+- .NET MAUI installation for Visual Studio: https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin
+- Syncfusion Blazor Extension: https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the app
 
-To add **Blazor MultiSelect DropDown**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the Blazor MultiSelect Dropdown component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +39,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available in NuGet. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -44,11 +47,14 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio Code/.NET CLI. For details, see the .NET MAUI installation guide for Visual Studio Code or use the Syncfusion Blazor Extension.
+
+- .NET MAUI installation for VS Code: https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code
+- Syncfusion Blazor Extension: https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project
 
 ## Create a new Blazor MAUI App in Visual Studio Code
 
-You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Blazor DropDowns and Themes NuGet in the App
 
@@ -74,7 +80,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -125,7 +131,7 @@ namespace MauiBlazorWindow;
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html**.
 
 ```html
 <head>
@@ -141,7 +147,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor MultiSelect DropDown component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -153,23 +159,23 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect Drop
 
 ### How to Run the Sample on Windows
 
-Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
+Run the sample on Windows to launch the .NET MAUI Blazor app.
 
-![Blazor MultiSelect DropDown Component](./images/blazor-multiselect-dropdown-maui-app.png)
+![Blazor MultiSelect Dropdown Component](./images/blazor-multiselect-dropdown-maui-app.png)
 
 ### How to Run the Sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor MultiSelect Dropdown in a .NET MAUI Android app using the Android Emulator, follow these steps:
 
-Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
+- Install and launch the Android emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If any errors occur while using the Android Emulator, see Troubleshooting Android Emulator: https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting.
 
-![Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)
+![Blazor MultiSelect Dropdown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)
 
 ## Binding data source
 
-After initialization, populate the MultiSelect with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the MultiSelect component. `TItem` specifies the type of the Datasource in MultiSelect.
+After initialization, populate the MultiSelect using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the component and `TItem` specifies the data type. Display and value fields are mapped via `MultiSelectFieldSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -202,7 +208,7 @@ After initialization, populate the MultiSelect with data using the [DataSource](
 {% endhighlight %}
 {% endtabs %}
 
-![Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.png)
+![Data Binding in Blazor MultiSelect Dropdown](./images/blazing-fast-multiselect-dropdown-data-binding.png)
 
 ## Configure the popup list
 
@@ -220,11 +226,11 @@ The height and width of the popup list can also be customized using the [PopupHe
 {% endhighlight %}
 {% endtabs %}
 
-![Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.png)
+![Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.png)
 
 ## Get selected value
 
-Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
+Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multiselect-dropdown/getting-started-with-server-app.md b/blazor/multiselect-dropdown/getting-started-with-server-app.md
index 37ed7709aa..c2c0c00820 100644
--- a/blazor/multiselect-dropdown/getting-started-with-server-app.md
+++ b/blazor/multiselect-dropdown/getting-started-with-server-app.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor MultiSelect DropDown Component
 
-This section briefly explains about how to include [Blazor MultiSelect DropDown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
+This section explains how to include the [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in a Blazor Server app using Visual Studio, Visual Studio Code, or the .NET CLI.
 
-To get start quickly with Blazor MultiSelect DropDown, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiSelectDropDown) sample:
+To get started quickly with the Blazor MultiSelect Dropdown, see this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiSelectDropDown):
 
 {% tabcontents %}
 
@@ -23,11 +23,11 @@ To get start quickly with Blazor MultiSelect DropDown, you can check on this [Gi
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+Create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [this Blazor Server app getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor MultiSelect DropDown** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add **Blazor MultiSelect DropDown** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -50,9 +50,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server app getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,9 +67,9 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure the working directory contains the project `.csproj`.
+- Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To verify the installed version, run the following command:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -103,7 +103,7 @@ dotnet --version
 
 ## Create a Blazor Server App using .NET CLI
 
-Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following commands to create a new Blazor Server app:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,7 +114,7 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor Server app in a directory named `BlazorApp`. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
@@ -138,7 +138,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 ```cshtml
 
@@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below:
+Theme stylesheets and scripts are served via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from the installed NuGet packages. Add the stylesheet in the <head> and the script at the end of the <body> in App.razor:
 
 ```html
 <head>
@@ -217,7 +217,7 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
 
 ## Binding data source
 
-After initialization, populate the MultiSelect with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the MultiSelect component. `TItem` specifies the type of the Datasource in MultiSelect.
+After initialization, populate the MultiSelect using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the component, and `TItem` specifies the data type. Display and value fields are mapped via `MultiSelectFieldSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -272,7 +272,7 @@ The height and width of the popup list can also be customized using the [PopupHe
 
 ## Get selected value
 
-Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
+Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
 {% highlight cshtml %}
 
diff --git a/blazor/multiselect-dropdown/getting-started.md b/blazor/multiselect-dropdown/getting-started.md
index 137219fbff..a0e2d2ebaf 100644
--- a/blazor/multiselect-dropdown/getting-started.md
+++ b/blazor/multiselect-dropdown/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor MultiSelect DropDown Component
 
-This section briefly explains about how to include [Blazor MultiSelect DropDown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI.
+This guide explains how to add the [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component to a Blazor WebAssembly app using Visual Studio, Visual Studio Code, or the .NET CLI.
 
-To get started quickly with Blazor MultiSelect DropDown component in the Blazor WebAssembly App, you can check the or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiSelectDropDown).
+To get started quickly with the Blazor MultiSelect Dropdown in a Blazor WebAssembly app, see the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiSelectDropDown).
 
 {% tabcontents %}
 
@@ -23,11 +23,11 @@ To get started quickly with Blazor MultiSelect DropDown component in the Blazor
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-To add **Blazor MultiSelect DropDown** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor MultiSelect Dropdown component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -50,9 +50,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application by running the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -67,9 +67,9 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure the working directory contains the project `.csproj`.
+- Run the following commands to install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), then restore packages.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To verify the installed version, run the following command:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -103,7 +103,7 @@ dotnet --version
 
 ## Create a Blazor WebAssembly App using .NET CLI
 
-Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following commands to create a new Blazor WebAssembly app:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor WebAssembly app in a directory named `BlazorApp`. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DropDowns and Themes NuGet in the App
 
-Here's an example of how to add **Blazor MultiSelect DropDown** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+Install the Blazor MultiSelect Dropdown component using the following commands to add [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -130,7 +130,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete list of packages and component details.
 
 {% endtabcontent %}
 
@@ -138,7 +138,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.DropDowns` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -175,7 +175,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html**.
 
 ```html
 <head>
@@ -191,7 +191,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor MultiSelect component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect DropDown component in the **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -207,7 +207,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor MultiSelect Drop
 
 ## Binding data source
 
-After initialization, populate the MultiSelect with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. Here, an array of string values is passed to the MultiSelect component. `TItem` specifies the type of the Datasource in MultiSelect.
+After initialization, populate the MultiSelect using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In the following example, a list of objects is bound to the component, and `TItem` specifies the data type. Display and value fields are mapped via `MultiSelectFieldSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -244,9 +244,9 @@ After initialization, populate the MultiSelect with data using the [DataSource](
 
 ## Configure the popup list
 
-By default, the width of the popup list automatically adjusts according to the MultiSelect input element's width, and the height auto adjust's according to the height of the popup list items.
+By default, the popup list width automatically adjusts to the MultiSelect input width, and the height auto-adjusts to the number of items.
 
-The height and width of the popup list can also be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_PopupWidth) properties respectively.
+Customize the popup size by setting [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_PopupWidth).
 
 {% tabs %}
 {% highlight razor %}
@@ -258,11 +258,11 @@ The height and width of the popup list can also be customized using the [PopupHe
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.png)" %}
 
 ## Get selected value
 
-Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
+Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
 {% highlight cshtml %}
 
@@ -274,4 +274,4 @@ Get the selected value of the MultiSelect component in the [ValueChange](https:/
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/grouping.md b/blazor/multiselect-dropdown/grouping.md
index 30d20c9e7a..cb747bce90 100644
--- a/blazor/multiselect-dropdown/grouping.md
+++ b/blazor/multiselect-dropdown/grouping.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Grouping in Blazor MultiSelect Dropdown Component
 
-The MultiSelect supports wrapping of the nested elements into a group based on different categories. The category of each list item can be mapped through the [MultiSelectFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy) field in the data table. The group header is displayed both as inline and fixed headers. The fixed group header content is updated dynamically on scrolling the popup list with its category value.
+The MultiSelect supports grouping list items by category. Map the category field of each item to the [MultiSelectFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy) property. Group headers appear inline and also as fixed headers. The fixed group header updates dynamically while scrolling to reflect the current group.
 
-To get started quickly with grouping in the Blazor MultiSelect Dropdown component, you can check the video below.
+To get started quickly with grouping in the Blazor MultiSelect Dropdown component, refer to the following video:
 
 {% youtube "https://www.youtube.com/watch?v=9PRq4u-t2Yw" %}
 
-In the following sample, vegetables are grouped according to their category using the `MultiSelectFieldSettings.GroupBy` field.
+In the following sample, vegetables are grouped by category using the `MultiSelectFieldSettings.GroupBy` field.
 
 {% highlight cshtml %}
 
@@ -23,18 +23,18 @@ In the following sample, vegetables are grouped according to their category usin
 
 {% endhighlight %}
 
-![Grouping in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-grouping.png)
+![Grouping in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-grouping.png)
 
 ## Fixed group header
 
-Classify the items based on the [MultiSelectFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy) field mapped to the control. The headers of group items will be fixed at the top till their belonging items ends up on scrolling.
+Classify items by mapping a category field to [MultiSelectFieldSettings.GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy). Group headers remain fixed at the top of the popup while scrolling through their corresponding group items and update when the next group begins.
 
 ## Group header template
 
-The group header title under which appropriate sub-items are categorized is customize with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_GroupTemplate) property. This template is common for both inline and floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_HeaderTemplate).
+Customize the group header title (used for both inline and floating headers) with the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_GroupTemplate) property. The same template content is used for the floating group [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_HeaderTemplate).
 
 ## Limitations of grouping
 
-Grouping feature has some limitations. These are:
+Grouping has the following limitation:
 
-* The component will support only single level of grouping, and you cannot specify it as like TreeView component.
\ No newline at end of file
+* Only a single level of grouping is supported (nested or hierarchical grouping, as in TreeView, is not available).
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/localization.md b/blazor/multiselect-dropdown/localization.md
index d253cdfd20..d8be5c76ee 100644
--- a/blazor/multiselect-dropdown/localization.md
+++ b/blazor/multiselect-dropdown/localization.md
@@ -7,22 +7,21 @@ control: MultiSelect Dropdown
 documentation: ug
 ---
 
-# Globalization and Localization in Blazor MultiSelect Dropdown Component
+# Globalization and Localization in Multiselect Dropdown
 
 ## Localization
 
-[Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
-
+The [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown) supports localization of built-in UI text (for example, select all, no records, clear). Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) documentation to configure culture files and resource keys for Syncfusion components.
 ## Globalization
 
-### Enable RTL mode
+### Enable right-to-left (RTL) mode
 
-The direction can be switched to right to left when specfies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as `true`. Writing systems like Arabic, Hebrew, and more will require `EnableRtl` property.
+The direction can be switched to right to left when specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as `true`. Writing systems like Arabic, Hebrew, and more will require `EnableRtl` property.
 
-Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as a boolean value that indictes to enable or disable rendering component in the right to left direction. Writing systems will require Arabic, Hebrew, and more. The direction can be switched to right-to-left.
+Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_EnableRtl) as a boolean value that indicts to enable or disable rendering component in the right to left direction. Writing systems will require Arabic, Hebrew, and more. The direction can be switched to right-to-left.
 
 {% highlight Razor %}
 
 {% include_relative code-snippet/localization/enableRtl-property.razor %}
 
-{% endhighlight %} 
\ No newline at end of file
+{% endhighlight %}
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/multicolumn.md b/blazor/multiselect-dropdown/multicolumn.md
index a22304f003..542dc839f7 100644
--- a/blazor/multiselect-dropdown/multicolumn.md
+++ b/blazor/multiselect-dropdown/multicolumn.md
@@ -9,16 +9,16 @@ documentation: ug
 
 # Multicolumn MultiSelect Dropdown
 
-Provide two or more columns in the popup by using the class name `e-multi-column` to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass) property  and the column will be aligned like grid.
+Display two or more columns in the popup by applying the `e-multi-column` class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass) property. This organizes item content into a grid-like layout within each list item.
 
-* [ItemTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates#item-template) – Using `ItemTemplate`, add the columns in the popup.
-* [ValueTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates#value-template) – Using `ValueTemplate`, display the value of which columns to be updated.
+- [ItemTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates#item-template) – Use `ItemTemplate` to define the columns rendered for each item in the popup.
+- [ValueTemplate](https://blazor.syncfusion.com/documentation/multiselect-dropdown/templates#value-template) – Use `ValueTemplate` to control how the selected value (chips/input) is displayed based on the defined columns.
 
-Display the custom text alignment in each column using a built-in class like in the following code example:
+Use the built-in utility classes below to control text alignment within each column:
 
-* `e-text-center`: Displays the text in the center of the column.
-* `e-text-right`: Displays the text in the right side of the column.
-* `e-text-left`: Displays the text in the left side of the column.
+- `e-text-center`: Centers the text in the column.
+- `e-text-right`: Right-aligns the text in the column.
+- `e-text-left`: Left-aligns the text in the column.
 
 {% highlight cshtml %}
 
@@ -26,11 +26,11 @@ Display the custom text alignment in each column using a built-in class like in
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Multicolumn](./images/multicolumn/blazor_multiselect_multicolumn.png)
+![Blazor MultiSelect with multicolumn](./images/multicolumn/blazor_multiselect_multicolumn.png)
 
-## How to Display MultiColumn Item and CheckBox Inline
+## How to display multicolumn item and CheckBox inline
 
-To ensure the checkbox and item details are aligned perfectly on the same line, you can apply the following CSS styles. These styles position the checkbox within the template, making it inline with the item details:
+To align the checkbox and item details on the same line within a templated item, apply the following CSS. These styles position the checkbox so it appears inline with the item content:
 
  ```css
     .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
@@ -40,6 +40,7 @@ To ensure the checkbox and item details are aligned perfectly on the same line,
    }
 ```
 
-## Limitation of multicolumn multiselect dropdown
+## Limitations of multicolumn layout
 
-The component will not support column filtering and sorting, and the column will be aligned as same as grid.
+- Column-level features such as filtering and sorting are not supported.
+- The multicolumn layout visually aligns fields in a grid-like manner but does not provide a full data grid feature set.
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/multiple-selection-display-mode.md b/blazor/multiselect-dropdown/multiple-selection-display-mode.md
index e4d0c9e1db..8b8418a162 100644
--- a/blazor/multiselect-dropdown/multiple-selection-display-mode.md
+++ b/blazor/multiselect-dropdown/multiple-selection-display-mode.md
@@ -11,13 +11,11 @@ documentation: ug
 
 ## Basic modes
 
-The MultiSelect component has a various render modes are available to visualize selected items in the MultiSelect.
+The MultiSelect component provides multiple display modes to visualize selected items:
 
-Render modes are listed here below,
-
-* `Default`: By default, the selected items are displayed as chip type when the component is in focus. Otherwise, selected items are displayed with a delimiter character.
-* `Box`: The selected items are displayed as a chip (box) type in the MultiSelect input box.
-* `Delimiter`: The selected items are displayed with a delimiter character in the MultiSelect input box.
+- `Default`: Selected items are displayed as chip type when the component is in focus. Otherwise, selected items are displayed with a delimiter character.
+- `Box`: The selected items are displayed as a chip (box) type in the MultiSelect input box.
+- `Delimiter`: The selected items are displayed with a delimiter character in the MultiSelect input box.
 
 ## Box mode
 
@@ -29,13 +27,13 @@ In Box mode, selected values are displayed as chips (boxes) within the MultiSele
 
 {% endhighlight %}
 
-![Blazor MultiSelect with box mode](./images/blazor-multiselect-dropdown-with-box.png)
+![Blazor MultiSelect Dropdown with box mode](./images/blazor-multiselect-dropdown-with-box.png)
 
 ### Show the chip remove icon based on conditions
 
-The chip cancel (remove) icon in the MultiSelect component can be shown or hidden based on specific conditions by using the [OnChipTag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnChipTag) event. The [TaggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.TaggingEventArgs-1.html) argument provides the [SetClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.TaggingEventArgs-1.html#Syncfusion_Blazor_DropDowns_TaggingEventArgs_1_SetClass) property, which allows assigning a custom CSS class to items.  By applying a specific CSS class, you can hide the cancel icon for selected items through CSS styling.
+The chip cancel (remove) icon can be shown or hidden conditionally by using the [OnChipTag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnChipTag) event. The [TaggingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.TaggingEventArgs-1.html) argument provides the [SetClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.TaggingEventArgs-1.html#Syncfusion_Blazor_DropDowns_TaggingEventArgs_1_SetClass) property to assign a custom CSS class to selected chips. Apply a CSS rule for that class to hide the cancel icon for specific items.
 
-In the example below, we hide the cancel icon for both "Badminton" and "Cricket" items.
+In the example below, the cancel icon is hidden for the "Badminton" and "Cricket" items.
 
 {% highlight cshtml %}
 
@@ -43,11 +41,11 @@ In the example below, we hide the cancel icon for both "Badminton" and "Cricket"
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with remove icon based on condition](./images/blazor-multiselect-dropdown-chip-remove-icon.png)
+![Blazor MultiSelect Dropdown with conditional chip remove icon](./images/blazor-multiselect-dropdown-chip-remove-icon.png)
 
-## Checkbox mode
+## CheckBox mode
 
-To get started quickly with Checkbox mode in the Blazor MultiSelect Dropdown component, you can check the video below.
+To get started quickly with CheckBox mode in the Blazor MultiSelect Dropdown component, watch the following video:
 
 {% youtube "https://www.youtube.com/watch?v=SvpRCnmo9Dk" %}
 
@@ -61,11 +59,11 @@ To use checkbox, inject the `CheckBoxSelection` module in the MultiSelect.
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with CheckBox](./images/blazor-multiselect-dropdown-with-checkbox.png)
+![Blazor MultiSelect Dropdown with CheckBox mode](./images/blazor-multiselect-dropdown-with-checkbox.png)
 
 ## Grouping checkbox
 
-You can arrange the datasource items by grouping them with checkbox mode in MultiSelect. Clicking the checkbox in group will select all the items grouped under it. Click the MultiSelect element and then type the character in the search box. It will display the filtered list items based on the typed characters and then select the multiple values through the checkbox.
+Arrange the data source items by grouping them with checkbox mode in MultiSelect. Clicking the checkbox in group will select all the items grouped under it. Click the MultiSelect element and then type the character in the search box. It will display the filtered list items based on the typed characters and then select the multiple values through the checkbox.
 
 {% highlight cshtml %}
 
@@ -73,11 +71,11 @@ You can arrange the datasource items by grouping them with checkbox mode in Mult
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Checkbox Grouping](./images/blazor-multiselect-dropdown-checkbox-grouping.png)
+![Blazor MultiSelect Dropdown with CheckBox grouping](./images/blazor-multiselect-dropdown-checkbox-grouping.png)
 
 ## Selection Reordering
 
-Using [EnableSelectionOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableSelectionOrder) to Reorder the selected items in popup visibility state.
+Use [EnableSelectionOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableSelectionOrder) to control how selected items are ordered while the popup is open. When enabled, the order of the selected items follows the sequence in which items were selected.
 
 {% highlight cshtml %}
 
@@ -85,9 +83,9 @@ Using [EnableSelectionOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 
 {% endhighlight %}
 
-![Changing Selection Order in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-change-selection-order.png)
+![Changing selection order in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-change-selection-order.png)
 
-## Select All
+## Select all
 
 The MultiSelect component has in-built support to select all the list items using `Select All` options in the header. When the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ShowSelectAll) property is set to true, by default Select All text will show. You can customize the name attribute of the Select All option by using [SelectAllText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_SelectAllText).
 
@@ -101,7 +99,7 @@ For the unSelect All option, by default unSelect All text will show. You can cus
 
 ![Blazor MultiSelect DropDown with CheckBox Selection](./images/blazor-multiselect-dropdown-checkbox-selection.png)
 
-## See Also
+## See also
 
-* [Blazor MultiSelect DropDown with selection stacked vertically in CheckBox](https://www.syncfusion.com/forums/172062/how-to-stack-selected-items-vertically-in-a-multiselct-dropdown)
-* [Disable CheckBox for certain values in Blazor MultiSelect DropDown](https://www.syncfusion.com/forums/157795/is-it-possible-to-disable-checkbox-for-certain-values-in-multiselect-dropdown)
\ No newline at end of file
+- [Blazor MultiSelect DropDown with selection stacked vertically in CheckBox](https://www.syncfusion.com/forums/172062/how-to-stack-selected-items-vertically-in-a-multiselct-dropdown)
+- [Disable CheckBox for certain values in Blazor MultiSelect DropDown](https://www.syncfusion.com/forums/157795/is-it-possible-to-disable-checkbox-for-certain-values-in-multiselect-dropdown)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/placeholder-and-floatlabel.md b/blazor/multiselect-dropdown/placeholder-and-floatlabel.md
index 2a924724ea..7f35b202dc 100644
--- a/blazor/multiselect-dropdown/placeholder-and-floatlabel.md
+++ b/blazor/multiselect-dropdown/placeholder-and-floatlabel.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Placeholder
 
-Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Placeholder) property to display a small description of the expected value in the input. In the following sample demonstration, set the `Select a game` as the `Placeholder` property value, which will set the respective value to the `Placeholder` attribute of the input element in the DOM.
+Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Placeholder) property to display brief helper text that describes the expected input. In the following example, the placeholder is set to “Select a game,” which renders as the input element’s placeholder attribute.
 
 {% highlight cshtml %}
 
@@ -23,7 +23,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 ## Color of the placeholder text
 
-You can change the color of the placeholder by targeting its CSS class `input.e-multiselect::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
+Change the color of the placeholder by targeting its CSS class `input.e-multiselect::placeholder`, which indicates the placeholder text, and set the desired color using the `color` property.
 
 {% highlight cshtml %}
 
@@ -31,11 +31,11 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with color placeholder](./images/style/blazor_multiselect_placeholder-color.png)
+![Blazor MultiSelect Dropdown with color placeholder](./images/style/blazor_multiselect_placeholder-color.png)
 
 ## Add mandatory indicator using placeholder
 
-The mandatory indicator `*` can be applied to the placeholder by targeting its CSS class `.e-float-text::after` using the `content` style.
+Add a mandatory indicator “*” to the floating label by targeting the `.e-float-text::after` selector and setting the `content` style.
 
 {% highlight cshtml %}
 
@@ -43,21 +43,21 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with mandatory indicator placeholder](./images/style/blazor_multiselect_placeholder-with-mandatory.png)
+![Blazor MultiSelect Dropdown with mandatory indicator placeholder](./images/style/blazor_multiselect_placeholder-with-mandatory.png)
 
 ## FloatLabel
 
-Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FloatLabelType) property to specify the floating label behavior of the DropDownList that the `Placeholder` text floats above the TextBox based on the following values. `FloatLabelType` is applicable only when `Placeholder` is used. `FloatLabelType` is depends on `Placeholder`. Default value of `FloatLabelType` is `Never`.
+Use the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FloatLabelType) property to control the floating label behavior of the MultiSelect. When enabled, the placeholder text moves above the input according to the specified mode. FloatLabelType applies only when a Placeholder is defined. The default value is `Never`.
 
 The floating label supports the types of actions as follow.
 
 Type     | Description
 ------------ | -------------
-  [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto)       | The floating label will float above the input after focusing, or entering a value in the input.
-  [Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always)     | The floating label will always float above the input.
-  [Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never)      | By default, never float the label in the input when the placeholder is available.
+[Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto) | The label floats above the input on focus or when a value is entered.
+[Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always) | The label always floats above the input.
+[Never](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never) | The label never floats when a placeholder is present.
 
-The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
+The following example demonstrates `FloatLabelType="Auto"`:
 
 {% highlight Razor %}
 
@@ -65,11 +65,11 @@ The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with FloatLabelType property](./images/style/blazor_multiselect_floatLabelType-property.gif)
+![Blazor MultiSelect Dropdown with FloatLabelType property](./images/style/blazor_multiselect_floatLabelType-property.gif)
 
 ## Customizing the float label element’s focusing color
 
-You can customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
+Customize the component color when it is focused by targeting its CSS class `.e-input-focus::after`, which indicates the input element when it is focused, and set the desired color to the `background` property.
 
 {% highlight cshtml %}
 
@@ -77,4 +77,4 @@ You can customize the component color when it is focused by targeting its CSS cl
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown focus color](./images/style/blazor_multiselect_focus-color.png)
\ No newline at end of file
+![Blazor MultiSelect Dropdown focus color](./images/style/blazor_multiselect_focus-color.png)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/popup-setting.md b/blazor/multiselect-dropdown/popup-setting.md
index 4e7988f447..6e0b0ccb46 100644
--- a/blazor/multiselect-dropdown/popup-setting.md
+++ b/blazor/multiselect-dropdown/popup-setting.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Popup resize
 
-You can dynamically adjust the size of the popup in the MultiSelect component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
+Dynamically adjust the size of the popup in the MultiSelect component by using the [AllowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_AllowResize) property. When enabled, users can resize the popup, improving visibility and control, with the resized dimensions being retained across sessions for a consistent user experience.
 
 {% highlight Razor %}
 
@@ -31,11 +31,11 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with PopupHeight property](./images/style/blazor_multiselect_popupHeight-property.png)
+![Blazor MultiSelect Dropdown with PopupHeight property](./images/style/blazor_multiselect_popupHeight-property.png)
 
 ## Change the PopupWidth
 
-To customize the width of the popup alone, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the MultiSelect component.
+To customize only the popup width, use the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_PopupWidth) property. The default value of the `PopupWidth` is `100%`. If popup width unspecified, it sets based on the width of the MultiSelect component.
 
 {% highlight Razor %}
 
@@ -43,17 +43,15 @@ To customize the width of the popup alone, use the [PopupWidth](https://help.syn
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with PopupWidth property](./images/style/blazor_multiselect_popupWidth-property.png)
+![Blazor MultiSelect Dropdown with PopupWidth property](./images/style/blazor_multiselect_popupWidth-property.png)
 
 ## Change the popup z-index
 
-Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the component popup element.
-
-Defaults to `1000`.
+Customize the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ZIndex) value of the popup element to control its stacking order. The default value is 1000.
 
 ## Show popup on initial loading
 
-You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Created) Event.
+Show the popup on initial load by calling [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Created) event.
 
 {% highlight Razor %}
 
@@ -63,7 +61,7 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 ## Preventing opening and closing
 
-Prevent the popup open and close in the event argument like [BeforeOpenEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) and [PopupEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) as `true`. It is achieved by the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnClose) events. 
+Prevent the popup from opening or closing by setting [BeforeOpenEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.BeforeOpenEventArgs.html#Syncfusion_Blazor_DropDowns_BeforeOpenEventArgs_Cancel) or [PopupEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.PopupEventArgs.html#Syncfusion_Blazor_DropDowns_PopupEventArgs_Cancel) to true within the corresponding [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnOpen) and [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnClose) events.
 
 {% highlight Razor %}
 
@@ -71,13 +69,13 @@ Prevent the popup open and close in the event argument like [BeforeOpenEventArgs
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Preventing opening and closing](./images/popup-setting/blazor_MultiSelect_preventing-opening-closing.png)
+![Blazor MultiSelect with preventing opening and closing](./images/popup-setting/blazor_MultiSelect_preventing-opening-closing.png)
 
-The following events are used to trigger when opening and closing popup.
+The following events are raised when opening and closing the popup.
 
 ### OnOpen event
 
-The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnOpen) event triggers when the popup is opened. If you cancel this event, the popup remains closed.
+The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnOpen) event triggers before the popup opens. If canceled, the popup remains closed.
 
 {% highlight Razor %}
 
@@ -87,7 +85,7 @@ The [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.M
 
 ### Opened event
 
-The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Opened) event triggers when the popup opens.
+The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Opened) event triggers after the popup has opened.
 
 {% highlight Razor %}
 
@@ -97,7 +95,7 @@ The [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.M
 
 ### OnClose event
 
-The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnClose) event triggers before the popup is closed. If you cancel this event, the popup will remain open.
+The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnClose) event triggers before the popup closes. If canceled, the popup remains open.
 
 {% highlight Razor %}
 
@@ -107,7 +105,7 @@ The [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.
 
 ### Closed event
 
-The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Closed) event triggers after the popup has been closed.
+The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Closed) event triggers after the popup has closed.
 
 {% highlight Razor %}
 
@@ -117,7 +115,7 @@ The [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.M
 
 ## Popup height based on available space
 
-You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
+Adjust the popup height based on the available viewport space by handling the window resize event and updating the popup’s height accordingly.
 
 {% highlight Razor %}
 
@@ -145,11 +143,11 @@ You can achieve this by binding the `resize` event in window and update the heig
 {% endhighlight %}
 {% endtabs %}
 
-![Popup height based on available space in Blazor Multiselect](./images/popup-setting/blazor_multiselect_popup_resize.gif)
+![Popup height based on available space in Blazor MultiSelect](./images/popup-setting/blazor_multiselect_popup_resize.gif)
 
 ## Programmatically opening and closing popup
 
-You can programmatically open and close the popup by accessing the `ShowPopupAsync()` and `HidePopupAsync()` methods through an instance of the multiselect. Bind the click event of a button to these methods. When the button is clicked, it will trigger the respective method and open or close the popup.
+Open and close the popup programmatically by calling `ShowPopupAsync()` and `HidePopupAsync()` on the component instance. For example, bind button click events to these methods to toggle the popup.
 
 {% highlight Razor %}
 
@@ -157,4 +155,4 @@ You can programmatically open and close the popup by accessing the `ShowPopupAsy
 
 {% endhighlight %} 
 
-![Show or Hide Popup in Blazor Multiselect](./images/popup-setting/blazor_multiselect_show-or-hide-popup.gif)
+![Show or hide popup in Blazor MultiSelect](./images/popup-setting/blazor_multiselect_show-or-hide-popup.gif)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/refreshdataasync.md b/blazor/multiselect-dropdown/refreshdataasync.md
index 7e585a0ebe..8dd0a76ef3 100644
--- a/blazor/multiselect-dropdown/refreshdataasync.md
+++ b/blazor/multiselect-dropdown/refreshdataasync.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # RefreshDataAsync in Blazor MultiSelect Dropdown Component
 
-The Remote data source is dynamically updated using the **RefreshDataAsync** function. With the aid of this method, update the data source without the need for a [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query). To update the data source, call the URL link with the help of the RefreshDataAsync method.
+Use the [RefreshDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_RefreshDataAsync) method to refresh the remote data source dynamically without changing the configured [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query). This method re-requests data from the configured endpoint (URL) and updates the popup list.
 
-In the following example, the first render uses 5 data without using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query). The source is updated with 8 new data using the URL link.
+In the following example, the initial render loads five items without using Query. The data source is then refreshed to load eight items from the endpoint by calling RefreshDataAsync.
 
 {% highlight Razor %}
 
@@ -19,15 +19,15 @@ In the following example, the first render uses 5 data without using the [Query]
 
 {% endhighlight %}
 
-![Blazor MultiSelect with virtualization](./images/blazor-multiselect-refreshdata.gif)
+![Blazor MultiSelect Dropdown with RefreshDataAsync](./images/blazor-multiselect-refreshdata.gif)
 
-N>When utilizing the `RefreshDataAsync` method with the filter enabled, you must prevent the component's default actions before calling the URL link and the RefreshDataAsync function in the Filtering Event.
+N> When using `RefreshDataAsync` with filtering enabled, prevent the component’s default filtering action in the `Filtering` event (set the cancel flag) before invoking the endpoint and calling `RefreshDataAsync`. This ensures that custom refresh logic runs without conflicting with the built-in behavior.
 
-### Web API adaptor:
-You must use a customized controller in the `WebApiadaptor` to use the `RefreshDataAsync` method.
-In this case, the URL link is used to render and refresh the data source.
+### Web API adaptor
 
-The WebApiadaptor used with the controller and RefreshDataAsync function is denoted in the following code.
+When using `WebApiAdaptor`, implement a custom controller that handles OData-style query parameters for both initial loads and refresh requests. In this scenario, the endpoint URL is used for both rendering and refreshing the data source.
+
+The following example shows `WebApiAdaptor` usage with a controller and the `RefreshDataAsync` method.
 
 {% tabs %}
 {% highlight cshtml tabtitle="Index.razor" %}
@@ -43,10 +43,11 @@ The WebApiadaptor used with the controller and RefreshDataAsync function is deno
 {% endhighlight %}
 ​​​​​​​{% endtabs %}
 
-### Url adaptor:
-When the `RefreshDataAsync` method is used in the Urladaptor, the query's `RequiresCount()` property is required to render the data source initially with the URL link. But the query property is not required to refresh the data source. Only the URL link is required.
+### URL adaptor
+
+When using `UrlAdaptor`, the initial load requires `Query.RequiresCount()` to render data from the endpoint. For subsequent refreshes with `RefreshDataAsync`, the query is not required; only the endpoint URL is needed.
 
-The Urladaptor used with the controller and RefreshDataAsync function is denoted in the following code.
+The following example shows `UrlAdaptor` usage with a controller and the `RefreshDataAsync` method.
 
 {% tabs %}
 {% highlight cshtml tabtitle="Index.razor" %}
@@ -60,6 +61,4 @@ The Urladaptor used with the controller and RefreshDataAsync function is denoted
 {% include_relative code-snippet/EmployeeDataController.cs %}
 
 {% endhighlight %}
-​​​​​​​{% endtabs %}
-
-
+​​​​​​​{% endtabs %}
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/selection-deselection.md b/blazor/multiselect-dropdown/selection-deselection.md
index e9c419aeef..0252ed6bbf 100644
--- a/blazor/multiselect-dropdown/selection-deselection.md
+++ b/blazor/multiselect-dropdown/selection-deselection.md
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Get selected value
 
-Get the selected value of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event using the [MultiSelectChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
+Get the selected values of the MultiSelect component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event by using the [MultiSelectChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectChangeEventArgs-1.html#Syncfusion_Blazor_DropDowns_MultiSelectChangeEventArgs_1_Value) property.
 
 {% highlight cshtml %}
 
@@ -33,7 +33,7 @@ Bind the pre-selected value to the MultiSelect component using the [@bind-Value]
 
 ## Programmatically change the selected value
 
-Change the component value programmatically or externally by the component instance using the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute of the component. The following sample shows how to change the value of the component using click event of the button component.
+Change the component’s value programmatically by referencing the component instance via the [@ref](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#ref) attribute. The following example updates the value in a button click handler.
 
 {% highlight cshtml %}
 
@@ -45,7 +45,7 @@ Change the component value programmatically or externally by the component insta
 
 ### ValueChange event
 
-The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event is triggered when the value of the MultiSelect component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
+The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_ValueChange) event is raised when the value of the MultiSelect changes. The event args include the current value and the previously selected value.
 
 {% highlight cshtml %}
 
@@ -55,7 +55,7 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo
 
 ### OnValueSelect event
 
-The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnValueSelect) event is triggered when you select any value in the MultiSelect component. Get the necessary arguments including the [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html). Also,  prevent the selection of items by setting the [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) property as `true` provided by the event arguments. 
+The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_OnValueSelect) event is raised when an item is selected in the popup. Access item data via [SelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html). Prevent selection by setting [SelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SelectEventArgs-1.html#Syncfusion_Blazor_DropDowns_SelectEventArgs_1_Cancel) to `true`.
 
 {% highlight cshtml %}
 
@@ -65,7 +65,7 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop
 
 ## Get selected item by value
 
-Get the entire object belonging to the value selected in the component using the [GetDataByValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_GetDataByValueAsync__0_) method.
+Retrieve the full data item for a given value by using [GetDataByValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_GetDataByValueAsync__0_).
 
 {% highlight cshtml %}
 
@@ -75,7 +75,7 @@ Get the entire object belonging to the value selected in the component using the
 
 ## Focus the next component on selection
 
-Focus the component programmatically using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FocusAsync) public method. It will set focus instantly to the MultiSelect component when invoking it. 
+Programmatically set focus by using the [FocusAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_FocusAsync) method. This immediately moves focus to the MultiSelect when invoked.
 
 {% highlight cshtml %}
 
@@ -85,7 +85,7 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus
 
 ## Programmatically clear the selected value
 
-To clear the MultiSelect value programmatically, use the [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ClearAsync) method. This method clears out the selected values from the SfMultiSelect<TValue, TItem> component and sets the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) property to null.
+Clear the MultiSelect selection by using [ClearAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ClearAsync). This removes the selected values and sets [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) to `null`.
 
 {% highlight cshtml %}
 
@@ -95,7 +95,7 @@ To clear the MultiSelect value programmatically, use the [ClearAsync](https://he
 
 ## Prevent reload on form submit
 
-To prevent the page from reloading when using the MultiSelect component inside a form, you can specify the type of the button as "button" by utilizing the `HTMLAttributes` property. This will prevent the page from reloading when the button is clicked.
+When the MultiSelect is used inside a form, prevent page reloads by setting the button’s `type="button"` (instead of the default `type="submit"`). This avoids form submission when the button is clicked.
 
 {% highlight cshtml %}
 
@@ -115,7 +115,7 @@ Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ## Programmatically focus in and focus out the component
 
-In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the combobox, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the combobox.
+Use buttons to invoke the `FocusAsync()` and `FocusOutAsync()` methods on the MultiSelect instance to move focus in and out programmatically.
 
 {% highlight Razor %}
 
@@ -127,7 +127,7 @@ While focusing and focus out the following event get triggered.
 
 ### Focus event
 
-The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Focus) event will trigger when the component gets focused. 
+The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Focus) event is raised when the component receives focus. 
 
 {% highlight cshtml %}
 
@@ -137,7 +137,7 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.Mu
 
 ### Blur event
 
-The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Blur) event will trigger when focus moves out from the component. 
+The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectEvents-2.html#Syncfusion_Blazor_DropDowns_MultiSelectEvents_2_Blur) event is raised when the component loses focus. 
 
 {% highlight cshtml %}
 
diff --git a/blazor/multiselect-dropdown/sorting.md b/blazor/multiselect-dropdown/sorting.md
index f4f506dd36..821d21d068 100644
--- a/blazor/multiselect-dropdown/sorting.md
+++ b/blazor/multiselect-dropdown/sorting.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Sorting in Blazor MultiSelect Component
 
-The Sorting enables you to sort data in the `Ascending` or `Descending` order. To enable sorting in the MultiSelect, set the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property to the required value. 
+Enable sorting of items in ascending or descending order by setting the [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_SortOrder) property.
 
-The available type of sort orders are:
+The available sort orders are:
 
-SortOrder     | Description
+SortOrder | Description
 ------------ | -------------
-  [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None)       | The data source is not sorting.
-  [Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending)     | The data source is sorting with ascending order.
-  [Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending)      | The data source is sorting with descending order.
+[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_None) | No sorting; items appear in their original order.
+[Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Ascending) | Items are sorted in ascending order.
+[Descending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SortOrder.html#Syncfusion_Blazor_DropDowns_SortOrder_Descending) | Items are sorted in descending order.
 
 In the following demonstration sample, the items in the datasource are shuffled in random order but decide whether the items to be listed in ascending or descending order alphanumerically in the popup.
 
@@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled
 
 {% endhighlight %}
 
-![Blazor MultiSelect with sortOrder descending](./images/sorting/blazor_MultiSelect_sorting.png)
\ No newline at end of file
+![Blazor MultiSelect sorted in descending order](./images/sorting/blazor_MultiSelect_sorting.png)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/style.md b/blazor/multiselect-dropdown/style.md
index 21237b14ac..ea768dcae5 100644
--- a/blazor/multiselect-dropdown/style.md
+++ b/blazor/multiselect-dropdown/style.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and appearance in Blazor MultiSelect Dropdown Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content outlines the CSS structure and properties that can be used to customize the component’s appearance.
 
 ## Read-only mode
 
-Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Readonly) whether the MultiSelect allows the user to change the value or not.
+Use the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Readonly) property to specify whether users can change the value.
 
 {% highlight Razor %}
 
@@ -21,11 +21,11 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Readonly property](./images/style/blazor_multiselect_readonly-property.png)
+![Blazor MultiSelect Dropdown with Readonly property](./images/style/blazor_multiselect_readonly-property.png)
 
-## Disable State 
+## Disabled state
 
-The SfMultiSelect component has an [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Enabled) property that controls whether the MultiSelect is interactive. Setting `Enabled` to `false` disables the component, making it unclickable and inactive. In contrast, the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Readonly) property, when set to `true`, allows users to view existing selections without modifying them.
+Control interactivity with the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Enabled) property. Setting it to false disables the component. In contrast, setting [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Readonly) to true keeps the component interactive for focus and scrolling but prevents changes to the value.
 
 {% highlight Razor %}
 
@@ -37,7 +37,7 @@ The SfMultiSelect component has an [Enabled](https://help.syncfusion.com/cr/blaz
 
 ### Customizing the disabled component’s text color
 
-You can customize the text color of a disabled component by targeting its CSS class `.e-multiselect.e-disabled`, which indicates the input element in a disabled state, and set the desired color to the `-webkit-text-fill-color` property.
+Customize the text color of a disabled component by targeting `.e-multiselect.e-disabled` and setting the `-webkit-text-fill-color` property.
 
 {% highlight cshtml %}
 
@@ -45,7 +45,7 @@ You can customize the text color of a disabled component by targeting its CSS cl
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with Disabled component text color](./images/style/blazor_multiselect_disabled-text-color.png)
+![Blazor MultiSelect Dropdown with disabled component text color](./images/style/blazor_multiselect_disabled-text-color.png)
 
 ## Change remove icon color in chip
 
@@ -61,7 +61,7 @@ To change the remove icon color in a chip within the Syncfusion<sup style="font-
 
 ## Show the custom icon in dropdown icon
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons#material) by targeting its CSS class `.e-ddl-icon::before`, which indicates the icon element displayed within the dropdown list component, and set the desired icon to the `content` property.
 
 {% highlight cshtml %}
 
@@ -69,9 +69,9 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 {% endhighlight %}
 
-![Blazor Multiselect with dropdown icon](./images/style/blazor_Multiselect_dropdown-icon.png)
+![Blazor MultiSelect with dropdown icon](./images/style/blazor_Multiselect_dropdown-icon.png)
 
-You can customize the dropdown icon for the particular component using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass) property and add style to the custom class which is mapped to `CssClass`.
+To style only a specific instance, set a custom class via [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass) and scope the CSS to that class.
 
 {% highlight cshtml %}
 
@@ -79,9 +79,9 @@ You can customize the dropdown icon for the particular component using the [CssC
 
 {% endhighlight %}
 
-## Adding Icon in Popup Items
+## Adding icons in popup items
 
-You can customize the MultiSelect dropdown to display icons by mapping a field from the data object to the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_IconCss) property.
+Display icons in list items by mapping a field to [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_IconCss).
 
 {% highlight cshtml %}
 
@@ -89,11 +89,11 @@ You can customize the MultiSelect dropdown to display icons by mapping a field f
 
 {% endhighlight %}
 
-![Blazor Multiselect with adding icon in popup items](./images/style/blazor_Multiselect_adding-icon-popup-items.png)
+![Blazor MultiSelect with icons in popup items](./images/style/blazor_Multiselect_adding-icon-popup-items.png)
 
-## Customizing the background color of container element
+## Customizing the background color of the container
 
-You can customize the appearance of the container element within the multiselect component by targeting its CSS class `.e-multi-select-wrapper`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
+Customize the appearance of the container element within the multiselect component by targeting its CSS class `.e-multi-select-wrapper`, which indicates the parent element of the input, and allows you to apply any desired styles to the component.
 
 {% highlight cshtml %}
 
@@ -101,11 +101,11 @@ You can customize the appearance of the container element within the multiselect
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown container background color](./images/style/blazor_multiselect_background-color-of-container.png)
+![Blazor MultiSelect Dropdown container background color](./images/style/blazor_multiselect_background-color-of-container.png)
 
 ## Customizing the dropdown icon’s color
 
-You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons/#material) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the multiselect component, and setting the desired color to the `color` property.
+Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearance/icons) by targeting its CSS class `.e-ddl-icon.e-icons`, which indicates the icon element displayed within the multiselect component, and setting the desired color to the `color` property.
 
 {% highlight cshtml %}
 
@@ -113,7 +113,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown icon color](./images/style/blazor_multiselect_icon-color.png)
+![Blazor MultiSelect Dropdown icon color](./images/style/blazor_multiselect_icon-color.png)
 
 ## CssClass
 
@@ -132,12 +132,12 @@ Some of the possible values are
 
 {% endhighlight %} 
 
-![Blazor MultiSelect DropDown with CssClass property](./images/style/blazor_multiselect_cssClass-property.png)
+![Blazor MultiSelect Dropdown with CssClass property](./images/style/blazor_multiselect_cssClass-property.png)
 
 
-## Customizing the appearance of the delimiter container element
+## Customizing the appearance of the delimiter container
 
-You can customize the appearance of the delimiter container element within the multiselect component by targeting its CSS class `.e-delim-values`, which indicates the selected values separated by the delimiter character of the multiselect component, and allows you to apply any desired styles to the component.
+Customize the appearance of the delimiter container element within the multiselect component by targeting its CSS class `.e-delim-values`, which indicates the selected values separated by the delimiter character of the multiselect component, and allows you to apply any desired styles to the component.
 
 {% highlight cshtml %}
 
@@ -145,11 +145,11 @@ You can customize the appearance of the delimiter container element within the m
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown appearance of the delimiter container](./images/style/blazor_multiselect__appearance-of-delimiter-container.png)
+![Blazor MultiSelect Dropdown delimiter container appearance](./images/style/blazor_multiselect__appearance-of-delimiter-container.png)
 
 ## Customizing the appearance of chips
 
-You can customize the appearance of the chips within the multiselect component by targeting its CSS classes `.e-chips` and `.e-chipcontent`, which represent the chips of the multiselect component, and apply any desired styles to the component.
+Customize the appearance of the chips within the multiselect component by targeting its CSS classes `.e-chips` and `.e-chipcontent`, which represent the chips of the multiselect component, and apply any desired styles to the component.
 
 {% highlight cshtml %}
 
@@ -157,11 +157,11 @@ You can customize the appearance of the chips within the multiselect component b
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown appearance of chips](./images/style/blazor_multiselect_appearance-of-chips.png)
+![Blazor MultiSelect Dropdown chip appearance](./images/style/blazor_multiselect_appearance-of-chips.png)
 
-## Customizing the outline theme's focus color
+## Customizing the outline theme focus color
 
-You can customize the color of the multiselect component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
+Customize the color of the multiselect component when it is in a focused state and rendered with an outline theme, by targeting its CSS class `e-outline` which indicates the input element when it is focused, and allows you to set the desired color to the `color` property.
 
 {% highlight cshtml %}
 
@@ -169,12 +169,12 @@ You can customize the color of the multiselect component when it is in a focused
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown focusing color outline theme](./images/style/blazor_multiselect_outline-theme-color.png)
+![Blazor MultiSelect Dropdown outline theme focus color](./images/style/blazor_multiselect_outline-theme-color.png)
 
 
-## Customizing the background color of focus, hover, and active items
+## Customizing focus, hover, and active item styles
 
-You can customize the background color and text color of list items within the multiselect component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the `background-color` and `color` properties.
+Customize the background color and text color of list items within the multiselect component when they are in a focused, active, or hovered state by targeting the CSS classes `.e-list-item.e-item-focus`, `.e-list-item.e-active`, and `.e-list-item.e-hover`, and set the desired color to the `background-color` and `color` properties.
 
 {% highlight cshtml %}
 
@@ -182,13 +182,13 @@ You can customize the background color and text color of list items within the m
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with customizing the focus, hover and active item color](./images/style/blazor_multiselect_backgroung-color.png)
+![Blazor MultiSelect Dropdown focus, hover, and active item colors](./images/style/blazor_multiselect_backgroung-color.png)
 
-## Customizing the appearance of pop-up element
+## Customizing the appearance of the popup element
 
 Use the following CSS to customize the appearance of popup element.
 
-You can customize the appearance of the popup element within the multiselect component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.
+Customize the appearance of the popup element within the multiselect component by targeting the CSS class `.e-list-item.e-item-focus`, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.
 
 {% highlight cshtml %}
 
@@ -196,11 +196,11 @@ You can customize the appearance of the popup element within the multiselect com
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with customizing popup color](./images/style/blazor_multiselect_appearance-of-popup.png)
+![Blazor MultiSelect Dropdown popup appearance](./images/style/blazor_multiselect_appearance-of-popup.png)
 
-## Change the HTML Attributes
+## Change HTML attributes
 
-You can add the additional input attributes such as disabled, value, and more to the root element.
+Add additional input attributes such as disabled, value, and more to the root element.
 
 If you configured both the property and equivalent input attribute, then the component considers the property value.
 
@@ -210,10 +210,9 @@ If you configured both the property and equivalent input attribute, then the com
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with HtmlAttributes property](./images/style/blazor_multiselect_htmlAttributes-property.png)
+![Blazor MultiSelect Dropdown with HtmlAttributes property](./images/style/blazor_multiselect_htmlAttributes-property.png)
 
-
-## Set the various font family for dropdown list elements
+## Set various font families for dropdown elements
 
 The font-family of the multiselect dropdown list can be changed by overriding using the following selector. The overridden can be applied to specific component by adding a class name through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass) property.
 
@@ -225,9 +224,9 @@ In the following sample, the font family of the MultiSelect, ListItem text in Dr
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with different font family](./images/style/blazor_MultiSelect_font-family.png)
+![Blazor MultiSelect Dropdown with custom font family](./images/style/blazor_MultiSelect_font-family.png)
 
-## Show tooltip on list item
+## Show a tooltip on list items
 
 You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item.
 
@@ -239,23 +238,21 @@ The following code demonstrates how to display a tooltip when hovering over the
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown displays Tooltip](./images/blazor-multiselect-dropdown-tooltip.png)
+![Blazor MultiSelect Dropdown displays tooltip](./images/blazor-multiselect-dropdown-tooltip.png)
 
-## Change the Width
+## Change the width
 
-Gets or sets the width of the component. By default, it sizes based on its parent container dimension.
+Set the component width using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Width) property. The default is 100% (inherits parent width).
 
-Default value of [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Width) is `100%`.
- 
 {% highlight Razor %}
 
 {% include_relative code-snippet/style/width-property.razor %}
 
 {% endhighlight %} 
 
-![Blazor MultiSelect DropDown with Width property](./images/style/blazor_multiselect_width-property.png)
+![Blazor MultiSelect Dropdown with Width property](./images/style/blazor_multiselect_width-property.png)
 
-## Disable Specific Items in Dropdown List
+## Disable specific items in the dropdown list
 
 The [MultiSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `MultiSelectFieldSettings.Disabled` property.
 
@@ -269,18 +266,18 @@ In the following sample, State are grouped according on its category using `Disa
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptHMLzPvxxvrZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Disable Item Method
+## Disable item method
 
 The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
-| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
+| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | Identifies the item to update by its value. |
+| itemIndex | <code>number</code> | Identifies the item to update by its index. |
 
 ## Customizing the color of the checkbox
 
-You can change the color of the checkbox by targeting the CSS classes `.e-checkbox-wrapper` and `.e-frame.e-check` which indicates the checkbox of the list item element. Set the desired color using the `background-color` and `color` properties.
+Change the color of the checkbox by targeting the CSS classes `.e-checkbox-wrapper` and `.e-frame.e-check` which indicates the checkbox of the list item element. Set the desired color using the `background-color` and `color` properties.
 
 {% highlight cshtml %}
 
@@ -288,13 +285,11 @@ You can change the color of the checkbox by targeting the CSS classes `.e-checkb
 
 {% endhighlight %}
 
-![Blazor Multiselect DropDown with customizing checkbox](./images/style/blazor_multiselect_cutomizing-checkbox.png)
+![Blazor MultiSelect Dropdown with customized checkbox](./images/style/blazor_multiselect_cutomizing-checkbox.png)
 
 ## InputAttributes
 
-You can add the additional input attributes such as disabled, value, and more to the root element.
-
-If you configured both the property and equivalent input attribute, then the component considers the property value.
+Add extra input attributes to the root element via `InputAttributes`. If both a property and an equivalent input attribute are set, the property value takes precedence.
 
 {% highlight Razor %}
 
@@ -302,13 +297,11 @@ If you configured both the property and equivalent input attribute, then the com
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with InputAttributes property](./images/style/blazor_multiselect_inputAttributes-property.png)
+![Blazor MultiSelect Dropdown with InputAttributes property](./images/style/blazor_multiselect_inputAttributes-property.png)
 
 ## Customization of hiding selected item
 
-By default, the selected items are hidden from the list in the MultiSelect component. You can change this behavior by setting the [HideSelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_HideSelectedItem) property to false. The default value of HideSelectedItem is true.
-
-In the following code, `HideSelectedItem` is set as `false`.
+By default, selected items are hidden from the list. Set [HideSelectedItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_HideSelectedItem) to false to show selected items in the list. The default value is true.
 
 {% highlight Razor %}
 
@@ -316,11 +309,11 @@ In the following code, `HideSelectedItem` is set as `false`.
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with HideSelectedItem property](./images/style/blazor_multiselect_hideSelectedItem-property.png)
+![Blazor MultiSelect Dropdown with HideSelectedItem property](./images/style/blazor_multiselect_hideSelectedItem-property.png)
 
-## Show or Hide Popup after selection
+## Show or hide the popup after selection
 
-The [EnableCloseOnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableCloseOnSelect) property is a boolean attribute that determines whether the multi-select component's popup should close or remain open after a user makes a selection. When set to true, the popup will automatically close after a selection is made. When set to false, the popup will remain open after a selection is made. Default value of `EnableCloseOnSelect` is `true`.
+Use [EnableCloseOnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableCloseOnSelect) to control whether the popup closes automatically after a selection. The default is true.
 
 {% highlight Razor %}
 
@@ -328,12 +321,11 @@ The [EnableCloseOnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 {% endhighlight %} 
 
-![Blazor MultiSelect DropDown with EnableCloseOnSelect property](./images/style/blazor_multiselect_enableCloseOnSelect-property.png)
-
+![Blazor MultiSelect Dropdown with EnableCloseOnSelect property](./images/style/blazor_multiselect_enableCloseOnSelect-property.png)
 
 ## Programmatically clearing value
 
-You can clear the value programmatically by accessing the `ClearAsync()` method through an instance of the multiselect. You can bind the click event of a button to the `ClearAsync()` method. When the button is clicked, it will trigger the `ClearAsync()` method on the multiselect, clearing its value.
+Clear the value programmatically by calling `ClearAsync()` on the component instance (for example, from a button click handler).
 
 {% highlight Razor %}
 
@@ -341,11 +333,11 @@ You can clear the value programmatically by accessing the `ClearAsync()` method
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with ClearAsync method](./images/style/blazor_multiselect_clearAsync-method.gif)
+![Blazor MultiSelect Dropdown with ClearAsync method](./images/style/blazor_multiselect_clearAsync-method.gif)
 
 ## Programmatically show and hide spinner
 
-In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of the multiselect, you can use buttons. The code provided binds the click event of the button to the corresponding method on the multiselect instance. When the button is clicked, it will trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods on the multiselect, respectively.
+Show or hide the built-in spinner by calling `ShowSpinnerAsync()` and `HideSpinnerAsync()` on the component instance.
 
 {% highlight Razor %}
 
@@ -353,11 +345,11 @@ In order to trigger the `HideSpinnerAsync()` and `ShowSpinnerAsync()` methods of
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with show hide spinner method](./images/style/blazor_multiselect_show-hide-spinnerAsync-method.gif)
+![Blazor MultiSelect Dropdown with show/hide spinner methods](./images/style/blazor_multiselect_show-hide-spinnerAsync-method.gif)
 
-## Programmatically focus in and focus out the component
+## Programmatically focus in and focus out
 
-In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the instance of the multiselect, you can use buttons. You can bind the click event of the button to the `FocusAsync()` and `FocusOutAsync()` methods. When the button is clicked, it triggers the corresponding method on the multiselect.
+Move focus in and out programmatically by calling `FocusAsync()` and `FocusOutAsync()` on the component instance.
 
 {% highlight Razor %}
 
@@ -367,7 +359,7 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i
 
 ## Popup opening on click
 
-`OpenOnClick` is property of a multi-select component that controls the behavior of the popup. It determines whether the popup should open automatically when the user clicks on the multi-select component or if it should only open when the user clicks on a specific button or icon. Default value of `OpenOnClick` is `true`.
+Use the `OpenOnClick` property to control whether clicking the component opens the popup automatically. The default value is true.
 
 {% highlight Razor %}
 
@@ -375,4 +367,4 @@ In order to trigger the `FocusAsync()` and `FocusOutAsync()` methods using the i
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with OpenOnClick property](./images/style/blazor_multiselect_openOnClick-property.png)
+![Blazor MultiSelect Dropdown with OpenOnClick property](./images/style/blazor_multiselect_openOnClick-property.png)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/templates.md b/blazor/multiselect-dropdown/templates.md
index 6f6f915757..a28a089a74 100644
--- a/blazor/multiselect-dropdown/templates.md
+++ b/blazor/multiselect-dropdown/templates.md
@@ -9,17 +9,16 @@ documentation: ug
 
 # Templates in Blazor MultiSelect Dropdown Component
 
-The MultiSelect has been provided with several options to customize each list item, group title, selected value, header, and footer elements.
-
-To get started quickly with Templates in the Blazor MultiSelect Dropdown component, you can check the video below.
+The MultiSelect provides template options to customize the selected value, list items, group headers, header, and footer elements.
 
+To get started quickly with templates in the Blazor MultiSelect Dropdown component, watch the following video:
 {% youtube "https://www.youtube.com/watch?v=6A61PDatD0s" %}
 
 ## Value template
 
-The currently selected value that is displayed by default on the MultiSelect input element can be customized using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_ValueTemplate) property.
+Customize how the currently selected value is displayed in the input by using the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_ValueTemplate) property.
 
-In the following sample, the selected value is displayed as a combined text of both `FirstName` and `Designation` in the MultiSelect input, which is separated by a hyphen.
+In the following sample, the selected value displays combined text from `FirstName` and `Designation`, separated by a hyphen.
 
 {% highlight cshtml %}
 
@@ -27,13 +26,13 @@ In the following sample, the selected value is displayed as a combined text of b
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Value Template](./images/blazor-multiselect-dropdown-value-template.png)
+![Blazor MultiSelect Dropdown with value template](./images/blazor-multiselect-dropdown-value-template.png)
 
 ## Item template
 
-The content of each list item within the MultiSelect can be customized with the help of [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
+Customize the content of each list item by using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ItemTemplate) property.
 
-In the following sample, each list item is split into two columns to display relevant data.
+In the following sample, each list item is split into two columns to display related data.
 
 {% highlight cshtml %}
 
@@ -41,13 +40,13 @@ In the following sample, each list item is split into two columns to display rel
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Item Template](./images/blazor-multiselect-dropdown-item-template.png)
+![Blazor MultiSelect Dropdown with item template](./images/blazor-multiselect-dropdown-item-template.png)
 
 ## Group template
 
-The group header title under which appropriate sub-items are categorized can also be customized with the help of the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property. This template is common for both inline and floating group header template.
+Customize the group header title (used for both inline and floating headers) by using the [GroupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_GroupTemplate) property.
 
-In the following sample, employees are grouped according to their cities.
+In the following sample, employees are grouped by city.
 
 {% highlight cshtml %}
 
@@ -59,9 +58,9 @@ In the following sample, employees are grouped according to their cities.
 
 ## Header template
 
-The header element is shown statically at the top of the popup list items within the MultiSelect, and any custom element can be placed as a header element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_HeaderTemplate) property.
+Render a custom header at the top of the popup by using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_HeaderTemplate) property.
 
-In the following sample, the list items and its headers are designed and displayed as two columns similar to multiple columns of the grid.
+In the following sample, the header and list items are presented in two columns similar to a grid layout.
 
 {% highlight cshtml %}
 
@@ -69,13 +68,13 @@ In the following sample, the list items and its headers are designed and display
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Header Template](./images/blazor-multiselect-dropdown-header-template.png)
+![Blazor MultiSelect Dropdown with header template](./images/blazor-multiselect-dropdown-header-template.png)
 
 ## Footer template
 
-The MultiSelect has options to show a footer element at the bottom of the list items in the popup list. Here, you can place any custom element as a footer element using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_FooterTemplate) property.
+Render a custom footer at the bottom of the popup list by using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_FooterTemplate) property.
 
-In the following sample, footer element displays the total number of list items present in the MultiSelect.
+In the following sample, the footer displays the total number of list items.
 
 {% highlight cshtml %}
 
@@ -83,13 +82,13 @@ In the following sample, footer element displays the total number of list items
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Footer Template](./images/blazor-multiselect-dropdown-footer-template.png)
+![Blazor MultiSelect Dropdown with footer template](./images/blazor-multiselect-dropdown-footer-template.png)
 
 ## No records template
 
-The MultiSelect is provided with support to custom design the popup list content when no data is found and no matches are found on search with the help of [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
+Customize the popup content when no items are available or when search yields no matches by using the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_NoRecordsTemplate) property.
 
-In the following sample, popup list content displays the notification of no data available.
+In the following sample, the popup displays a “no data available” message.
 
 {% highlight cshtml %}
 
@@ -97,13 +96,13 @@ In the following sample, popup list content displays the notification of no data
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown without Data](./images/blazor-multiselect-dropdown-without-data.png)
+![Blazor MultiSelect Dropdown without data](./images/blazor-multiselect-dropdown-without-data.png)
 
 ## Action failure template
 
-There is also an option to custom design the popup list content when the data fetch request fails at the remote server. This can be achieved using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
+Customize the popup content displayed when a remote data request fails by using the [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_ActionFailureTemplate) property.
 
-In the following sample, when the data fetch request fails, the MultiSelect displays the notification.
+In the following sample, the component shows a notification when data retrieval fails.
 
 {% highlight cshtml %}
 
@@ -111,4 +110,4 @@ In the following sample, when the data fetch request fails, the MultiSelect disp
 
 {% endhighlight %}
 
-![Blazor MultiSelect DropDown with Action Template](./images/blazor-multiselect-dropdown-action-template.png)
+![Blazor MultiSelect Dropdown with action failure template](./images/blazor-multiselect-dropdown-action-template.png)
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/value-binding.md b/blazor/multiselect-dropdown/value-binding.md
index c495bd28de..40e6291c38 100644
--- a/blazor/multiselect-dropdown/value-binding.md
+++ b/blazor/multiselect-dropdown/value-binding.md
@@ -9,15 +9,16 @@ documentation: ug
 
 # Value Binding in MultiSelect
 
-Value binding is the process of passing values between a component and its parent. There are two methods for binding values.These are.
+Value binding is the process of passing values between a component and its parent. There are two methods for binding values. These are:
 
-* bind-Value Binding 
+- @bind-Value binding
 
 ## Bind value binding
 
-The value binding can be achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute and it supports `string`, `int`, `enum`, `bool` and `complex types`. If the component value has been changed, it will affect all places where you bind the variable for the `@bind-value` attribute. In order for the binding to work properly, the value assigned to the `@bind-value` attribute should be based on the field mapped to [MultiSelectFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value)
+Value binding is achieved by using the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute, and it supports `string`, `int`, `enum`, `bool`, and complex types. When the component value changes, the bound variable used with `@bind-Value` is updated everywhere it is referenced. For binding to work correctly, the value assigned to `@bind-Value` must correspond to the field mapped to [MultiSelectFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value).
 
-* **TValue** - Specifies the type of each list item of the multiselect component.
+- TItem - Specifies the type of the data items in the MultiSelect component.
+- TValue - Specifies the type of the value field (the selection type). The component’s Value is an array of this type.
 
 {% highlight cshtml %}
 
@@ -29,9 +30,9 @@ The value binding can be achieved by using the [@bind-Value](https://help.syncfu
 
 ## Text and value
 
-The MultiSelect [MultiSelectFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value) and [MultiSelectFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text) properties point to the corresponding names of the model. The `MultiSelectFieldSettings.Value` mapped to the component maintains the unique value of the item in the data source, and the `MultiSelectFieldSettings.Text` is mapped to display the text in the popup list items for the respective text value.
+The [MultiSelectFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value) and [MultiSelectFieldSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Text) properties map to the corresponding fields of the data model. The Value field maintains the unique value for each item in the data source, and the Text field provides the displayed text for list items in the popup.
 
-The following code demonstrates the Value and Text field of the MultiSelect component. For instance, the selected item is `Badminton` (Text Field, this is Game) but the value field holds `Game2` (Value Field, this is ID).
+The following example demonstrates Text and Value field mapping. For instance, the selected item displays `Badminton` (Text), while the Value field holds `Game2` (ID).
 
 {% highlight cshtml %}
 
@@ -43,9 +44,9 @@ The following code demonstrates the Value and Text field of the MultiSelect comp
 
 ## Primitive type binding
 
-The MultiSelect has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute of the MultiSelect. 
+The MultiSelect supports arrays of primitive data such as strings and numbers. Bind the value of primitive data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute of the MultiSelect.
 
-The following code demonstrates array of string as datasource to the MultiSelect component.
+The following example demonstrates an array of strings as the data source.
 
 {% highlight cshtml %}
 
@@ -55,7 +56,7 @@ The following code demonstrates array of string as datasource to the MultiSelect
 
 ![Blazor MultiSelect with Primitive Type as string](./images/value-binding/blazor_MultiSelect_primitive-type-string.png)
 
-The following code demonstrates array of int as datasource to the MultiSelect component.
+The following example demonstrates an array of integers as the data source.
 
 {% highlight cshtml %}
 
@@ -63,13 +64,11 @@ The following code demonstrates array of int as datasource to the MultiSelect co
 
 {% endhighlight %}
 
-![Blazor MultiSelect with Primitive Type as int](./images/value-binding/blazor_MultiSelect_primitive-type-int.png)
-
 ## Object binding
 
-Bind the Object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute of the DropdownList component, this is, You can map the class name to `TValue`. 
+Bind object data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute and map the value field via [MultiSelectFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value). Set `TItem` to the data item type and `TValue` to the value field type.
 
-In the following example, the `Name` column has been mapped to the [DropDownListFieldSettings.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_Value).
+In the following example, the `Name` column is mapped to the Value field.
 
 {% highlight cshtml %}
 
@@ -81,7 +80,7 @@ In the following example, the `Name` column has been mapped to the [DropDownList
 
 ## Enum binding
 
-Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute of MultiSelect component. The following code helps you to get a string value from the enumeration data.
+Bind enum values to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_Value) attribute of the MultiSelect component. The following example shows how to use enum data and obtain the selected value(s).
 
 {% highlight cshtml %}
 
@@ -93,11 +92,11 @@ Bind the enum data to the [@bind-Value](https://help.syncfusion.com/cr/blazor/Sy
 
 ## Show or hide clear button
 
-Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ShowClearButton) property to specify whether to show or hide the clear button. When the clear button is clicked, the `Value`, `Text`, and `Index` properties are reset to null.
+Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_ShowClearButton) property to show or hide the clear button. When clicked, the selection is cleared and the bound Value is reset.
 
-N> If the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)
+N> If `TValue` is a non-nullable type, the clear button sets the default value of that type (for example, `0` for `int`). If `TValue` is a nullable type (for example, `int?`), the clear button sets the Value to `null`.
 
-The following sample demonstrates the `string` used as `TValue`. So, if you clear the value using the clear button, it will be set to null as it's the default value of the respective type.
+The following example uses `string` as `TValue`, so clearing sets the value to `null`.
 
 {% highlight cshtml %}
 
@@ -109,11 +108,11 @@ The following sample demonstrates the `string` used as `TValue`. So, if you clea
 
 ## Dynamically change TItem
 
-The `TItem` property can be changed dynamically by defining the datasource type of the MultiSelect component with the help of the `@typeparam` directive. The following sample demonstration explains how to change  the TItem dynamically with different type of datasource.
+The `TItem` type can be changed dynamically by creating a generic wrapper component using the `@typeparam` directive. The following example shows how to change `TItem` dynamically for different data sources.
 
 ### Creating generic MultiSelect component
 
-First, create a `MultiSelect.razor` file as a parent component in the `/Pages` folder. Also, add a Parameter property for a List as `<TItem>` and `TValue`.
+Create a `MultiSelect.razor` file as a parent component. Add parameters for the List of `<TItem>` and the bound `TValue[]`.
 
 {% tabs %}
 {% highlight razor %}
@@ -135,14 +134,14 @@ public TValue[] DDLValue { get; set; }
 public EventCallback<TValue> DDLValueChanged { get; set; }
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 ### Usage of generic component with different type
 
-Then, render the Generic MultiSelect component with the required `TValue` and `TItem` in the respective razor components. 
+Render the generic MultiSelect with the required `TValue` and `TItem` in the respective Razor components.
 
-Here, the MultiSelect component is rendered with the TValue as a string type in the `/Index.razor` file and the MultiSelect component with TValue as an int nullable type in the `/Counter.razor` file.
+In this example, the MultiSelect is rendered with `TValue` as `string` in `Index.razor` and with `TValue` as `int?` in `Counter.razor`.
 
 **[Index.razor]**
 
@@ -174,7 +173,7 @@ Here, the MultiSelect component is rendered with the TValue as a string type in
     };
 }
 
-{% endhighlight razor %}
+{% endhighlight %}
 {% endtabs %}
 
 **[Counter.razor]**
@@ -208,5 +207,5 @@ List<Games> LocalData = new List<Games> {
 }
 
 
-{% endhighlight razor %}
-{% endtabs %}
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/multiselect-dropdown/virtualization.md b/blazor/multiselect-dropdown/virtualization.md
index dbdbfacecc..d885399ce3 100644
--- a/blazor/multiselect-dropdown/virtualization.md
+++ b/blazor/multiselect-dropdown/virtualization.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Virtualization in Blazor MultiSelect Dropdown Component
 
-The MultiSelect component includes a virtual scrolling feature designed to enhance UI performance, particularly for handling large datasets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableVirtualization) option, the MultiSelect intelligently manages data rendering, ensuring only a subset of items is initially loaded when the component is rendered. As you interact with the dropdown, additional items are dynamically loaded as you scroll, creating a smooth and efficient user experience.
+The MultiSelect component includes a virtual scrolling feature that improves UI performance when working with large datasets. By enabling the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableVirtualization) option, the MultiSelect renders only a subset of items initially. As the user scrolls, additional items are dynamically loaded, resulting in a smooth and efficient experience.
 
-This feature is applicable to both local and remote data scenarios, providing flexibility in its implementation. For instance, consider a case where the MultiSelect is bound to a dataset containing 150 items. Upon opening the dropdown, only a few items are loaded initially, based on the height of the popup. As you scroll through the list, additional items are fetched and loaded on-demand, allowing you to effortlessly explore the complete dataset.
+This feature works with both local and remote data. For example, when the MultiSelect is bound to 150 items, only the items that fit within the popup are loaded initially, based on the popup height. As scrolling continues, more items are fetched and rendered on demand, enabling efficient navigation through the entire dataset.
 
 ## Binding local data
 
-The MultiSelect component can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html) property. When using virtual scrolling, the list updates based on the scroll offset value, triggering a request to fetch more data from the server.
+The MultiSelect component can generate list items from an array of complex data. For this, the appropriate properties should be mapped to the [fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html) property. With virtual scrolling enabled, the list is updated based on the scroll offset and loads additional items from the in-memory data source.
 
-In the following example, `ID` column and `Text` column from complex data have been mapped to the `Value` field and `Text` field, respectively.
+In the following example, the ID and Text properties from the complex data are mapped to the Value and Text fields, respectively.
 
 {% highlight cshtml %}
 
@@ -45,7 +45,7 @@ The following sample displays the EmployeeID from the `VirtualDropdownData` Data
 
 When the `EnableVirtualization` property is enabled, the `Take` property provided by the user within the Query parameter at the initial state or during the `ActionBegin` event will be considered. Internally, it calculates the items that fit onto the current page (i.e., probably twice the amount of the popup's height). If the user-provided take value is less than the minimum number of items that fit into the popup, the user-provided take value will not be considered.
 
-The following sample shows the example for Customizing items count in virtualization.
+The following example demonstrates customizing the item count in virtualization.
 
 {% highlight Razor %}
 
@@ -57,9 +57,9 @@ The following sample shows the example for Customizing items count in virtualiza
 
 ## Grouping with virtualization
 
-The MultiSelect component supports grouping with Virtualization. It allows you to organize elements into groups based on different categories. Each item in the list can be classified using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy) field in the data table. After grouping, virtualization works similarly to local data binding, providing a seamless user experience. When the data source is bound to remote data, an initial request is made to retrieve all data for the purpose of grouping. Subsequently, the grouped data works in the same way as local data binding on virtualization. 
+The MultiSelect component supports grouping with virtualization. Items can be organized into groups using the [GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html#Syncfusion_Blazor_DropDowns_MultiSelectFieldSettings_GroupBy) field in the data source. After grouping, virtualization behaves as it does with local data binding, providing a seamless experience. When the data source is remote, an initial request retrieves the full dataset for grouping, after which virtualization operates on the grouped data locally.
 
-The following sample shows the example for Grouping with Virtualization. 
+The following example demonstrates grouping with virtualization.
 
 {% highlight Razor %}
 
@@ -71,9 +71,9 @@ The following sample shows the example for Grouping with Virtualization.
 
 ## Filtering with virtualization
 
-The MultiSelect component supports Filtering with Virtualization. The MultiSelect includes a built-in feature that enables data filtering when the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowFiltering) option is enabled. In the context of Virtual Scrolling, the filtering process operates in response to the typed characters. Specifically, the MultiSelect sends a request to the server, utilizing the full data source, to achieve filtering. Before initiating the request, an action event is triggered. Upon successful retrieval of data from the server, an action complete event is triggered. The initial data is loaded when the popup is opened. Whether the filter list has a selection or not, the popup closes.
+The MultiSelect component supports filtering with virtualization. When the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowFiltering) option is enabled, the component filters data in response to user input. For remote data, the MultiSelect sends a request to the server based on the typed characters. Before the request is sent, an action begin event is triggered; after data is returned, an action complete event is triggered. Initial data is loaded when the popup opens. Regardless of whether the filtered list has a selection, the popup closes after filtering.
 
-The following sample shows the example for Filtering with Virtualization.
+The following example demonstrates filtering with virtualization.
 
 {% highlight Razor %}
 
@@ -85,9 +85,9 @@ The following sample shows the example for Filtering with Virtualization.
 
 ## Checkbox with virtualization
 
-The MultiSelect component supports CheckBox selection with Virtualization. The MultiSelect comes with integrated functionality that allows for the selection of multiple values using checkboxes when the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_Mode) property is configured to `CheckBox`. In the context of Virtual Scrolling, the checkbox render with each list element. based on the checkbox selection and unselection, component value property updated with respective values.
+The MultiSelect component supports checkbox selection with virtualization. When the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_Mode) property is set to CheckBox, each list item renders a checkbox. Based on checkbox selection or clearing, the component’s Value property is updated with the corresponding values.
 
-The following sample shows the example for checkbox with Virtualization.
+The following example demonstrates checkbox selection with virtualization.
 
 {% highlight Razor %}
 
@@ -99,9 +99,9 @@ The following sample shows the example for checkbox with Virtualization.
 
 ## Custom value with virtualization
 
-The MultiSelect component supports custom value with Virtualization. When the [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowCustomValue) property is enabled, the MultiSelect enables users to include a new option not currently available in the component value. Upon selecting this newly added custom value, the MultiSelect triggers the `CustomValueSpecifier` event and also custom value will be added to the end of the complete list.
+The MultiSelect component supports custom values with virtualization. When the [AllowCustomValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_AllowCustomValue) property is enabled, users can add a new option that is not present in the existing data. Upon selecting a custom value, the CustomValueSpecifier event is triggered, and the custom value is appended to the end of the complete list.
 
-The following sample shows the example for custom value with Virtualization.
+The following example demonstrates custom values with virtualization.
 
 {% highlight Razor %}
 
@@ -113,9 +113,9 @@ The following sample shows the example for custom value with Virtualization.
 
 ## Preselect values with virtualization
 
-The MultiSelect component extends its support for preselected values with Virtualization. When binding values from local or remote data to the MultiSelect component, the corresponding data value is fetched from the server and promptly updated within the component. Moreover, when binding a custom value to the component, the value is updated within the component, and the bound custom value is seamlessly appended to the end of the complete list.
+The MultiSelect component supports preselected values with virtualization. When binding values from local or remote data, the corresponding items are resolved from the bound data source and applied to the component’s Value. When binding a custom value, it is applied to the component and appended to the end of the complete list.
 
-The following sample shows the example for Preselect value with Virtualization.
+The following example demonstrates preselect values with virtualization.
 
 {% highlight Razor %}
 
diff --git a/blazor/numeric-textbox/accessibility.md b/blazor/numeric-textbox/accessibility.md
index 697f94c4d8..d6e8a781a1 100644
--- a/blazor/numeric-textbox/accessibility.md
+++ b/blazor/numeric-textbox/accessibility.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor Numeric TextBox Component
 
-The [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor NumericTextBox component is outlined below.
+The accessibility compliance for the Blazor Numeric TextBox component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -38,9 +38,9 @@ The accessibility compliance for the Blazor NumericTextBox component is outlined
 
 ## WAI-ARIA attributes
 
-The Blazor NumericTextBox is characterized with complete ARIA Accessibility support that helps to be accessible by on-screen readers and other assistive technology devices. This component designed with the reference of the guidelines document given in [WAI ARAI Accessibility practices](https://www.w3.org/WAI/ARIA/apg/#spinbutton).
+The Blazor Numeric TextBox provides comprehensive WAI-ARIA support to improve accessibility for screen readers and other assistive technologies. It is designed with reference to the  [WAI ARAI Accessibility practices](https://www.w3.org/WAI/ARIA/apg/#spinbutton).
 
-The NumericTextBox uses the `spin button` role and following ARIA properties to its element based on its state.
+The Numeric TextBox uses the role="spin button" and the following ARIA properties to convey state to assistive technologies.
 
 | **Property** | **Functionality** |
 | --- | --- |
@@ -55,14 +55,14 @@ The NumericTextBox uses the `spin button` role and following ARIA properties to
 
 ## Keyboard interaction
 
-Keyboard interaction of the Blazor NumericTextBox component has been designed based on [WAI-ARIA Practices](https://www.w3.org/WAI/ARIA/apg/#spinbutton) described for the NumericTextBox and it is an alternative to mouse actions to interact with the NumericTextBox.
+Keyboard interaction of the Blazor Numeric TextBox component is designed based on the [WAI-ARIA Practices](https://www.w3.org/WAI/ARIA/apg/#spinbutton) for spinbutton behavior. The input must have focus for the shortcuts to apply.
 
-The following table shows shortcut keys and its corresponding usage.
+The following table shows shortcut keys and their corresponding actions.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Increments the value. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Decrements the value. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Decrements the value. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Increments the value. |
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -74,9 +74,9 @@ The following table shows shortcut keys and its corresponding usage.
 
 ## Ensuring accessibility
 
-The Blazor NumericTextBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor Numeric TextBox component's accessibility levels are validated through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
 
-The accessibility compliance of the NumericTextBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/numerictextbox) in a new window to evaluate the accessibility of the NumericTextBox component with accessibility tools.
+The accessibility compliance of the Numeric TextBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/numerictextbox) in a new window to evaluate the accessibility of the Numeric TextBox component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/numeric-textbox/customization.md b/blazor/numeric-textbox/customization.md
index 5143e45684..ad49921fd6 100644
--- a/blazor/numeric-textbox/customization.md
+++ b/blazor/numeric-textbox/customization.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Customization in Blazor Numeric TextBox Component
 
-## Read only Input
+## Read-only input
 
-You can disable the text box from editing by setting the `readonly` attribute to numeric textbox where textbox is marked as read-only. Still end-users can select text in textbox and only editing is disabled.  
+Make the Numeric TextBox non-editable by setting the Readonly property. In read-only mode, users can still focus the field and select its content, but they cannot modify the value. This state maps to aria-readonly for assistive technologies. To completely disable user interaction (including focus), use the Enabled property instead, which maps to aria-disabled.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -19,11 +19,11 @@ You can disable the text box from editing by setting the `readonly` attribute to
 </SfNumericTextBox>
 ```
 
-![Blazor NumericTextBox](./images/blazor-numericte-xtbox-customization.png)
+![Blazor Numeric TextBox](./images/blazor-numericte-xtbox-customization.png)
 
 ## Disable interaction in input
 
-You can disable cursor focus and selection on the text box by setting `pointer-events` as `none` for input element as below,
+Disable cursor focus and selection on the text box by setting `pointer-events` as `none` for input element as below,
 
 
 ```cshtml
diff --git a/blazor/numeric-textbox/data-binding.md b/blazor/numeric-textbox/data-binding.md
index 69f67754ef..6e204511b0 100644
--- a/blazor/numeric-textbox/data-binding.md
+++ b/blazor/numeric-textbox/data-binding.md
@@ -9,15 +9,14 @@ documentation: ug
 
 # Data Binding in Blazor Numeric TextBox Component
 
-This section briefly explains how to bind the value to the NumericTextBox component in the following different ways:
-
-* One-way data binding
-* Two-way data binding
-* Dynamic value binding
+This section explains how to bind values to the Numeric TextBox (SfNumericTextBox) in three common ways:
+- One-way data binding
+- Two-way data binding
+- Dynamic value binding
 
 ## One-way binding
 
-You can bind the value to the NumericTextBox component directly for `Value` property as mentioned in the following code example. In one-way binding, you have to pass property or variable name along with `@` (For Ex: "@Name").
+Bind the value to the NumericTextBox component directly for `Value` property as mentioned in the following code example. In one-way binding, you have to pass property or variable name along with `@` (For Ex: "@Name").
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -55,7 +54,7 @@ Two-way binding can be achieved by using `bind-Value` attribute and it supports
 
 ## Dynamic value binding
 
-You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor NumericTextBox component** only. This method notifies the component that its state has changed and queues a re-render.
+Change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor NumericTextBox component** only. This method notifies the component that its state has changed and queues a re-render.
 
 There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render.
 
diff --git a/blazor/numeric-textbox/events.md b/blazor/numeric-textbox/events.md
index 98abebc1e6..936f1bbb85 100644
--- a/blazor/numeric-textbox/events.md
+++ b/blazor/numeric-textbox/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor Numeric TextBox Component
 
-This section explains the list of events of the Numeric TextBox component which will be triggered for appropriate Numeric TextBox actions.
+This section lists the events raised by the Numeric TextBox component and when they occur. Events are wired using the nested NumericTextBoxEvents tag inside the SfNumericTextBox.
 
 ## Blur
 
-`Blur` event triggers when the NumericTextBox got focus out.
+The `Blur` event occurs when the NumericTextBox loses focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -32,7 +32,7 @@ This section explains the list of events of the Numeric TextBox component which
 
 ## Created
 
-`Created` event triggers when the NumericTextBox component is created.
+The `Created` event fires after the NumericTextBox component has been initialized and rendered.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -51,7 +51,7 @@ This section explains the list of events of the Numeric TextBox component which
 
 ## Destroyed
 
-`Destroyed` event triggers when the NumericTextBox component is destroyed.
+The `Destroyed` event fires when the NumericTextBox component is disposed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -70,7 +70,7 @@ This section explains the list of events of the Numeric TextBox component which
 
 ## Focus 
 
-`Focus` event triggers when the NumericTextBox got focus in.
+The `Focus` event occurs when the NumericTextBox receives focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -106,4 +106,4 @@ The `ValueChange` event triggers when the value changes or the component loses f
 }
 ```
 
-N> Numeric TextBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
+N> Numeric TextBox is limited to these events. Additional events may be added in the future based on user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/numeric-textbox/formats.md b/blazor/numeric-textbox/formats.md
index cf876ec0cb..5094a61171 100644
--- a/blazor/numeric-textbox/formats.md
+++ b/blazor/numeric-textbox/formats.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Number Formats in Blazor Numeric TextBox Component
 
-You can format the value of NumericTextBox using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Format) property. The value will be displayed in the specified format when the component is in focused out state. The format string supports both the standard numeric format string and custom numeric format string.
+Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.NumericTextBoxModel-1.html#Syncfusion_Blazor_Inputs_NumericTextBoxModel_1_Format) property to control how the NumericTextBox value is displayed when the input is not focused. Formatting affects only the rendered text; the underlying value remains numeric. The component supports both standard and custom numeric format strings and respects the current culture for symbols and separators.
 
 ## Standard formats
 
-From the standard numeric format, you can use the numeric related format specifiers such as `n`,`p`, and `c` in the NumericTextBox component. By using these format specifiers, you can achieve the percentage and currency textbox behavior also.
+Use standard numeric format specifiers such as `N`, `P`, and `C` to display numbers with culture-aware formatting (group separators, decimal separators, currency symbol, and percentage). For example, with a value of 0.5 and `P2`, the display shows 50.00% in most cultures. Currency (`C`) displays the symbol and number formatting based on the active culture. Format specifiers are case-insensitive.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -22,13 +22,11 @@ From the standard numeric format, you can use the numeric related format specifi
 <SfNumericTextBox TValue="int?" Value=10 Format="c2" Placeholder="Currency format" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>
 ```
 
-![Blazor NumericTextBox with Standard Format](./images/blazor-numerictextbox-standard-format.png)
+![Blazor Numeric TextBox with standard format](./images/blazor-numerictextbox-standard-format.png)
 
 ## Custom formats
 
-From the custom numeric format string, you can provide any custom format by combining one or more custom specifiers.
-
-The following examples demonstrate format the value by using currency format string `#` and `0`.
+Combine custom numeric format specifiers to create tailored display patterns. The `#` specifier displays a digit only if one is present (optional digit), while `0` enforces a digit and pads with zeros if necessary (zero placeholder). The following examples illustrate using `#` and `0` to format values.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -37,4 +35,4 @@ The following examples demonstrate format the value by using currency format str
 <SfNumericTextBox TValue="int?" Value=10 Format="000.00" Placeholder="Custom format string 0" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox>
 ```
 
-![Blazor NumericTextBox with Custom Format](./images/blazor-numerictextbox-custom-format.png)
\ No newline at end of file
+![Blazor Numeric TextBox with custom format](./images/blazor-numerictextbox-custom-format.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/getting-started-webapp.md b/blazor/numeric-textbox/getting-started-webapp.md
index f232cf46f2..0c7e82520e 100644
--- a/blazor/numeric-textbox/getting-started-webapp.md
+++ b/blazor/numeric-textbox/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting started with Blazor NumericTextBox in Blazor Web App
 
-This section briefly explains about how to include [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include [Blazor NumericTextBox](https
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor NumericTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor NumericTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add **Blazor NumericTextBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzXCKXVVvZqDCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor NumericTextBox Component](./images/blazor-numerictextbox-component.png)" %}
 
@@ -229,7 +258,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 ## Range validation
 
-You can set the minimum and maximum range of values in the NumericTextBox using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Max) properties, so the numeric value should be in the min and max range.
+Set the minimum and maximum allowed values using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Max) properties. The input value must fall within this range.
 
 {% tabs %}
 {% highlight razor %}
@@ -243,7 +272,7 @@ You can set the minimum and maximum range of values in the NumericTextBox using
 
 ## Formatting the value
 
-Users can set the format of the NumericTextBox component using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Format) property. The value will be displayed in the specified format, when the component is in focused out state.
+Set the display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Format) property. The value is displayed in the specified format when the component is not focused.
 
 {% tabs %}
 {% highlight razor %}
@@ -257,7 +286,7 @@ Users can set the format of the NumericTextBox component using the [Format](http
 
 ## Precision of numbers
 
-You can restrict the number of decimals to be entered in the NumericTextBox by using the [Decimals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Decimals) and [ValidateDecimalOnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ValidateDecimalOnType) properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.
+Restrict the number of decimals to be entered in the NumericTextBox by using the [Decimals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Decimals) and [ValidateDecimalOnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ValidateDecimalOnType) properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.
 
 If `ValidateDecimalOnType` is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
 
diff --git a/blazor/numeric-textbox/getting-started.md b/blazor/numeric-textbox/getting-started.md
index 8582c12b37..d763614d91 100644
--- a/blazor/numeric-textbox/getting-started.md
+++ b/blazor/numeric-textbox/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor NumericTextBox Component
 
-This section briefly explains about how to include [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section  explains how to add the [Blazor Numeric TextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
 
-To get started quickly with Blazor NumericTextBox, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/NumericTextBox) sample.
+To get started quickly with the Blazor Numeric TextBox, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/NumericTextBox) sample.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=QJGjKRXurv8"%}
@@ -26,11 +26,11 @@ To get started quickly with Blazor NumericTextBox, check on the following video
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor NumericTextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor NumericTextBox component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the Package Manager commands shown below.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following terminal commands (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -68,11 +68,11 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+## Install Syncfusion Blazor Inputs and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure you are in the project root directory where the .csproj file is located.
+- Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -94,7 +94,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -129,7 +129,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html**.
 
 ```html
 <head>
@@ -142,7 +142,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor NumericTextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox component in the **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -158,7 +158,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NumericTextBox c
 
 ## Range validation
 
-You can set the minimum and maximum range of values in the NumericTextBox using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Max) properties, so the numeric value should be in the min and max range.
+Set the minimum and maximum range of values in the NumericTextBox using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Max) properties, so the numeric value should be in the min and max range.
 
 {% tabs %}
 {% highlight razor %}
@@ -172,7 +172,7 @@ You can set the minimum and maximum range of values in the NumericTextBox using
 
 ## Formatting the value
 
-Users can set the format of the NumericTextBox component using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Format) property. The value will be displayed in the specified format, when the component is in focused out state.
+Set the display format of the NumericTextBox component using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Format) property. The value is displayed in the specified format when the component is not focused.
 
 {% tabs %}
 {% highlight razor %}
@@ -186,7 +186,7 @@ Users can set the format of the NumericTextBox component using the [Format](http
 
 ## Precision of numbers
 
-You can restrict the number of decimals to be entered in the NumericTextBox by using the [Decimals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Decimals) and [ValidateDecimalOnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ValidateDecimalOnType) properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.
+Restrict the number of decimals to be entered in the NumericTextBox by using the [Decimals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Decimals) and [ValidateDecimalOnType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ValidateDecimalOnType) properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.
 
 If `ValidateDecimalOnType` is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
 
@@ -206,4 +206,4 @@ If `ValidateDecimalOnType` is false, number of decimals will not be restricted.
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/globalization.md b/blazor/numeric-textbox/globalization.md
index fab05b4d93..57994aee56 100644
--- a/blazor/numeric-textbox/globalization.md
+++ b/blazor/numeric-textbox/globalization.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Globalization in Blazor Numeric TextBox Component
 
-[Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor NumericTextBox](https://www.syncfusion.com/blazor-components/blazor-numeric-textbox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
 ## Right to Left
 
 RTL provides an option to switch the text direction and layout of the NumericTextBox component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL NumericTextBox, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_EnableRtl) to true.
 
-The following code example initializes the NumericTextBox component in `Chinese` culture.
+The following code example initializes the Numeric TextBox in `Chinese` culture.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -33,4 +33,4 @@ The following code example initializes the NumericTextBox component in `Chinese`
 }
 ```
 
-![Right to Left in Blazor NumericTextBox](./images/blazor-numerictextbox-right-to-left.png)
\ No newline at end of file
+![Right to Left in Blazor Numeric TextBox](./images/blazor-numerictextbox-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/how-to/customize-the-spin-buttons-up-and-down-arrow.md b/blazor/numeric-textbox/how-to/customize-the-spin-buttons-up-and-down-arrow.md
index dc785413ce..28f078db74 100644
--- a/blazor/numeric-textbox/how-to/customize-the-spin-buttons-up-and-down-arrow.md
+++ b/blazor/numeric-textbox/how-to/customize-the-spin-buttons-up-and-down-arrow.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Customize the up and down arrow in Blazor Numeric TextBox Component
 
-This section explains how to change or customize spin up and down icons. You can customize spin button icons using `e-spin-up` and `e-spin-down` classes of those buttons.
+This section explains how to change or customize spin up and down icons. Customize spin button icons using `e-spin-up` and `e-spin-down` classes of those buttons.
 
-You can override the default icons of `e-spin-up` and `e-spin-down` classes using the following CSS code snippets.
+The default icons of `e-spin-up` and `e-spin-down` classes using the following CSS code snippets.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -29,4 +29,4 @@ You can override the default icons of `e-spin-up` and `e-spin-down` classes usin
     }
 </style>
 ```
-![Customizing Up and Down Arrow in Blazor NumericTextBox](../images/blazor-numerictextbox-custom-icon.png)
\ No newline at end of file
+![Customizing Up and Down Arrow in Blazor Numeric TextBox](../images/blazor-numerictextbox-custom-icon.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/how-to/customize-the-step-value-and-hide-spin-buttons.md b/blazor/numeric-textbox/how-to/customize-the-step-value-and-hide-spin-buttons.md
index 301901b0c9..6779a65917 100644
--- a/blazor/numeric-textbox/how-to/customize-the-step-value-and-hide-spin-buttons.md
+++ b/blazor/numeric-textbox/how-to/customize-the-step-value-and-hide-spin-buttons.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize step value and hide spin buttons in Blazor NumericTextBox
 
-The spin buttons allows to increase or decrease the value with the predefined [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Step) value. The visibility of spin buttons can be set using the [ShowSpinButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ShowSpinButton) property.
+Spin buttons allows to increase or decrease the value with the predefined [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_Step) value. The visibility of spin buttons can be set using the [ShowSpinButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_ShowSpinButton) property.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -17,4 +17,4 @@ The spin buttons allows to increase or decrease the value with the predefined [S
 <SfNumericTextBox TValue="int?" Value=10 Min=10 Max=100 Step=2 ShowSpinButton=false></SfNumericTextBox>
 ```
 
-![Hiding Spin Button in Blazor NumericTextBox](../images/blazor-numerictextbox-hide-spin-button.png)
\ No newline at end of file
+![Hiding Spin Button in Blazor Numeric TextBox](../images/blazor-numerictextbox-hide-spin-button.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/how-to/customize-the-ui-appearance-of-the-control.md b/blazor/numeric-textbox/how-to/customize-the-ui-appearance-of-the-control.md
index 5e40ab6b52..74b32923a5 100644
--- a/blazor/numeric-textbox/how-to/customize-the-ui-appearance-of-the-control.md
+++ b/blazor/numeric-textbox/how-to/customize-the-ui-appearance-of-the-control.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the UI appearance of Blazor Numeric TextBox Component
 
-You can change the appearance of the NumericTextBox by adding custom [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_CssClass) to the component and enabling styles.
+Change the appearance of the NumericTextBox by adding custom [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html#Syncfusion_Blazor_Inputs_SfNumericTextBox_1_CssClass) to the component and enabling styles.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -50,4 +50,4 @@ You can change the appearance of the NumericTextBox by adding custom [CssClass](
 </style>
 ```
 
-![Customizing UI Appearance of Blazor NumericTextBox](../images/blazor-numerictextbox-ui-customization.png)
\ No newline at end of file
+![Customizing UI Appearance of Blazor Numeric TextBox](../images/blazor-numerictextbox-ui-customization.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/how-to/numeric-textbox-model-binding.md b/blazor/numeric-textbox/how-to/numeric-textbox-model-binding.md
index dcff7c6b7e..24201caefa 100644
--- a/blazor/numeric-textbox/how-to/numeric-textbox-model-binding.md
+++ b/blazor/numeric-textbox/how-to/numeric-textbox-model-binding.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Model Binding in Blazor Numeric TextBox Component
 
-This section demonstrates the strongly typed extension support in NumericTextBox. The view which binds with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render components.
+This section demonstrates binding the SfNumericTextBox value to a model using EditForm, along with data annotation–based validation. The example binds to a nullable integer (int?) model property to allow an empty state and shows how validation messages are displayed for the bound field.
 
-In this sample, first click the submit button to post the selected value in the MaskedTextBox. When posting the null value, validation error message will be shown below the NumericTextBox.
+In this sample, select a value in the Numeric TextBox and click Submit to trigger form validation. When the bound value is null, a validation error message is displayed below the Numeric TextBox based on the Required attribute. The form uses EditForm with DataAnnotationsValidator to enable validation, and ValidationMessage to display field-specific errors.
 
 ```cshtml
 @using System.ComponentModel.DataAnnotations
@@ -41,5 +41,4 @@ In this sample, first click the submit button to post the selected value in the
 }
 ```
 
-
-![Validation in Blazor NumericTextBox](../images/blazor-numerictextbox-validation.png)
\ No newline at end of file
+![Validation in Blazor Numeric TextBox](../images/blazor-numerictextbox-validation.png)
\ No newline at end of file
diff --git a/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md b/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
index 868b694fb3..3cc4e35108 100644
--- a/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
+++ b/blazor/numeric-textbox/how-to/open-numeric-keyboard-in-numeric-textbox-component.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Open Numeric Keyboard in Numeric TextBox Component
 
-When implementing a Numeric TextBox in a web application, it is often desirable to restrict input to numeric values and to display the numeric keyboard on devices that support it. This can enhance the user experience by providing an appropriate keyboard for data entry.
+On mobile and touch devices, providing a numeric keyboard improves data entry for number inputs. This topic explains how to hint supported browsers to show a numeric keypad while keeping the Numeric TextBox behavior intact.
 
 ## Enabling the Numeric Keyboard
 
-To configure the Numeric TextBox to use the numeric keyboard, you can set the `type` attribute to `"tel"`. This instructs the browser to display the numeric keyboard on devices where it is available.
+A practical way to suggest a numeric keypad on many mobile browsers is to set the input type to "tel", which often triggers a number-centric keypad. Behavior varies by device and browser.
 
 Here is an example code snippet using the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Numeric TextBox component:
 
@@ -35,7 +35,7 @@ It is important to note that not all browsers support the `type="tel"` attribute
 
 ## Live Sample
 
-To see a live example of the Numeric Textbox configured for the numeric keyboard, visit the following link:
+To see a live example of the Numeric TextBox configured for the numeric keyboard, visit the following link:
 
 [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Playground - Numeric Textbox](https://blazorplayground.syncfusion.com/embed/rDLpjJrOLrHzOprq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5)
 
diff --git a/blazor/numeric-textbox/native-events.md b/blazor/numeric-textbox/native-events.md
index e568cbc0a6..507ac5cfaa 100644
--- a/blazor/numeric-textbox/native-events.md
+++ b/blazor/numeric-textbox/native-events.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Native Events in Blazor Numeric TextBox Component
 
-This section explains the steps to include native events and pass data to event handler in the NumericTextBox component.
+This section explains how to attach native DOM events to the Numeric TextBox and how to pass event data to handlers.
 
 ## Bind native events to NumericTextBox
 
-You can access any native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Attach native event by using on `<event>` attribute with a component. The attribute's value is treated as an event handler method.
 
-In the following example, the KeyPressed method is called every time the key is pressed on input.
+In the following example, the KeyPressed method is invoked every time a key is pressed in the input.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is
 }
 ```
 
-Also, you can rewrite the previous example code as follows using Lambda expressions.
+The same behavior can be expressed with a lambda expression.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -39,14 +39,13 @@ Also, you can rewrite the previous example code as follows using Lambda expressi
 
 ## Pass event data to event handler
 
-Blazor provides set of argument types to map to native events. The list of event types and event arguments are:
-
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+Blazor provides strongly typed event argument classes that map to native events. Common examples include:
+- Focus events: FocusEventArgs
+- Mouse events: MouseEventArgs
+- Keyboard events: KeyboardEventArgs
+- Input/change events: ChangeEventArgs
+- Touch events: TouchEventArgs
+- Pointer events: PointerEventArgs
 
 In the following example, the KeyPressed method is called every time any key is pressed inside input. But the message will be printed when you press "n" key.
 
@@ -66,7 +65,7 @@ In the following example, the KeyPressed method is called every time any key is
 }
 ```
 
-Using Lambda expression also, you can pass the event data to the event handler.
+Using a lambda expression, event data can be forwarded to the handler as shown above.
 
 ## List of Native events supported
 
diff --git a/blazor/numeric-textbox/style-appearance.md b/blazor/numeric-textbox/style-appearance.md
index 24aee93c5e..9867b4d372 100644
--- a/blazor/numeric-textbox/style-appearance.md
+++ b/blazor/numeric-textbox/style-appearance.md
@@ -13,7 +13,7 @@ The following content provides the exact CSS structure that can be used to modif
 
 ## Customizing the appearance of Numeric TextBox container element
 
-Use the following CSS to customize the appearance of Numeric TextBox container element.
+Use the following CSS to customize the appearance of the Numeric TextBox container element. This example adjusts the input’s height and font size. Note that the selectors shown apply to all inputs using the same theme classes; scope them with a custom class or the .e-numeric root to limit the impact to specific instances.
 
 ```css
 /* To specify height and font size */
@@ -26,7 +26,7 @@ Use the following CSS to customize the appearance of Numeric TextBox container e
 
 ## Customizing the Numeric TextBox icons
 
-Use the following CSS to customize the Numeric TextBox icons
+Use the following CSS to customize the Numeric TextBox icons. This selector adjusts the size and background of the spin button icons; for finer control, target .e-spin-up and .e-spin-down individually. Ensure sufficient color contrast and preserve visible focus/hover states for accessibility.
 
 ```css
 /* To specify font size and background color */
@@ -34,4 +34,4 @@ Use the following CSS to customize the Numeric TextBox icons
         font-size: 20px;
         background-color: beige;
 }
-```
+```
\ No newline at end of file
diff --git a/blazor/otp-input/accessibility.md b/blazor/otp-input/accessibility.md
index 16dceb7b11..52bae20410 100644
--- a/blazor/otp-input/accessibility.md
+++ b/blazor/otp-input/accessibility.md
@@ -9,19 +9,19 @@ documentation: ug
 
 # Accessibility in Blazor OTP Input component
 
-The Blazor OTP Input component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor OTP Input component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor OTP Input component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> |
 
 <style>
     .post .post-content img {
@@ -29,11 +29,11 @@ The accessibility compliance for the Blazor OTP Input component is outlined belo
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Supported"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Partially supported"> - Some features of the component do not fully meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
@@ -41,8 +41,8 @@ The following ARIA attributes are used in the OTP Input component:
 
 | Attributes | Purpose |
 | ------------ | ----------------------- |
-| `role=group` | Attributes used to form a collection of items.|
-| `aria-label` | Attributes provides the text label for the OTP Inputs. |
+| `role=group` | Applied to the container to group the OTP input fields. |
+| `aria-label` | Provides a text label for the OTP input fields for assistive technologies. |
 
 ## Keyboard interaction
 
@@ -51,7 +51,7 @@ The following keyboard shortcuts are supported by the OTP Input component.
 | Windows | Mac | Actions |
 | --- | --- | --- |
 | <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous input in the OTP. |
-| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next input in OTP |
+| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next input in the OTP. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the initial focus and shifts focus to the next input of the OTP. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous input of the OTP. |
 
@@ -61,7 +61,7 @@ The following keyboard shortcuts are supported by the OTP Input component.
 
 ## HtmlAttributes
 
-HtmlAttributes allow you to specify additional HTML attributes to be applied to the OTP input component.
+HtmlAttributes allow specifying additional HTML attributes to be applied to the OTP input component for improved semantics and accessibility.
 
 You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_HtmlAttributes) property.
 
@@ -82,8 +82,9 @@ You can pass HTML attributes as key-value pairs to the [HtmlAttributes](https://
 
 ## AriaLabels
 
-AriaLabels define the ARIA-label attribute for each input field in the OTP input component. ARIA-labels enhance accessibility by providing descriptive labels for screen reader users, improving the user experience for individuals with disabilities.
-You can provide an array of strings as ARIA-labels to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the ARIA-label attribute for the respective input field in the OTP input component.
+AriaLabels define the aria-label attribute for each input field in the OTP input component. aria-label values enhance accessibility by providing descriptive labels for screen reader users.
+
+You can provide an array of strings as aria-label values to the [AriaLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_AriaLabels) property. Each string corresponds to the aria-label attribute for the respective input field in the OTP input component.
 
 ```cshtml
 
diff --git a/blazor/otp-input/appearance.md b/blazor/otp-input/appearance.md
index f160f1d064..b523000f1f 100644
--- a/blazor/otp-input/appearance.md
+++ b/blazor/otp-input/appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Appearance in Blazor OTP Input component
 
-You can also customize the appearance of OTP Input component.
+Customize the appearance of the OTP input component, including input length, disabled state, and visual styles.
 
 ## Setting input length
 
-You can specify the length of OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`.
+Specify the length of the OTP by using the [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Length) property. The default value is `4`. This value determines the number of input fields rendered for the OTP.
 
 ```cshtml
 
@@ -27,7 +27,7 @@ You can specify the length of OTP by using the [Length](https://help.syncfusion.
 
 ## Disable inputs
 
-You can disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default the value is `false`.
+Disable the OTP Input component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Disabled) property. By default, the value is `false`. When disabled, the input fields are non-interactive and display the disabled visual style.
 
 ```cshtml
 
@@ -41,9 +41,9 @@ You can disable the OTP Input component by using the [Disabled](https://help.syn
 
 ## CssClass
 
-You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property.
+Customize the appearance of the OTP Input component by changing colors, fonts, sizes, and other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_CssClass) property.
 
-The OTP input component supports the following predefined styles that can be defined using the `CssClass` property. You can customize by replacing the `CssClass` property with the below defined class names.
+The OTP input component supports the following predefined styles that can be applied using the `CssClass` property. Replace the `CssClass` value with one of the following class names to apply the corresponding style.
 
 | cssClass | Description |
 | -------- | -------- |
@@ -59,4 +59,4 @@ The OTP input component supports the following predefined styles that can be def
 
 ```
 
-![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png)
+![Blazor OTP Input Component with CssClass](images/blazor-otp-success.png)
\ No newline at end of file
diff --git a/blazor/otp-input/events.md b/blazor/otp-input/events.md
index 0540ad1336..df765a3a24 100644
--- a/blazor/otp-input/events.md
+++ b/blazor/otp-input/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor OTP Input component
 
-This section describes the OTP Input events that will be triggered when appropriate actions are performed. The following events are available in the OTP Input component.
+This section describes the OTP Input events triggered by user interaction and component lifecycle. The following events are available in the OTP Input component.
 
 ## Created
 
-The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when the component rendering is completed.
+The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Created) event when component rendering is completed.
 
 ```cshtml
 
@@ -30,9 +30,9 @@ The OTP Input component triggers the [Created](https://help.syncfusion.com/cr/bl
 
 ```
 
-## OnFocus 
+## OnFocus
 
-The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when the OTP Input is focused. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) passed as an event argument provides the details of the focus event.
+The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnFocus) event when an OTP input field receives focus. The [OtpFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusInEventArgs.html) event argument provides details about the focus-in action, such as the focused input.
 
 ```cshtml
 
@@ -51,7 +51,7 @@ The OTP Input component triggers the [OnFocus](https://help.syncfusion.com/cr/bl
 
 ## OnBlur
 
-The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when the OTP Input is focused out. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) passed as an event argument provides the details of the blur event.
+The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnBlur) event when focus leaves an OTP input field or the component. The [OtpFocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpFocusOutEventArgs.html) event argument provides details about the blur action, such as the input that lost focus.
 
 ```cshtml
 
@@ -70,7 +70,7 @@ The OTP Input component triggers the [OnBlur](https://help.syncfusion.com/cr/bla
 
 ## OnInput
 
-The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of each OTP Input is changed. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) passed as an event argument provides the details of the each value is changed.
+The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_OnInput) event when the value of an individual OTP input field changes. The [OtpInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputEventArgs.html) event argument provides details about the change, such as the input index and the current value.
 
 ```cshtml
 
@@ -85,4 +85,4 @@ The OTP Input component triggers the [OnInput](https://help.syncfusion.com/cr/bl
     }
 }
 
-```
+```
\ No newline at end of file
diff --git a/blazor/otp-input/getting-started-webapp.md b/blazor/otp-input/getting-started-webapp.md
index 3c0da87c7e..338e9c8b29 100644
--- a/blazor/otp-input/getting-started-webapp.md
+++ b/blazor/otp-input/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor OTP Input in Blazor Web App
 
-This section briefly explains about how to include `Blazor OTP Input` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include `Blazor OTP Input` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 To get started quickly with Blazor OTP Input component, check on the following video:
 
@@ -26,15 +26,17 @@ To get started quickly with Blazor OTP Input component, check on the following v
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor OTP Input** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor OTP Input** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -47,7 +49,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -59,9 +61,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -75,11 +77,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -97,20 +97,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add **Blazor OTP Input** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -121,9 +170,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -157,27 +208,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -198,16 +228,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/otp-input/getting-started.md b/blazor/otp-input/getting-started.md
index 7604287223..2397590513 100644
--- a/blazor/otp-input/getting-started.md
+++ b/blazor/otp-input/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor OTP Input component
 
-This section briefly explains about how to include `Blazor OTP Input` component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This guide explains how to add the `Blazor OTP Input` component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -21,11 +21,11 @@ This section briefly explains about how to include `Blazor OTP Input` component
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor OTP Input** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add **Blazor OTP Input** component in the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details.
 
 {% endtabcontent %}
 
@@ -48,9 +48,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -66,8 +66,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -81,7 +81,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the complete package list and component details.
 
 {% endtabcontent %}
 
@@ -89,7 +89,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -133,11 +133,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover available methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes. See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to adding script references. The script reference is required for component interactivity.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor OTP Input component in the **~/Pages/Index.razor** file.
+Add the Syncfusion Blazor OTP Input component to the **~/Pages/Index.razor** file.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/otp-input/input-types.md b/blazor/otp-input/input-types.md
index f2bc7ae5a0..2ff3114152 100644
--- a/blazor/otp-input/input-types.md
+++ b/blazor/otp-input/input-types.md
@@ -11,11 +11,11 @@ documentation: ug
 
 ## Types
 
-This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases.
+This section explains the available types of the OTP (one-time password) input component, their default behaviors, and appropriate use cases.
 
 ### Number type
 
-You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Number) to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default `Type` property is `Number`.
+Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Number) to accept only numeric characters. This is ideal for OTP scenarios with digit-only codes. The default `Type` is `Number`.
 
 ```cshtml
 
@@ -25,11 +25,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 
 ```
 
-![Blazor OTP Input Component with Number Type](images/blazor-otp-number.png)
+![Blazor OTP input component with number type](images/blazor-otp-number.png)
 
 ### Text type
 
-You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Text) to use this input type as text. This is suitable when the OTP input need to include both letters and numbers.
+Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Text) to allow alphanumeric input. Use this when the OTP may include both letters and numbers.
 
 ```cshtml
 
@@ -39,11 +39,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 
 ```
 
-![Blazor OTP Input Component with Text Type](images/blazor-otp-text.png)
+![Blazor OTP input component with text type](images/blazor-otp-text.png)
 
 ### Password type
 
-You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Password) to use this input type as password in the OTP Input.
+Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Type) property to [Password](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputType.html#Syncfusion_Blazor_Inputs_OtpInputType_Password) to mask entered characters for privacy while typing. The underlying value remains the same; only the display is obscured.
 
 ```cshtml
 
@@ -53,11 +53,11 @@ You can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 
 ```
 
-![Blazor OTP Input Component with Password Type](images/blazor-otp-password.png)
+![Blazor OTP input component with password type](images/blazor-otp-password.png)
 
 ## Value
 
-You can specify the value of OTP Input by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Value) property.
+Specify the initial OTP value by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Value) property. 
 
 ```cshtml
 
@@ -67,4 +67,4 @@ You can specify the value of OTP Input by using the [Value](https://help.syncfus
 
 ```
 
-![Blazor OTP Input Component with Value](images/blazor-otp-number.png)
+![Blazor OTP input component with value](images/blazor-otp-number.png)
\ No newline at end of file
diff --git a/blazor/otp-input/placeholder.md b/blazor/otp-input/placeholder.md
index 2edc23c6c0..31e23cac2d 100644
--- a/blazor/otp-input/placeholder.md
+++ b/blazor/otp-input/placeholder.md
@@ -11,7 +11,7 @@ documentation: ug
 
 The placeholder in OTP Input specifies the text that is shown as a hint or placeholder until the user enters a value in the input field. It acts as a guidance for the users regarding the expected input format or purpose of the input field.
 
-You can set the placeholder text by using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Placeholder) property. Additionally, when providing a single character as the placeholder value all input fields within the OTP Input component will display the same character.
+Set the placeholder text by using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Placeholder) property. When a single character is provided, all input fields display the same character.
 
 ```cshtml
 
@@ -23,7 +23,7 @@ You can set the placeholder text by using the [Placeholder](https://help.syncfus
 
 ![Blazor OTP Input Component with Placeholder](images/blazor-otp-char.png)
 
-When a placeholder with multiple placeholder characters is provided each input field will display characters from the placeholder string in sequence based on the available OTP Input length.
+When a placeholder string with multiple characters is provided, characters are assigned to input fields from left to right up to the configured OTP length. If the placeholder string contains more characters than the OTP length, extra characters are ignored; if it contains fewer, only those positions display placeholder characters.
 
 ```cshtml
 
@@ -33,4 +33,4 @@ When a placeholder with multiple placeholder characters is provided each input f
 
 ```
 
-![Blazor OTP Input Component with Placeholder as string](images/blazor-otp-string.png)
+![Blazor OTP input component with placeholder as string](images/blazor-otp-string.png)
\ No newline at end of file
diff --git a/blazor/otp-input/separator.md b/blazor/otp-input/separator.md
index 7270116dd3..8a2ff15258 100644
--- a/blazor/otp-input/separator.md
+++ b/blazor/otp-input/separator.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Separator in Blazor OTP Input component
 
-The separator in OTP Input specifies the character or symbol used to separate each input field in the OTP Input component. This separator is displayed between each input field to visually distinguish between each inputs. You can set the separator character by using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Separator) property.
+The separator in the OTP input component is the character or string rendered between adjacent input fields to visually distinguish them. Configure the separator using the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_Separator) property.
 
 ```cshtml
 
diff --git a/blazor/otp-input/styling-modes.md b/blazor/otp-input/styling-modes.md
index 9921e17dda..d6b7e23061 100644
--- a/blazor/otp-input/styling-modes.md
+++ b/blazor/otp-input/styling-modes.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Styling Modes in Blazor OTP Input component
 
-Styling modes specify the style variants for the input fields in the OTP Input component. These modes allows you to customize the appearance of the OTP Input fields.
+Styling modes specify the visual variants for the input fields in the OTP input component. These modes allow customization of the inputs’ appearance to match application design.
 
 ## Outline mode
 
-You can use the outline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Outlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Outlined). The default styling mode is `Outlined`.
+Use the outline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Outlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Outlined). The default styling mode is `Outlined`.
 
 ```cshtml
 
@@ -23,11 +23,11 @@ You can use the outline style by setting the [StylingMode](https://help.syncfusi
 
 ```
 
-![Blazor OTP Input Component with Outline Mode](images/blazor-otp-outlined.png)
+![Blazor OTP input component with outlined mode](images/blazor-otp-outlined.png)
 
 ## Filled mode
 
-You can use the filled style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Filled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Filled).
+Use the filled style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Filled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Filled).
 
 ```cshtml
 
@@ -37,11 +37,11 @@ You can use the filled style by setting the [StylingMode](https://help.syncfusio
 
 ```
 
-![Blazor OTP Input Component with Filled Mode](images/blazor-otp-filled.png)
+![Blazor OTP input component with filled mode](images/blazor-otp-filled.png)
 
 ## Underline mode
 
-You can use the underline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Underlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Underlined).
+Use the underline style by setting the [StylingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfOtpInput.html#Syncfusion_Blazor_Inputs_SfOtpInput_StylingMode) property to [Underlined](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.OtpInputStyle.html#Syncfusion_Blazor_Inputs_OtpInputStyle_Underlined).
 
 ```cshtml
 
@@ -51,4 +51,4 @@ You can use the underline style by setting the [StylingMode](https://help.syncfu
 
 ```
 
-![Blazor OTP Input Component with Underlined Mode](images/blazor-otp-underlined.png)
+![Blazor OTP input component with underlined mode](images/blazor-otp-underlined.png)
\ No newline at end of file
diff --git a/blazor/pivot-table/getting-started-with-server-app.md b/blazor/pivot-table/getting-started-with-server-app.md
index e499218c55..5eb58b4641 100644
--- a/blazor/pivot-table/getting-started-with-server-app.md
+++ b/blazor/pivot-table/getting-started-with-server-app.md
@@ -677,4 +677,4 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
\ No newline at end of file
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
diff --git a/blazor/predefined-dialogs/animation.md b/blazor/predefined-dialogs/animation.md
index 8621302bd0..c85a75721d 100644
--- a/blazor/predefined-dialogs/animation.md
+++ b/blazor/predefined-dialogs/animation.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Animation in Predefined Dialogs in Blazor
 
-The predefined dialogs can be animated during the open and close actions. You can customize the `Delay`, `Duration`, and `Effect` of animation by using the [DialogOptions.AnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AnimationSettings) property.
+The predefined dialogs (Alert, Confirm, and Prompt) support animation on open and close. Customize the animation `Delay` (ms), `Duration` (ms), and `Effect` using the [DialogOptions.AnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AnimationSettings) property of type [DialogAnimationSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogAnimationSettings.html). The `Effect` accepts values from the [DialogEffect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEffect.html) enumeration. If not specified, the dialog uses its default animation settings.
 
-In the following sample, the zoom effect is enabled. So, the dialog will open with the zoom in and close with the zoom out effect.
+In the following sample, the zoom effect (`DialogEffect.Zoom`) is used. The dialog opens with a zoom-in animation and closes with a zoom-out animation.
 
 {% tabs %}
 
@@ -27,4 +27,4 @@ In the following sample, the zoom effect is enabled. So, the dialog will open wi
 {% include_relative code-snippet/prompt-animation.razor %}
 {% endhighlight %}
 
-{% endtabs %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/predefined-dialogs/customization.md b/blazor/predefined-dialogs/customization.md
index 34782b4402..76d72e4828 100644
--- a/blazor/predefined-dialogs/customization.md
+++ b/blazor/predefined-dialogs/customization.md
@@ -11,17 +11,17 @@ documentation: ug
 
 ## Customize action buttons
 
-You can customize the predefined dialogs buttons by using below properties.
-* [DialogOptions.PrimaryButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_PrimaryButtonOptions) - Use this property to customize **OK** button text and appearence.
-* [DialogOptions.CancelButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CancelButtonOptions) - Use this property to customize **Cancel** button text and appearence.
+Customize predefined dialog buttons using the following properties:
+* [DialogOptions.PrimaryButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_PrimaryButtonOptions) - Customizes the primary (OK) button text and appearance.
+* [DialogOptions.CancelButtonOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CancelButtonOptions) - Customizes the secondary (Cancel) button text and appearance.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the predefined dialog action buttons.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to customize predefined dialog action buttons.
 
-For alert dialog , customized the default dialog button content as `Okay` by using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
+For the alert dialog, the default button content is customized to `Okay` using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
 
-For confirm dialog, customized the default dialog buttons content as `Yes` and `No` by using the `DialogButtonOptions.Content` property and also customized the dialog button icons by using [DialogButtonOptions.IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_IconCss) property.
+For the confirm dialog, the default button content is customized to `Yes` and `No` using the `DialogButtonOptions.Content` property, and the button icons are customized using the [DialogButtonOptions.IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_IconCss) property (provide CSS class names for icons).
 
-For prompt dialog , customized the default dialog buttons content as `Connect` and `Close` by using [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
+For the prompt dialog, the default button content is customized to `Connect` and `Close` using the [DialogButtonOptions.Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtonOptions.html#Syncfusion_Blazor_Popups_DialogButtonOptions_Content) property.
 
 {% tabs %}
 
@@ -43,21 +43,21 @@ For prompt dialog , customized the default dialog buttons content as `Connect` a
 
 **Alert**
 
-![Alert action buttons Dialog](./images/blazor-alert-action-button.png)
+![Alert dialog with customized action button](./images/blazor-alert-action-button.png)
 
 **Confirm**
 
-![Confirm action buttons Dialog](./images/blazor-confirm-action-button.png)
+![Confirm dialog with customized buttons](./images/blazor-confirm-action-button.png)
 
 **Prompt**
 
-![Prompt action buttons Dialog](./images/blazor-prompt-action-button.png)
+![Prompt dialog with customized Connect and Close buttons](./images/blazor-prompt-action-button.png)
 
 ## Show or hide dialog close button 
 
-You can show or hide close button in dialog using the [DialogOptions.ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ShowCloseIcon) property.The default value is `false`.
+Show or hide the close button in predefined dialogs using the [DialogOptions.ShowCloseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ShowCloseIcon) property. The default value is `false`.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the show or hide dialog close button.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to show or hide the dialog close button.
 
 {% tabs %}
 
@@ -79,21 +79,21 @@ Use the following code snippet for **alert.razor**, **confirm.razor** and **prom
 
 **Alert**
 
-![Alert close icon Dialog](./images/blazor-alert-close-button.png)
+![Alert dialog showing the close icon](./images/blazor-alert-close-button.png)
 
 **Confirm**
 
-![Confirm close icon Dialog](./images/blazor-confirm-close-button.png)
+![Confirm dialog showing the close icon](./images/blazor-confirm-close-button.png)
 
 **Prompt**
 
-![Prompt close icon Dialog](./images/blazor-prompt-close-button.png)
+![Prompt dialog showing the close icon](./images/blazor-prompt-close-button.png)
 
 ### Customize dialog content
 
-You can load custom content in predefined dialogs using the [DialogOptions.ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ChildContent) property. 
+Load custom content in predefined dialogs using the [DialogOptions.ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_ChildContent) property.
 
-Use the following code to customize the dialog content and render the custom TextBox component inside the prompt dialog to obtain the username from the user using the `@bind-Value` property.
+Use the following code to customize the dialog content and render a custom TextBox component inside the prompt dialog to obtain a username from the user using the `@bind-Value` property.
 
 {% tabs %}
 {% highlight razor %}
@@ -103,4 +103,4 @@ Use the following code to customize the dialog content and render the custom Tex
 {% endhighlight %}
 {% endtabs %}
 
-![Customize Prompt Dialog](./images/blazor-customize-dialog.png)
+![Prompt dialog with custom content for username input](./images/blazor-customize-dialog.png)
\ No newline at end of file
diff --git a/blazor/predefined-dialogs/dimension.md b/blazor/predefined-dialogs/dimension.md
index a49f22ba84..713ed52536 100644
--- a/blazor/predefined-dialogs/dimension.md
+++ b/blazor/predefined-dialogs/dimension.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Dimension in Predefined Dialogs in Blazor
 
-Customize the predefined dialogs dimensions using the [DialogOptions.Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Height) and [DialogOptions.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Width) properties.
+Customize predefined dialog dimensions using the [DialogOptions.Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Height) and [DialogOptions.Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Width) properties.
 
-By default, the predefined dialogs `Width` and `Height` property value is set as `auto`. Depends on the dialog content the width and height values are automatically adjust. You can specify the dimension values in both pixels and percentage format to change the default dialog width and height values.
+By default, the `Width` and `Height` properties are set to `auto`. The dialog size adapts to its content when these values are not specified. Dimensions can be provided in pixels (for example, `300px`) or percentages (for example, `50%`) to override the default sizing.
 
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the dialog dimensions.
+Use the following code snippet for **alert.razor**, **confirm.razor**, and **prompt.razor** to customize dialog dimensions.
 
 {% tabs %}
 
@@ -35,21 +35,21 @@ Use the following code snippet for **alert.razor**, **confirm.razor** and **prom
 
 **Alert**
 
-![Alert dimension Dialog](./images/blazor-alert-dimension.png)
+![Alert dialog with custom width and height](./images/blazor-alert-dimension.png)
 
 **Confirm**
 
-![confirm dimension Dialog](./images/blazor-confirm-dimension.png)
+![Confirm dialog with custom width and height](./images/blazor-confirm-dimension.png)
 
 **Prompt**
 
-![prompt dimension Dialog](./images/blazor-prompt-dimension.png)
+![Prompt dialog with custom width and height](./images/blazor-prompt-dimension.png)
 
 ## Max-width and max-height
 
-To have a restricted max-width and max-height dialog dimension, you need to specify the max-width, max-height CSS properties for the component’s container element by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property. The max-height value is calculated in source level and set to the dialog. so, need to override the max-height property.
+To constrain the dialog’s maximum size, specify `max-width` and `max-height` CSS properties for the component’s container using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property. The component may apply an inline `max-height`; to override it, use a higher-specificity selector (or `!important` if necessary).
 
-Use the following code to customize the max-width and max-height for alert dialog:
+Use the following code to customize the max-width and max-height for the alert dialog:
 
 {% tabs %}
 {% highlight razor %}
@@ -59,13 +59,13 @@ Use the following code to customize the max-width and max-height for alert dialo
 {% endhighlight %}
 {% endtabs %}
 
-![Max width and height](./images/blazor-max-width-height.png)
+![Dialog constrained with max width and max height](./images/blazor-max-width-height.png)
 
 ## Min-width and min-height
 
-To have a restricted min-width and min-height dialog dimension, you need to specify the min-width, min-height CSS properties for the component’s container element by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property.
+To ensure a minimum dialog size (for example, to keep action buttons visible), specify `min-width` and `min-height` CSS properties for the component’s container using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_CssClass) property.
 
-Use the following code to customize the min-width and min-height for alert dialog:
+Use the following code to customize the min-width and min-height for the alert dialog:
 
 {% tabs %}
 {% highlight razor %}
@@ -75,4 +75,4 @@ Use the following code to customize the min-width and min-height for alert dialo
 {% endhighlight %}
 {% endtabs %}
 
-![Min width and height](./images/blazor-min-width-height.png)
\ No newline at end of file
+![Dialog constrained with min width and min height](./images/blazor-min-width-height.png)
\ No newline at end of file
diff --git a/blazor/predefined-dialogs/draggable.md b/blazor/predefined-dialogs/draggable.md
index d83c151c33..297ba5ad2b 100644
--- a/blazor/predefined-dialogs/draggable.md
+++ b/blazor/predefined-dialogs/draggable.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Draggable in the Predefined Dialogs in Blazor | Syncfusion
-description: Check out and learn here all about draggable in the predefined dialogs and much more details.
+description: Learn how to enable draggable behavior for predefined dialogs in Blazor, including alert, confirm, and prompt dialog examples.
 platform: Blazor
 control: Predefined Dialogs
 documentation: ug
@@ -9,7 +9,9 @@ documentation: ug
 
 # Draggable in Predefined Dialogs
 
-The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using the [DialogOptions.AllowDragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AllowDragging) property.
+Predefined dialogs support dragging by the dialog header, allowing users to reposition the dialog within its target container. Enable this behavior using the [DialogOptions.AllowDragging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_AllowDragging) property. The default value is `false`. Dragging requires a visible header; if the header is hidden or replaced, dragging behavior may be affected.
+
+The following examples demonstrate enabling dragging for Alert, Confirm, and Prompt dialogs.
 
 {% tabs %}
 
@@ -25,4 +27,4 @@ The predefined dialogs supports dragging within its target container by grabbing
 {% include_relative code-snippet/prompt-drag.razor %}
 {% endhighlight %}
 
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md
index f92710af87..d912d3042d 100644
--- a/blazor/predefined-dialogs/getting-started-webapp.md
+++ b/blazor/predefined-dialogs/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Predefined Dialogs in Blazor Web App
 
-This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include `Blazor Predefined Dialogs` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,15 +21,17 @@ This section briefly explains about how to include `Blazor Predefined Dialogs` c
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
 
-To add **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,9 +56,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+
+For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor Web App" %}
+
+dotnet new blazor -o BlazorWebApp -int Auto
+cd BlazorWebApp
+cd BlazorWebApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
+
+Here's an example of how to add the **Blazor Predefined Dialog** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
+
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Popups --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -154,28 +205,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddScoped<SfDialogService>();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -196,7 +225,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Blazor Dialog Provider
 
-`SfDialogProvider` allows to open predefined dialogs based on `SfDialogService` settings from any where in application. You can add `SfDialogProvider` in `MainLayout.razor` or any page. But it should be added only once in the app. If you add in `MainLayout.razor`, you can open predefined dialogs from any where in application. If you add in particular page, you can open dialogs only within the page.
+`SfDialogProvider` opens predefined dialogs based on `SfDialogService` settings from anywhere in the application. Add `SfDialogProvider` in `MainLayout.razor` or in a specific page, but include it only once in the app. When added to `MainLayout.razor`, predefined dialogs are available throughout the application; when added to a specific page, dialogs are available only within that page.
 
 * Now, add `SfDialogProvider` in the **~/Components/Layout/MainLayout.razor** file.
 
@@ -210,20 +239,19 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Open Predefined Dialog
 
-Once you added `SfDialogService` and `SfDialogProvider`, you can open predefined dialogs from any where in application using [AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_),[ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) or [PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) methods in [DialogServices](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html).
+After adding `SfDialogService` and `SfDialogProvider`, open predefined dialogs from anywhere in the application using the [AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_), [ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) or [PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) methods in [DialogService](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html).
 
 ### Show alert dialog
 
-An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog is displayed along with the `OK` button. When user clicks on `OK` button, alert dialog will get closed. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows:
+An alert dialog box is used to display errors, warnings, or informational messages that require user acknowledgment. This is achieved using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog displays an `OK` button. When the user selects `OK`, the alert dialog closes. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/*.razor` component as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -234,7 +262,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-In the code example below, an alert dialog is displayed upon clicking the button using the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) Component.
+In the following example, an alert dialog is displayed upon clicking a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) component.
 
 {% tabs %}
 {% highlight razor %}
@@ -248,9 +276,9 @@ In the code example below, an alert dialog is displayed upon clicking the button
 
 ### Show confirm dialog
 
-A confirm dialog box used to displays a specified message along with the `OK` and `Cancel` buttons, which returns a boolean value according to the user's click action. When the user clicks the `OK` button, the `true` value is returned otherwise it will returns the `false` value. This can be achieved by using the [DialogService.ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically.
+A confirm dialog displays a specified message with `OK` and `Cancel` buttons and returns a boolean value based on the user action. Selecting `OK` returns `true`; selecting `Cancel` returns `false`. Use the [DialogService.ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method to show a confirm dialog, typically before a critical action. After the user responds, the dialog closes automatically.
 
-In the below code example, the confirm dialog displayed on `OK` and `Cancel` button click action.
+In the following example, the confirm dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
 {% highlight razor %}
@@ -264,9 +292,9 @@ In the below code example, the confirm dialog displayed on `OK` and `Cancel` but
 
 ### Show prompt dialog
 
-A prompt dialog is used to get the input from the user by using the [DialogService.PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. When the user clicks the `OK` button the input value from the dialog is returned. If the user clicks the `Cancel` button the `null` value is returned. After getting the input from the user the dialog will disappear automatically.
+A prompt dialog is used to collect input from the user using the [DialogService.PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. When the user selects `OK`, the input value is returned; selecting `Cancel` returns `null`. After the user responds, the dialog closes automatically.
 
-In the below code example, the prompt dialog displayed on `OK` and `Cancel` button click action.
+In the following example, the prompt dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/predefined-dialogs/getting-started.md b/blazor/predefined-dialogs/getting-started.md
index f00ac8c91f..254004be72 100644
--- a/blazor/predefined-dialogs/getting-started.md
+++ b/blazor/predefined-dialogs/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Predefined Dialogs in Blazor
 
-This section briefly explains how to include the predefined dialogs in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include predefined dialogs in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -21,11 +21,11 @@ This section briefly explains how to include the predefined dialogs in your Blaz
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
 
-To add **Blazor predefined dialog** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor predefined dialog component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +36,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. A valid Syncfusion license must be registered in the application. For guidance, see the licensing overview in the Syncfusion documentation.
 
 {% endtabcontent %}
 
@@ -48,9 +48,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -66,8 +66,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Popups](https://www.nuget.org/packages/Syncfusion.Blazor.Popups) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies.
 
 {% tabs %}
 
@@ -81,7 +81,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. A valid Syncfusion license must be registered in the application. For guidance, see the licensing overview in the Syncfusion documentation.
 
 {% endtabcontent %}
 
@@ -89,7 +89,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service and Syncfusion<sup style="font-size:70%">&reg;</sup> Dialog Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Popups` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -100,7 +100,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="1 2 7 8" %}
@@ -121,7 +121,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided by NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of **~/wwwroot/index.html**.
 
 ```html
 <head>
@@ -130,11 +130,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to explore different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for approaches to include script references.
 
 ## Add Blazor Dialog Provider
 
-`SfDialogProvider` allows to open predefined dialogs based on `SfDialogService` settings from any where in application. You can add `SfDialogProvider` in `MainLayout.razor` or any page. But it should be added only once in the app. If you add in `MainLayout.razor`, you can open predefined dialogs from any where in application. If you add in particular page, you can open dialogs only within the page.
+`SfDialogProvider` opens predefined dialogs based on `SfDialogService` settings from anywhere in the application. Add `SfDialogProvider` in `MainLayout.razor` or in a specific page, but include it only once in the app. When added to `MainLayout.razor`, predefined dialogs can be opened from anywhere in the application. When added to a specific page, dialogs can be opened only within that page.
 
 * Now, add `SfDialogProvider` in the **~/_MainLayout.razor** file.
 
@@ -148,13 +148,13 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Open Predefined Dialog
 
-Once you added `SfDialogService` and `SfDialogProvider`, you can open predefined dialogs from any where in application using [AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_),[ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) or [PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) methods in [DialogServices](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html).
+After adding `SfDialogService` and `SfDialogProvider`, open predefined dialogs from anywhere in the application using [AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_), [ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_), or [PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) methods in [SfDialogService](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html).
 
 ### Show alert dialog
 
-An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. This can be achieved by using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog is displayed along with the `OK` button. When user clicks on `OK` button, alert dialog will get closed.
+An alert dialog is used to display errors, warnings, or informational messages that require user acknowledgment. This is achieved using the [DialogService.AlertAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_AlertAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. The alert dialog displays an `OK` button. When the user selects `OK`, the alert dialog closes.
 
-In the code example below, an alert dialog is displayed upon clicking the button using the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) Component.
+In the following example, an alert dialog is displayed when a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor [Button](https://blazor.syncfusion.com/documentation/button/getting-started) is clicked.
 
 {% tabs %}
 {% highlight razor %}
@@ -168,9 +168,9 @@ In the code example below, an alert dialog is displayed upon clicking the button
 
 ### Show confirm dialog
 
-A confirm dialog box used to displays a specified message along with the `OK` and `Cancel` buttons, which returns a boolean value according to the user's click action. When the user clicks the `OK` button, the `true` value is returned otherwise it will returns the `false` value. This can be achieved by using the [DialogService.ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically.
+A confirm dialog displays a specified message along with `OK` and `Cancel` buttons and returns a boolean value based on the user action. Selecting `OK` returns `true`; selecting `Cancel` returns `false`. This can be achieved using the [DialogService.ConfirmAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_ConfirmAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. It is typically used to get user approval before a critical action. After the user responds, the dialog closes automatically.
 
-In the below code example, the confirm dialog displayed on `OK` and `Cancel` button click action.
+In the following example, the confirm dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
 {% highlight razor %}
@@ -184,9 +184,9 @@ In the below code example, the confirm dialog displayed on `OK` and `Cancel` but
 
 ### Show prompt dialog
 
-A prompt dialog is used to get the input from the user by using the [DialogService.PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. When the user clicks the `OK` button the input value from the dialog is returned. If the user clicks the `Cancel` button the `null` value is returned. After getting the input from the user the dialog will disappear automatically.
+A prompt dialog is used to get input from the user using the [DialogService.PromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialogService.html#Syncfusion_Blazor_Popups_SfDialogService_PromptAsync_System_String_System_String_Syncfusion_Blazor_Popups_DialogOptions_) method. Selecting `OK` returns the input value; selecting `Cancel` returns `null`. After the user responds, the dialog closes automatically.
 
-In the below code example, the prompt dialog displayed on `OK` and `Cancel` button click action.
+In the following example, the prompt dialog is displayed and returns a value based on the `OK` or `Cancel` button click.
 
 {% tabs %}
 {% highlight razor %}
@@ -196,5 +196,4 @@ In the below code example, the prompt dialog displayed on `OK` and `Cancel` butt
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhfZiKjVvxKZQrI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prompt Dialog](./images/blazor-prompt-dialog.png)" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhfZiKjVvxKZQrI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Prompt Dialog](./images/blazor-prompt-dialog.png)" %}
\ No newline at end of file
diff --git a/blazor/predefined-dialogs/position.md b/blazor/predefined-dialogs/position.md
index 7f6d09d654..8746b5d622 100644
--- a/blazor/predefined-dialogs/position.md
+++ b/blazor/predefined-dialogs/position.md
@@ -9,13 +9,12 @@ documentation: ug
 
 # Positioning in Predefined Dialogs in Blazor
 
-Customize the dialog position by using the [DialogOptions.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Position) property. The position can be represented with specific `X` and `Y` values.
+Customize the dialog position using the [DialogOptions.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogOptions.html#Syncfusion_Blazor_Popups_DialogOptions_Position) property. The position is defined by `X` and `Y` values on the [PositionDataModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.PositionDataModel.html) type and is relative to the target container.
 
-* The `PositionDataModel.X` can be configured with a left, center, right, or offset value. By default, the value is set as `center`.
-* The `PositionDataModel.Y` can be configured with a top, center, bottom, or offset value. By default, the value is set as `center`.
-
-Use the following code snippet for **alert.razor**, **confirm.razor** and **prompt.razor** to customize the position. Here, customized the dialog position as X= "top" and Y= "center".
+* `PositionDataModel.X` can be set to `left`, `center`, `right`, or an offset value. The default is `center`.
+* `PositionDataModel.Y` can be set to `top`, `center`, `bottom`, or an offset value. The default is `center`.
 
+Use the following code snippets for **alert.razor**, **confirm.razor**, and **prompt.razor** to customize the position. In this example, the dialog position is set to X = `center` and Y = `top`.
 {% tabs %}
 
 {% highlight razor tabtitle="alert.razor" %}
@@ -36,12 +35,12 @@ Use the following code snippet for **alert.razor**, **confirm.razor** and **prom
 
 **Alert**
 
-![Alert position Dialog](./images/blazor-alert-position.png)
+![Alert dialog positioned at top center](./images/blazor-alert-position.png)
 
 **Confirm**
 
-![Confirm position Dialog](./images/blazor-confirm-position.png)
+![Confirm dialog positioned at top center](./images/blazor-confirm-position.png)
 
 **Prompt**
 
-![Prompt position Dialog](./images/blazor-prompt-position.png)
\ No newline at end of file
+![Prompt dialog positioned at top center](./images/blazor-prompt-position.png)
\ No newline at end of file
diff --git a/blazor/progress-button/accessibility.md b/blazor/progress-button/accessibility.md
index dec8ff1ccc..06cee4b716 100644
--- a/blazor/progress-button/accessibility.md
+++ b/blazor/progress-button/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor ProgressButton Component
 
-The Blazor ProgressButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor ProgressButton component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor ProgressButton component is outlined below.
 
@@ -38,16 +38,16 @@ The accessibility compliance for the Blazor ProgressButton component is outlined
 
 ## WAI-ARIA attributes
 
-The Blazor ProgressButton component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ProgressButton component:
+The Blazor ProgressButton component follows the [WAI-ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor ProgressButton component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `aria-label` | Provides an accessible name for the icon only ProgressButton. |
+| `aria-label` | Provides an accessible name for the icon-only ProgressButton. |
 | `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
 
 ## Keyboard interaction
 
-The Blazor ProgressButton component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ProgressButton component.
+The Blazor ProgressButton component follows keyboard interaction guidelines, making it usable for people who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts are supported by the Blazor ProgressButton component. Use Tab/Shift+Tab to move focus to the button, then activate it with Enter or Space.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
@@ -55,9 +55,9 @@ The Blazor ProgressButton component followed the keyboard interaction guideline,
 
 ## Ensuring accessibility
 
-The Blazor ProgressButton component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor ProgressButton component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor ProgressButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/progress-button) in a new window to evaluate the accessibility of the Blazor ProgressButton component with accessibility tools.
+The accessibility compliance of the Blazor ProgressButton component is shown in the following sample. Open the [sample site for ProgressButton accessibility](https://blazor.syncfusion.com/accessibility/progress-button) in a new window to evaluate the component with accessibility tools.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/progress-button.html" %}
 
diff --git a/blazor/progress-button/getting-started-webapp.md b/blazor/progress-button/getting-started-webapp.md
index e884bc7235..c95db20b41 100644
--- a/blazor/progress-button/getting-started-webapp.md
+++ b/blazor/progress-button/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor ProgressButton in Blazor Web App
 
-This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,19 @@ This section briefly explains about how to include [Blazor ProgressButton](https
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-To add **Blazor ProgressButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor ProgressButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
+
+Here's an example of how to add **Blazor ProgressButton** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.SplitButtons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,7 +250,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %}
 
diff --git a/blazor/progress-button/getting-started.md b/blazor/progress-button/getting-started.md
index 65458c6c8d..764af1ed7a 100644
--- a/blazor/progress-button/getting-started.md
+++ b/blazor/progress-button/getting-started.md
@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor ProgressButton Component
 
-This section briefly explains about how to include [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor ProgressButton](https://www.syncfusion.com/blazor-components/blazor-progress-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with ProgressButton Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton) sample.
+To get started quickly with the ProgressButton component in Blazor, refer to this video or the [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ProgressButton).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=ps2hvSBqPX0"%}
@@ -28,11 +28,11 @@ To get start quickly with ProgressButton Component using Blazor, you can check o
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-To add **Blazor ProgressButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor ProgressButton** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details.
 
 {% endtabcontent %}
 
@@ -55,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,8 +73,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure you are in the project root directory where your `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
 
 {% tabs %}
 
@@ -88,7 +88,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details.
 
 {% endtabcontent %}
 
@@ -96,7 +96,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -140,7 +140,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Check the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see the [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references.
 
 ## Add Blazor ProgressButton component
 
@@ -154,14 +154,14 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton c
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressButton component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLzDiqDgZzSLSvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ProgressButton Component](./images/blazor-progressbutton-component.png)" %}
 
 ## See also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
+* [Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button.
+N> Explore the [Blazor ProgressButton example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows how to render and configure the ProgressButton.
diff --git a/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md b/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md
index 57f8f37724..5aef08c9c1 100644
--- a/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md
+++ b/blazor/progress-button/how-to/change-the-text-content-and-styles-of-the-progressbutton-during-progress.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Change text content and styles of the Blazor ProgressButton Component
 
-You can change the text content and styles of the Progress Button during progress state by changing the text content and the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property at the [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin) and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd) events.
+Change the button text and styles during the progress state by updating the Content and the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) parameters in the [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin) and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd) event handlers.
 
 ```cshtml
 
diff --git a/blazor/progress-button/how-to/customize-progress-using-cssclass.md b/blazor/progress-button/how-to/customize-progress-using-cssclass.md
index 582ae51d30..3bf0a22013 100644
--- a/blazor/progress-button/how-to/customize-progress-using-cssclass.md
+++ b/blazor/progress-button/how-to/customize-progress-using-cssclass.md
@@ -9,12 +9,12 @@ documentation: ug
 
 # Customize progress using cssClass in Blazor ProgressButton Component
 
-You can customize the background filler UI using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property.
+Customize the progress indicator (filler) by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property.
 
-* Adding `e-vertical` to `CssClass` shows vertical progress.
-* Adding `e-progress-top` to `CssClass` shows progress at the top.
+* Adding `e-vertical` to `CssClass` displays vertical progress.
+* Adding `e-progress-top` to `CssClass` places the progress at the top of the button.
 
-You can also show reverse progress by adding custom class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property.
+Reverse progress can also be shown by adding a custom class through the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/progress-button/how-to/hide-spinner.md b/blazor/progress-button/how-to/hide-spinner.md
index 3bfa9ce9fa..4c62cd04b5 100644
--- a/blazor/progress-button/how-to/hide-spinner.md
+++ b/blazor/progress-button/how-to/hide-spinner.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Hide Spinner in Blazor ProgressButton Component
 
-You can hide spinner in the Progress Button by setting the `e-hide-spinner` property to [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass).
+Hide the spinner in the ProgressButton by applying the built-in e-hide-spinner CSS class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) parameter. This hides only the spinner while keeping the progress fill visible. Multiple CSS classes can be combined in CssClass as needed.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/progress-button/how-to/stop-progress-indicator.md b/blazor/progress-button/how-to/stop-progress-indicator.md
index 1c31e37242..eb0150766f 100644
--- a/blazor/progress-button/how-to/stop-progress-indicator.md
+++ b/blazor/progress-button/how-to/stop-progress-indicator.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Stop Progress Indicator in Blazor ProgressButton Component
 
-You can stop the progress indicator using [EndProgressAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_EndProgressAsync) method. In the following sample, the progress is stopped by clicking the `STOP` button.
+Stop the active progress programmatically by calling the [EndProgressAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_EndProgressAsync) method on the ProgressButton instance obtained via @ref. In the following example, clicking the Stop button invokes the handler that awaits EndProgressAsync to halt the current progress.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/progress-button/how-to/trace-events.md b/blazor/progress-button/how-to/trace-events.md
index e907370de2..66b6cb2e67 100644
--- a/blazor/progress-button/how-to/trace-events.md
+++ b/blazor/progress-button/how-to/trace-events.md
@@ -9,9 +9,11 @@ documentation: ug
 
 # Trace Events in Blazor ProgressButton Component
 
-The Progress Button component triggers events based on its actions. The events can be used as extension points to perform custom operations.
+The ProgressButton component triggers lifecycle events that can be used as extension points to perform custom logic and update the UI.
 
-The events available in Progress Button are [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnFailure), [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin), [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_Progressing), and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd).
+The events available in ProgressButton are [OnFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnFailure), [OnBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnBegin), [Progressing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_Progressing), and [OnEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonEvents.html#Syncfusion_Blazor_SplitButtons_ProgressButtonEvents_OnEnd). OnBegin fires when progress starts, Progressing fires while the progress updates, OnEnd fires when progress completes, and OnFailure fires if the operation fails.
+
+The following example wires the OnBegin, Progressing, and OnEnd events and displays the most recently triggered event in the UI. OnFailure is available but not shown in this sample.
 
 ```cshtml
 
diff --git a/blazor/progress-button/native-event.md b/blazor/progress-button/native-event.md
index 4d49e90062..a7c676e45d 100644
--- a/blazor/progress-button/native-event.md
+++ b/blazor/progress-button/native-event.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Native Events in Blazor ProgressButton Component
 
-You can define the native event using an `event` attribute in the component. The value of attribute is treated as an event handler. The event specific data will be available in the event arguments.
+Define native DOM events on the component by using Blazor’s @on{event} attributes. The attribute value is an event handler method, and event-specific data is provided through strongly typed event argument objects.
 
-The different event argument types for each event are,
+The different event argument types for each event are:
 
 * Focus Events - UIFocusEventArgs
 * Mouse Events - UIMouseEventArgs
diff --git a/blazor/progress-button/spinner-and-progress.md b/blazor/progress-button/spinner-and-progress.md
index 5a2548bb37..cc3758ff16 100644
--- a/blazor/progress-button/spinner-and-progress.md
+++ b/blazor/progress-button/spinner-and-progress.md
@@ -10,7 +10,7 @@ documentation: ug
 <!-- markdownlint-disable MD002 MD022 -->
 # Spinner and Progress in Blazor ProgressButton Component
 
-This section explains the Spinner and Progress of Progress Button.
+This section describes how to customize the spinner and configure progress behavior in the ProgressButton, including positioning and sizing the spinner, using a custom spinner template, animating content, changing step increments, updating progress dynamically, pausing/resuming, and completing progress programmatically.
 
 ## Spinner
 
@@ -24,7 +24,7 @@ Spinner size can be changed by modifying the [Width](https://help.syncfusion.com
 
 ### Spinner template
 
-You can use custom spinner by specifying the [SpinTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#Syncfusion_Blazor_SplitButtons_ProgressButtonSpinSettings_SpinTemplate) property of [SpinSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#properties) with custom styles.
+Use a custom spinner by specifying the [SpinTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#Syncfusion_Blazor_SplitButtons_ProgressButtonSpinSettings_SpinTemplate) property of [SpinSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.ProgressButtonSpinSettings.html#properties) with custom styles.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -234,4 +234,4 @@ You can complete the progress by using the [EndProgressAsync](https://help.syncf
     }
 }
 
-```
+```
\ No newline at end of file
diff --git a/blazor/progress-button/style-and-appearance.md b/blazor/progress-button/style-and-appearance.md
index 203c2e2a09..4c7206a2aa 100644
--- a/blazor/progress-button/style-and-appearance.md
+++ b/blazor/progress-button/style-and-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Styles and Appearances in Blazor ProgressButton Component
 
-To modify the ProgressButton appearance, you need to override the default CSS of ProgressButton component. Find the list of CSS classes and its corresponding section in ProgressButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+Customize the appearance of the ProgressButton by overriding the built-in CSS selectors of the component. Use scoped styles (for example, by adding a custom class via the CssClass parameter) to limit changes to specific instances. To create a consistent look-and-feel across the application, consider using built-in themes or generating a custom theme with the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 | CSS Class | Purpose of Class |
 | ----- | ----- |
-| .e-progress-btn | To customize the progress button. |
-| .e-progress-btn:hover | To customize the progress button on hover. |
-| .e-progress-btn:focus | To customize the progress button on focus. |
-| .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle | To customize the progress button spinner. |
\ No newline at end of file
+| .e-progress-btn | Customize the ProgressButton root element. |
+| .e-progress-btn:hover | Customize the ProgressButton on hover. |
+| .e-progress-btn:focus | Customize the ProgressButton when focused (keyboard or programmatic focus). |
+| .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle | Customize the spinner visuals within the ProgressButton. |
\ No newline at end of file
diff --git a/blazor/progress-button/types-icons.md b/blazor/progress-button/types-icons.md
index 50cfdd201a..c8ba903de3 100644
--- a/blazor/progress-button/types-icons.md
+++ b/blazor/progress-button/types-icons.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Types and Icons in Blazor ProgressButton Component
 
-This section explains the different types and icons of Progress Button.
+This section describes the available ProgressButton types and how to configure icons for the component.
 
 ## Types
 
@@ -21,7 +21,7 @@ The types of Blazor Progress Button are as follows:
 
 ### Outline Progress Button
 
-An outline Progress Button has a border with transparent background. To create an outline Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-outline`.
+An outline ProgressButton has a border with transparent background. To create an outline Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-outline`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -33,7 +33,7 @@ An outline Progress Button has a border with transparent background. To create a
 
 ### Round Progress Button
 
-A round Progress Button is shaped like a circle. Usually, it contains an icon representing its action. To create a round Progress Button, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-round`.
+A round ProgressButton is circular and typically displays an icon representing its action. To create a round ProgressButton, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_CssClass) property to `e-round`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -51,7 +51,7 @@ A round Progress Button is shaped like a circle. Usually, it contains an icon re
 
 ### Primary Progress Button
 
-The primary progress button is styled with background color and it is used to represent a primary action. To create a Primary Progress Button, set the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IsPrimary) property to `true`.
+A primary ProgressButton uses a solid background to emphasize a primary action. To create a primary ProgressButton, set the [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IsPrimary) property to `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -65,7 +65,7 @@ The primary progress button is styled with background color and it is used to re
 
 ### Progress Button with font icons
 
-The Progress Button can have an icon to provide the visual representation of the action. To place the icon on a Progress Button, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Progress Button. You can customize the icon's position by using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconPosition) property.
+The ProgressButton can display an icon to visually represent the action. Assign the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconCss) property to `e-icons` plus the desired icon class. By default, the icon is positioned on the left. Use [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfProgressButton.html#Syncfusion_Blazor_SplitButtons_SfProgressButton_IconPosition) to change the icon placement.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/query-builder/accessibility.md b/blazor/query-builder/accessibility.md
index b368de6afe..b7baefad72 100644
--- a/blazor/query-builder/accessibility.md
+++ b/blazor/query-builder/accessibility.md
@@ -3,15 +3,15 @@ layout: post
 title: Accessibility in Blazor Query Builder component | Syncfusion
 description: Checkout and learn here all about Accessibility in Syncfusion Blazor ContextMenu component and more.
 platform: Blazor
-control: Context Menu
+control: QueryBuilder
 documentation: ug
 ---
 
 # Accessibility in Blazor Query Builder component
 
-The Blazor Query Builder component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Query Builder follows widely accepted accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor Query Builder component is outlined below.
+The accessibility compliance for the Blazor Query Builder is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -38,27 +38,27 @@ The accessibility compliance for the Blazor Query Builder component is outlined
 
 ## WAI-ARIA attributes
 
-WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
+WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components. ARIA provides additional semantics to describe role, state, and functionality.
 
 The following list of ARIA attributes is used in Blazor Query Builder.
 
 | Attributes | Purpose |
 | --- | --- |
-| `role` | Indicates the query builder component. |
+| `role` | Identifies the Query Builder region and roles on interactive controls to assist screen readers. |
 
 ## Keyboard interaction
 
-The Blazor Query Builder component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Query Builder component.
+The Blazor Query Builder follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Tab</kbd> / <kbd>Shift + Tab</kbd> | <kbd>Tab</kbd> / <kbd>⇧</kbd> + <kbd>Tab</kbd> | To focus the next item in the rule. |
+| <kbd>Tab</kbd> / <kbd>Shift + Tab</kbd> | <kbd>Tab</kbd> / <kbd>⇧</kbd> + <kbd>Tab</kbd> | Move focus between fields, operators, values, and action buttons within a rule. |
 
 ## Ensuring accessibility
 
-The Blazor Query Builder component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Query Builder’s accessibility levels are verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor Query Builder component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder component with accessibility tools.
+The accessibility compliance of the Blazor Query Builder is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/querybuilder) in a new window to evaluate the accessibility of the Blazor Query Builder with accessibility tools.
 
 {% previewsample "https://ej2.syncfusion.com/accessibility/query-builder.html" %}
 
diff --git a/blazor/query-builder/clone-group-rule.md b/blazor/query-builder/clone-group-rule.md
index a8875923ee..b45cf21051 100644
--- a/blazor/query-builder/clone-group-rule.md
+++ b/blazor/query-builder/clone-group-rule.md
@@ -9,12 +9,13 @@ documentation: ug
 
 # Clone Group/ Rule in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) functionality extends to cloning both individual rules and entire groups. Utilizing the Clone options will generate an exact duplicate of a rule or group adjacent to the original one. This feature enables users to replicate complex query structures effortlessly. The [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) function offers users the ability to toggle the visibility of these cloning buttons, providing convenient control over the cloning process within the Query Builder interface.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports cloning both individual rules and entire groups. Cloning creates an exact duplicate of the selected rule or group adjacent to the original, making it quick to replicate complex query structures. The [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) configuration controls the visibility of cloning buttons in the user interface for convenient, on-demand access.
 
-You can `clone` groups and rules by interacting through the user interface and methods.
+Cloning is available via the user interface and programmatically:
+
+* Use the [`CloneGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone a group. The first parameter is the existing group’s ID, and the second is the insert index within its parent.
+* Use the [`CloneRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone a rule.
 
-* Use the [CloneGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneGroup_System_String_System_Int32_) method to clone group.
-* Use [CloneRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_CloneRule_System_String_System_Int32_) method to clone rule.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -98,6 +99,6 @@ You can `clone` groups and rules by interacting through the user interface and m
 
 ```
 
-![Clone Group/Rule in Blazor QueryBuilder](./images/clone-group-rule.png)
+![Cloning a group and rule in Blazor Query Builder](./images/clone-group-rule.png)
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
+N> Ensure that the IDs passed to `CloneGroup` and `CloneRule` refer to existing items in the current model. The cloning buttons can be shown or hidden via `QueryBuilderShowButtons`. You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to learn how to render and configure the Query Builder.
\ No newline at end of file
diff --git a/blazor/query-builder/columns-binding.md b/blazor/query-builder/columns-binding.md
index 79641666d9..84e08cc941 100644
--- a/blazor/query-builder/columns-binding.md
+++ b/blazor/query-builder/columns-binding.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Columns in Blazor QueryBuilder Component
 
-The column definitions are used as the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource) schema in the Query Builder. This plays a vital role in rendering column values. The Query Builder operations such as create or delete conditions and create or delete groups are performed based on the column definitions. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is necessary to map the data source values in the query builder columns.
+Column definitions provide the schema used by the Query Builder’s [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DataSource). They determine how field values are rendered and how users create or delete conditions and groups. The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) property in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) is required to map data source fields to Query Builder columns.
 
-N> If the column field is not specified in the data source, the column values will be empty.
+N> If the column field is not present in the data source, the column renders with empty values.
 
 ## Auto generation
 
-The [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the datasource when the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) declaration is empty or undefined while initializing the query builder. All the columns in the `DataSource` are bound as the query builder columns.
+[Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) are automatically generated from the data source when the `Columns` declaration is empty or not provided at initialization. In this case, all fields in the `DataSource` are bound as Query Builder columns.
 
-N> When columns are auto-generated, the column type will be determined from the first record of the data source.
+N> When columns are auto-generated, the column type is inferred from the first record of the data source. 
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -49,13 +49,13 @@ N> When columns are auto-generated, the column type will be determined from the
 
 ## Labels
 
-By default, the column label is displayed from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default label, you have to define the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) value.
+By default, the column label is derived from the column [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Field) value. To override the default, set the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Label) property to a display-friendly name (for example, a localized string).
 
-N> If both the field and label are not defined in the column, the column renders with `empty` text.
+N> If both the field and label are not defined for a column, it renders with `empty` text.
 
 ## Operators
 
-The operator for a column can be defined in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) property. You can directly set the custom operators using [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html) in columns `Operator` property. The available operators and its supported data types are:
+Define the allowed operators for a column in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Columns) collection. Custom operator sets can be configured using the column’s [OperatorsModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.OperatorsModel.html). The following built-in operators and their supported data types are available:
 
 | Operators | Description | Supported Types |
 | ------------ | ----------------------- | ------------------ |
@@ -65,16 +65,16 @@ The operator for a column can be defined in the [Columns](https://help.syncfusio
 | notendswith  | Checks whether the value does not end with the specified value. | String |
 | contains | Checks whether the value contains the specified value. | String |
 | notcontains | Checks whether the value does not include the specified value. | String |
-| equal | Checks whether the value is equal to the specified value. | String, Number ,Date, Boolean |
+| equal | Checks whether the value is equal to the specified value. | String, Number, Date, Boolean |
 | notequal | Checks for values not equal to the specified value. | String, Number, Date, Boolean |
 | greaterthan | Checks whether the value is greater than the specified value. | Date, Number |
 | greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date, Number |
-| lessthan | Checks whether the value is lesser than the specified value.| Date, Number |
-| lessthanorequal | Checks whether the value is lesser than or equal to the specified value. | Date, Number |
-| between | Checks whether the value is between the two-specific value. | Date, Number |
-| notbetween | Checks whether the value is not between the two-specific value. | Date, Number |
-| in | Checks whether the value is one of the specific values. | String, Number |
-| notin | Checks whether the value is not in the specific values. | String, Number |
+| lessthan | Checks whether the value is less than the specified value. | Date, Number |
+| lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date, Number |
+| between | Checks whether the value is between two specific values. | Date, Number |
+| notbetween | Checks whether the value is not between two specific values. | Date, Number |
+| in | Checks whether the value is one of the specified values. | String, Number |
+| notin | Checks whether the value is not one of the specified values. | String, Number |
 | isempty | Checks whether the value is empty. | String |
 | isnotempty | Checks whether the value is not empty. | String |
 | isnull | Checks whether the value is null. | String, Number |
@@ -82,9 +82,9 @@ The operator for a column can be defined in the [Columns](https://help.syncfusio
 
 ## Step
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows to set the step values to the number fields. It allows to increase or decrease the numeric value with the predefined Step value using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows setting step values for number fields. Use the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Step) property to control the increment/decrement applied by the numeric input.
 
-N> By default the Step value is 1.
+N> By default, the `Step` value is 1.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -112,15 +112,15 @@ N> By default the Step value is 1.
 
 ```
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
+N> You can also explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder.
 
 ## Format
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) formats date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property, to format date and number values.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports formatting of date and number values. Use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderColumn.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderColumn_Format) property to apply date and number formats.
 
-N> From the standard numeric format, you can use the numeric related format specifiers such as n,p, and c in the format property. By using these format specifiers, you can achieve the percentage and currency textbox behavior.
+N> Standard numeric format specifiers such as `n`, `p`, and `c` can be used in the `Format` property to display number, percentage, and currency inputs respectively. Formatting is culture-aware.
 
-In the following sample, the date field is formatted as MM/yyyy/dd and the number field is formatted as currency type.
+In the following sample, the date field is formatted as `MM-yyyy-dd` and the number field is formatted as currency.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -161,9 +161,9 @@ N> You can also explore our [Blazor Query Builder example](https://blazor.syncfu
 
 ## Validations
 
-Validation allows to validate the conditions and it display errors for invalid fields. To enable validation in the Query Builder, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to true. Column fields are validated after setting the [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) property to true.
+Validation enables checking of rule inputs and displays errors for invalid fields. To enable validation, set [AllowValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_AllowValidation) to `true`. After enabling, fields are validated based on the configured rules and column settings.
 
-N> You can set `Min` and `Max` values for number values.
+N> You can set `Min` and `Max` values for numeric fields using `QueryBuilderColumnValidation`.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -197,4 +197,4 @@ N> You can set `Min` and `Max` values for number values.
 
 ```
 
-![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png)
+![Validation in Blazor QueryBuilder](./images/blazor-querybuilder-validation.png)
\ No newline at end of file
diff --git a/blazor/query-builder/data-binding.md b/blazor/query-builder/data-binding.md
index 127206d181..40d70420b7 100644
--- a/blazor/query-builder/data-binding.md
+++ b/blazor/query-builder/data-binding.md
@@ -9,16 +9,16 @@ documentation: ug
 
 # Data Binding in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) uses `SfDataManager` to bind the dataSource which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property can be assigned either with the instance of `SfDataManager` or list of objects. It supports the following kinds of data binding method:
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) uses `SfDataManager` to bind the data source and supports both RESTful JSON data services and `IEnumerable` collections. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property accepts either an instance of `SfDataManager` or a list of objects. It supports the following data binding methods:
 
 * List Binding
 * Remote data
 
-N> When using DataSource as `IEnumerable<T>` component type, (TValue) will be inferred from its value. While using SfDataManager for data binding then the TValue must be provided explicitly in the query builder component.
+N> When using `DataSource` as `IEnumerable<T>`, the component type (`TValue`) is inferred from the data. When using `SfDataManager`, set `TValue` explicitly on the Query Builder component.
 
 ## List Binding
 
-To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), you can assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property with a list of data.
+To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property to a list of objects. Define columns to control field display names, types, and formatting.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -65,13 +65,13 @@ To bind list data to the [Blazor Query Builder](https://www.syncfusion.com/blazo
 
 ## Remote Data
 
-To bind remote data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component, assign service data as an instance of `SfDataManager` to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DataSource) property or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. To interact with remote data source, provide the endpoint `Url`.
+To bind remote data to the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder), use `SfDataManager` with the appropriate adaptor and set the service endpoint `Url`. Define columns to control field labels, types, and formatting when binding to remote data. Ensure the endpoint is accessible from the client (CORS/HTTPS as applicable).
 
-Refer to the following code example for remote Data binding using `OData` service.
+Refer to the following code examples for remote data binding with OData, OData v4, and Web API services.
 
 ### Binding with OData services
 
-[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the SfDataManager. Refer to the following code example for remote Data binding using OData service.
+[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. Use `ODataAdaptor` with `SfDataManager` to retrieve data from OData services.
 
 ```cshtml
 
@@ -103,7 +103,7 @@ Refer to the following code example for remote Data binding using `OData` servic
 
 ### Binding with OData v4 services
 
-The ODataV4 is an improved version of OData protocols, and the `SfDataManager` can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData v4 service, use the `ODataV4Adaptor`.
+OData v4 is an improved version of the OData protocol. Use `ODataV4Adaptor` with `SfDataManager` to consume OData v4 services. For more details, see the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197).
 
 ```cshtml
 
@@ -135,7 +135,7 @@ The ODataV4 is an improved version of OData protocols, and the `SfDataManager` c
 
 ### Web API
 
-The WebApiAdaptor can be used to bind query builder with Web API created using OData endpoint.
+Use `WebApiAdaptor` to bind the Query Builder to RESTful Web API endpoints that return JSON data.
 
 ```cshtml
 
@@ -167,7 +167,7 @@ The WebApiAdaptor can be used to bind query builder with Web API created using O
 
 ## Complex Data Binding
 
-Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and Separator must be given in query builder.
+Complex data binding allows you to work with nested objects and subfields. Bind complex data using nested columns or by specifying a complex data source with a `Separator` that defines the path delimiter used in field names.
 
 ```cshtml
 
@@ -251,4 +251,4 @@ Complex Data Binding allows you to create subfield for columns. To implement com
 
 ![Complex Data Binding in Blazor QueryBuilder](./images/blazor-query-builder-complex-db.png)
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the Query Builder.
\ No newline at end of file
diff --git a/blazor/query-builder/drag-and-drop.md b/blazor/query-builder/drag-and-drop.md
index 4b953cdcf5..85eec4221d 100644
--- a/blazor/query-builder/drag-and-drop.md
+++ b/blazor/query-builder/drag-and-drop.md
@@ -9,7 +9,14 @@ documentation: ug
 
 # Drag and drop in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to reposition rules or groups within the component effortlessly. This enhancement provides a more intuitive and flexible way to construct and modify queries. You can use [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderAllowDragAndDrop.html) to perform drag and drop functionality. And we have events support for drag and drop features that, indicates the [DragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDragStart.html), [Drag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrag.html) and [Drop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrop.html) actions.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports drag-and-drop reordering of rules and groups for a more intuitive query-building experience. Enable this per instance by setting the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AllowDragAndDrop) property to `true` (default is `false`). Rules and groups can be dragged within the same group or across groups; items retain their type (a rule cannot be dropped as a group and vice versa).
+
+Drag-and-drop events provide hooks to monitor and customize behavior:
+- [`DragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDragStart.html): Fires when a drag begins (access the source item and cancel if needed).
+- [`Drag`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrag.html): Fires during dragging (track current target and position).
+- [`Drop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderDrop.html): Fires when the item is dropped (determine target group and insert index, or cancel to enforce business rules).
+
+Touch input is supported on mobile and tablet devices. For accessibility, consider offering parallel UI actions (such as add/remove buttons) for users who rely on keyboard navigation.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -61,6 +68,6 @@ The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-q
 
 ```
 
-![Drag and Drop in Blazor QueryBuilder](./images/drag-and-drop.png)
+![Dragging a rule to reorder within a group in the Blazor Query Builder](./images/drag-and-drop.png)
 
 N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/filtering.md b/blazor/query-builder/filtering.md
index d7092fd2e0..67059082d4 100644
--- a/blazor/query-builder/filtering.md
+++ b/blazor/query-builder/filtering.md
@@ -9,12 +9,12 @@ documentation: ug
 
 # Filtering in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows to create or delete conditions and groups. You can use [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) to enable/disable these buttons.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) enables creating and deleting rules (conditions) and groups. Use [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) to control the visibility of these action buttons in the user interface.
 
-You can `create` or `delete` conditions by interacting through the user interface and methods.
+Creation and deletion can be done through the UI or programmatically.
 
-* Use the [AddRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddRule_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_System_Boolean_), and [DeleteRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteRule_System_String_) methods to create/delete conditions.
-* Use [AddGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddGroup_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_), and [DeleteGroup](hhttps://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteGroup_System_String_) methods to create/delete groups.
+* Use [`AddRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddRule_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_System_Boolean_) and [`DeleteRule`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteRule_System_String_) to create or delete conditions (rules). Parameters include the rule to add and target group ID (for `AddRule`) or the rule ID to remove (for `DeleteRule`).
+* Use [`AddGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_AddGroup_Syncfusion_Blazor_QueryBuilder_RuleModel_System_String_) and [`DeleteGroup`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_DeleteGroup_System_String_) to create or delete groups. Parameters include the group to add and parent group ID (for `AddGroup`) or the group ID to remove (for `DeleteGroup`).
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -100,6 +100,6 @@ You can `create` or `delete` conditions by interacting through the user interfac
 
 ```
 
-![Filtering in Blazor QueryBuilder](./images/blazor-querybuilder-filtering.png)
+![Filtering in Blazor Query Builder](./images/blazor-querybuilder-filtering.png)
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/getting-started-webapp.md b/blazor/query-builder/getting-started-webapp.md
index 3a3405837b..2b8effa8d1 100644
--- a/blazor/query-builder/getting-started-webapp.md
+++ b/blazor/query-builder/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor QueryBuilder in Blazor Web App
 
-This section briefly explains about how to include [Blazor QueryBuilder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor QueryBuilder](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
 
@@ -23,17 +23,19 @@ N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfus
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
 
-To add **Blazor QueryBuilder** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor QueryBuilder** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -44,7 +46,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -56,11 +58,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -72,11 +74,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -94,20 +94,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace.
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
+
+Here's an example of how to add **Blazor QueryBuilder** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.QueryBuilder --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -118,9 +167,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -154,27 +205,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -195,16 +225,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -247,7 +276,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in the default web browser.
 
 ![Blazor QueryBuilder Component](./images/blazor-querybuilder-component.png)
 
diff --git a/blazor/query-builder/getting-started.md b/blazor/query-builder/getting-started.md
index 20bca96195..aba8b8618f 100644
--- a/blazor/query-builder/getting-started.md
+++ b/blazor/query-builder/getting-started.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Getting Started with Blazor QueryBuilder Component
 
-This section briefly explains about how to include [Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component to a Blazor WebAssembly app using Visual Studio or Visual Studio Code.
 
-To get started quickly with Blazor QueryBuilder, check on the following video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder) sample:
+To get started quickly with Blazor Query Builder, check out the following video or the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/QueryBuilder) sample:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=jyWU7XSg3WI"%}
 
-N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to learn how to render and configure the Query Builder.
 
 {% tabcontents %}
 
@@ -28,11 +28,11 @@ N> You can also explore our [Blazor QueryBuilder example](https://blazor.syncfus
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
 
-To add **Blazor QueryBuilder** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Query Builder** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full package list and component details.
 
 {% endtabcontent %}
 
@@ -55,9 +55,10 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -72,9 +73,9 @@ cd BlazorApp
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
 
-* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+- Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
+- Ensure you are in the project root directory where the `.csproj` file is located.
+- Run the following commands to install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore packages.
 
 {% tabs %}
 
@@ -88,7 +89,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the full package list and component details.
 
 {% endtabcontent %}
 
@@ -96,7 +97,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +108,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **~/Program.cs** for your Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -131,7 +132,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` of **~/index.html**.
 
 ```html
 <head>
@@ -140,11 +141,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
 ## Add Blazor QueryBuilder component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Query Builder component in **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -178,11 +179,11 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder com
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Query Builder component in the default web browser.
 
-![Blazor QueryBuilder Component](./images/blazor-querybuilder-component.png)
+![Blazor Query Builder component](./images/blazor-querybuilder-component.png)
 
 ## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/query-builder/how-to/change-display-mode.md b/blazor/query-builder/how-to/change-display-mode.md
index b7f0ad2ff3..b8cf64914b 100644
--- a/blazor/query-builder/how-to/change-display-mode.md
+++ b/blazor/query-builder/how-to/change-display-mode.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Change Display Mode in Blazor QueryBuilder Component
 
-The QueryBuilder allows to view Vertically or Horizontally. To enable this feature, you can set the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DisplayMode) property.
+Query Builder can render in a horizontal or vertical layout. Configure the layout by setting the [DisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_DisplayMode) property.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/how-to/enable-not.md b/blazor/query-builder/how-to/enable-not.md
index 3acc3bcc8b..6082385c5d 100644
--- a/blazor/query-builder/how-to/enable-not.md
+++ b/blazor/query-builder/how-to/enable-not.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Show Not Operator in Blazor QueryBuilder Component
 
-The QueryBuilder provides `Not` operator along with AND, OR operators to filter records based on more than one condition. You can enable this feature by setting the [EnableNotCondition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableNotCondition) property to `true`.
+Query Builder supports the logical NOT operator alongside AND and OR to negate a group’s combined condition. Enable the NOT operator by setting the [EnableNotCondition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableNotCondition) property to `true`.
 
-N> By default `EnableNotCondition` set as false.
+N> The `EnableNotCondition` property is false by default.
 
 ```cshtml
 
diff --git a/blazor/query-builder/how-to/gets-filtered-records.md b/blazor/query-builder/how-to/gets-filtered-records.md
index 9a34680e47..0b36ab6ad7 100644
--- a/blazor/query-builder/how-to/gets-filtered-records.md
+++ b/blazor/query-builder/how-to/gets-filtered-records.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Gets the Filtered Records in Blazor QueryBuilder Component
 
-Gets the filtered datasource based on the defined condition in Query builder through the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetFilteredRecordsAsync) method.
+Retrieve the filtered data source based on the currently defined rules in the Query Builder by using the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetFilteredRecordsAsync) method.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/how-to/getting-started-web-assembly.md b/blazor/query-builder/how-to/getting-started-web-assembly.md
index 21990f1666..44e577ee14 100644
--- a/blazor/query-builder/how-to/getting-started-web-assembly.md
+++ b/blazor/query-builder/how-to/getting-started-web-assembly.md
@@ -9,19 +9,20 @@ documentation: ug
 
 # Blazor QueryBuilder Component in WebAssembly App using Visual Studio
 
-This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor QueryBuilder component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
+This article provides step-by-step instructions for building a Blazor WebAssembly app with the Blazor Query Builder component using Visual Studio.
 
 ## Prerequisites
 
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
 ## Create a Blazor WebAssembly App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder and Themes NuGet in the App
 
-To add `Blazor QueryBuilder` component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Query Builder component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.QueryBuilder](https://www.nuget.org/packages/Syncfusion.Blazor.QueryBuilder) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -33,11 +34,10 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
-
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. See the [Syncfusion Blazor packages on NuGet](https://www.nuget.org/packages?q=syncfusion.blazor) and the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of packages and component details.
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespace.
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.QueryBuilder` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -48,7 +48,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor services in **~/Program.cs** of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
@@ -72,7 +72,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
+The theme stylesheet and script are provided via NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `<head>` of the main page as follows:
 
 * For Blazor WebAssembly app, include it in the **~/index.html** file.
 
@@ -83,7 +83,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Choose one theme stylesheet (Bootstrap, Fluent, Material, or Tailwind). See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme options and delivery methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script options, refer to [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). Only one script reference is required.
 
 ## Add Blazor QueryBuilder component
 
@@ -122,6 +122,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder com
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor QueryBuilder component in the default web browser.
 
-![Blazor QueryBuilder](../images/blazor-querybuilder.gif)
+![Blazor Query Builder](../images/blazor-querybuilder.gif)
diff --git a/blazor/query-builder/how-to/maintain-state-persistence.md b/blazor/query-builder/how-to/maintain-state-persistence.md
index a787abc09a..6e93e90fe2 100644
--- a/blazor/query-builder/how-to/maintain-state-persistence.md
+++ b/blazor/query-builder/how-to/maintain-state-persistence.md
@@ -9,9 +9,10 @@ documentation: ug
 
 # Maintain the State Persistence in Blazor QueryBuilder Component
 
-State persistence allows the QueryBuilder to retain the current QueryBuilder state in the browser local storage for state maintenance. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnablePersistence) property which is set to false by default. When it is set to true, the QueryBuilder `Rules` will be retained even after refreshing the page.
+State persistence enables the QueryBuilder to retain its current state in the browser’s local storage. This behavior is controlled by the[EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnablePersistence) property which is set to false by default. When it is set to true, the QueryBuilder `Rules` will be retained even after refreshing the page.
 
-N> The state will be persisted based on ID property. So, it is recommended to explicitly set the ID property for QueryBuilder.
+
+N> State is persisted based on the component ID. It is recommended to explicitly set a unique ID for the QueryBuilder.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
diff --git a/blazor/query-builder/how-to/read-only.md b/blazor/query-builder/how-to/read-only.md
index f75fc68af1..be248f6a65 100644
--- a/blazor/query-builder/how-to/read-only.md
+++ b/blazor/query-builder/how-to/read-only.md
@@ -7,9 +7,9 @@ control: QueryBuilder
 documentation: ug
 ---
 
-# Readonly in Blazor QueryBuilder Component
+# Read-only in Blazor QueryBuilder component
 
-The readonly property in the query builder disables the user interactions on the component. You can enable this feature by setting the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_Readonly) property to `true`.
+The Readonly property disables user interactions in the QueryBuilder, preventing actions such as adding or removing groups and rules, and editing fields, operators, and values. Set the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_Readonly) property to `true`.
 
 ```cshtml
 
@@ -43,4 +43,4 @@ The readonly property in the query builder disables the user interactions on the
 
 ```
 
-![Readonly in Blazor QueryBuilder](./../images/blazor-querybuilder-readonly.png)
\ No newline at end of file
+![Readonly mode in Blazor QueryBuilder](./../images/blazor-querybuilder-readonly.png)
\ No newline at end of file
diff --git a/blazor/query-builder/how-to/restrict-group.md b/blazor/query-builder/how-to/restrict-group.md
index b2bc40f4f8..32fb8481f1 100644
--- a/blazor/query-builder/how-to/restrict-group.md
+++ b/blazor/query-builder/how-to/restrict-group.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Restrict the Groups in Blazor QueryBuilder Component
 
-The QueryBuilder allows to restrict the groups from creation based on group count. You can enable this feature by setting the [MaxGroupCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_MaxGroupCount) property.
+Limit how many condition groups users can create in the Query Builder by setting the [`MaxGroupCount`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_MaxGroupCount) property.
 
-N> By default, MaxGroupCount is set as 5.
+N> By default, `MaxGroupCount` is set to 5.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -54,4 +54,4 @@ N> By default, MaxGroupCount is set as 5.
 
 ```
 
-N> You can use this property in the mobile mode to restrict the nested group creation.
\ No newline at end of file
+N> This property can also be used in mobile mode to restrict nested group creation.
\ No newline at end of file
diff --git a/blazor/query-builder/how-to/right-to-left.md b/blazor/query-builder/how-to/right-to-left.md
index 53e445b0bc..7c5169a371 100644
--- a/blazor/query-builder/how-to/right-to-left.md
+++ b/blazor/query-builder/how-to/right-to-left.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Right to Left in Blazor QueryBuilder Component
 
-RTL provides an option to switch the text direction and layout of the Query Builder component from right-to-left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). To enable this feature, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_EnableRtl) to true.
+Right-to-left (RTL) support mirrors the text direction and layout of the Query Builder for languages that read right to left, improving usability and accessibility for Arabic, Persian (Farsi), Urdu, Hebrew, and similar locales. To enable RTL for a Query Builder instance, set the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_EnableRtl) property to `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -52,4 +52,4 @@ RTL provides an option to switch the text direction and layout of the Query Buil
 
 ```
 
-![Right to Left in Blazor QueryBuilder](./../images/blazor-querybuilder-right-to-left.png)
\ No newline at end of file
+![Right to left in Blazor Query Builder](./../images/blazor-querybuilder-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/query-builder/how-to/sort-the-columns.md b/blazor/query-builder/how-to/sort-the-columns.md
index 9f30bbdc10..bf87d94542 100644
--- a/blazor/query-builder/how-to/sort-the-columns.md
+++ b/blazor/query-builder/how-to/sort-the-columns.md
@@ -9,8 +9,7 @@ documentation: ug
 
 # Sort the Columns in Blazor QueryBuilder Component
 
-The QueryBuilder has options to sort the column fields by `ascending` or `descending` order. To sort the columns, you need to set [SortDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_SortDirection) property.
-
+Sort the field list shown in the Query Builder’s field (column) dropdown to improve in large schemas. Set the [`SortDirection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_SortDirection) property to `SortDirection.Ascending` or `SortDirection.Descending` to control the order. Sorting is applied per component instance and is based on the displayed field labels.
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
 
@@ -56,4 +55,4 @@ The QueryBuilder has options to sort the column fields by `ascending` or `descen
 
 ```
 
-![Sorting in Blazor QueryBuilder](./../images/blazor-querybuilder-sorting.png)
\ No newline at end of file
+![Sorting in Blazor Query Builder](./../images/blazor-querybuilder-sorting.png)
\ No newline at end of file
diff --git a/blazor/query-builder/import-export.md b/blazor/query-builder/import-export.md
index 1035af7e42..279220aa3f 100644
--- a/blazor/query-builder/import-export.md
+++ b/blazor/query-builder/import-export.md
@@ -9,19 +9,19 @@ documentation: ug
 
 # Importing and Exporting in Blazor QueryBuilder Component
 
-Importing facilitates the viewing or editing of predefined conditions available in JSON, SQL, and MongoDB query formats, while exporting enables obtaining the created rules in the query builder as JSON, SQL, and MongoDB queries.
+Import rules to view or edit predefined conditions from JSON, SQL, or MongoDB query formats, and export the rules built in the Query Builder back to JSON, SQL, or MongoDB queries. These operations map to the Query Builder’s rule model and require that fields and operators used in the imported content exist in the configured columns.
 
 ## Importing
 
-Importing enables users to bring predefined conditions into the system for viewing or editing, available in formats such as JSON, SQL, and MongoDB query. It facilitates the quick incorporation of pre-defined rules or parameters into workflows, streamlining the setup process by importing directly from external sources or saved configurations.
+Import predefined conditions for display or editing from JSON, SQL, or MongoDB queries. Ensure that imported fields, types, and operators align with the columns and configuration in the Query Builder.
 
 ### Importing from JSON Object
 
-Importing from JSON enables users to bring predefined conditions encoded in JSON format into the system. This feature streamlines the process by providing a standardized format for importing data, ensuring compatibility, and ease of use.
+Import JSON to populate the rule model. This provides a consistent way to initialize or update conditions.
 
 #### Initial rendering
 
-To initially apply conditions, you can establish the rules in **QueryBuilderRule** by importing a structured JSON object and defining its properties.
+To apply conditions during initial render, define rules in `QueryBuilderRule` using a structured JSON object (mapped to the rule model) and set its properties.
 
 ```cshtml
 
@@ -68,19 +68,19 @@ To initially apply conditions, you can establish the rules in **QueryBuilderRule
 }
 ```
 
-![Blazor QueryBuilder with Data Binding](./images/blazor-querybuilder-binding-data.png)
+![Blazor Query Builder with a data Binding](./images/blazor-querybuilder-binding-data.png)
 
 #### Post rendering
 
-You can set the conditions from structured JSON object through the [SetRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRules_System_Collections_Generic_List_Syncfusion_Blazor_QueryBuilder_RuleModel__System_String_System_Nullable_System_Boolean__System_Boolean_) method.
+Set or replace conditions programmatically from a structured JSON object using the [`SetRules`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRules_System_Collections_Generic_List_Syncfusion_Blazor_QueryBuilder_RuleModel__System_String_System_Nullable_System_Boolean__System_Boolean_) method. 
 
 ### Importing from SQL Query
 
-Importing from SQL involves integrating predefined conditions or data stored in a SQL database into the Query Builder. This enables the direct integration of SQL queries, thereby improving workflow efficiency and data accuracy within the application. SQL importing supports various types, including Inline SQL, Parameter SQL, and Named Parameter SQL.
+Import conditions expressed as SQL. Supported forms include inline SQL, parameter SQL (positional), and named-parameter SQL. Imported expressions are parsed into the rule model; operators and fields must be supported by the configured columns.
 
 #### Importing from Inline SQL Query
 
-Importing from Inline SQL involves integrating SQL queries directly into the Query Builder. This method streamlines the process by enabling users to input SQL statements directly into the application for analysis, manipulation, or further processing within the Query Builder. Conditions can be set from Inline SQL queries using the [SetRulesFromSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRulesFromSql_System_String_) method.
+Provide an inline SQL string and parse it into rules using the [`SetRulesFromSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetRulesFromSql_System_String_) method.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -127,7 +127,7 @@ Importing from Inline SQL involves integrating SQL queries directly into the Que
 }
 ```
 
-![Importing from Inline SQL in Blazor QueryBuilder](./images/blazor-querybuilder-import-from-sql.png)
+![Importing from Inline SQL in Blazor Query Builder](./images/blazor-querybuilder-import-from-sql.png)
 
 #### Importing from Parameter SQL Query
 
@@ -183,7 +183,7 @@ Importing from Parameter SQL involves integrating SQL queries with parameters di
 }
 ```
 
-![Importing from Parameter SQL in Blazor QueryBuilder](./images/import-parameter.png)
+![Importing from Parameter SQL in Blazor Query Builder](./images/import-parameter.png)
 
 #### Importing from Named Parameter SQL Query
 
@@ -239,11 +239,11 @@ Importing from Named Parameter SQL involves integrating SQL queries with named p
 }
 ```
 
-![Importing from Named Parameter SQL in Blazor QueryBuilder](./images/import-named-parameter.png)
+![Importing from Named Parameter SQL in Blazor Query Builder](./images/import-named-parameter.png)
 
 ### Importing from MongoDB Query
 
-Importing from MongoDB Query involves integrating MongoDB queries directly into the Query Builder. This enables users to input MongoDB query statements directly into the application, allowing for seamless integration and manipulation of MongoDB data within the Query Builder environment. It streamlines the process by facilitating direct access to MongoDB data for analysis, filtering, and further processing within the application. Conditions can be set from Named Parameter SQL queries using the [SetMongoQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetMongoQuery_System_String_) method.
+Import MongoDB queries directly and parse them into the rule model using the [`SetMongoQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_SetMongoQuery_System_String_) method. Ensure field names and date/number formats match those defined in columns and the current culture.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -291,15 +291,15 @@ Importing from MongoDB Query involves integrating MongoDB queries directly into
 }
 ```
 
-![Importing from MongoDB in Blazor QueryBuilder](./images/import-mongo.png)
+![Importing from MongoDB in Blazor Query Builder](./images/import-mongo.png)
 
 ## Exporting
 
-Exporting from the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) allows users to preserve or store the created conditions. The defined conditions can be exported using various methods, including:
+Export the current rules from the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) to persist or share them. Choose JSON, SQL (inline, parameter, named), or MongoDB depending on the target system. Validate and sanitize any exported strings before executing them against a database.
 
 ### Exporting to JSON Object
 
-You can extract the established conditions in the Query Builder and convert them into a structured JSON object format using the [GetRules](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetRules) method. This process enables users to save or transfer the conditions for further use or analysis in other applications or systems that support JSON data.
+Convert the current rules to a structured JSON object using the [`GetRules`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetRules) method. The result can be saved or reapplied later (e.g., via `SetRules`).
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -407,7 +407,7 @@ Exporting to Inline SQL Query entails embedding the defined conditions from the
 
 #### Exporting to Parameter SQL Query
 
-Exporting to Parameter SQL involves incorporating the defined conditions from the Query Builder into SQL queries with parameters. This method allows for dynamic value assignment during execution, enhancing flexibility and adaptability in query processing within SQL database. This can be accomplished using the [GetParameterSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_) method for exporting to Parameter SQL query.
+Generate SQL with positional parameters using [`GetParameterSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_). This is useful for parameterized queries with ordered parameters.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -461,7 +461,7 @@ Exporting to Parameter SQL involves incorporating the defined conditions from th
 
 #### Exporting to Named Parameter SQL Query
 
-Exporting to Named Parameter SQL entails integrating the defined conditions from the Query Builder into SQL queries with named parameters. This method offers enhanced readability and flexibility during execution by using named placeholders for parameter values. Named Parameter SQL facilitates easier maintenance and modification of queries, making it convenient for dynamic parameter assignment within SQL database. This can be accomplished using the method [GetNamedParameterSql](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetNamedParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_)  for exporting to Named Parameter SQL query.
+Generate SQL with named parameters using [`GetNamedParameterSql`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetNamedParameterSql_Syncfusion_Blazor_QueryBuilder_RuleModel_). This enhances readability and allows mapping values by name.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -515,7 +515,7 @@ Exporting to Named Parameter SQL entails integrating the defined conditions from
 
 ### Exporting to MongoDB Query
 
-Exporting to MongoDB Query involves converting the defined conditions within the Query Builder into MongoDB query syntax. This process allows users to generate MongoDB queries representing the conditions set in the Query Builder, which can then be executed directly on a MongoDB database or used for further analysis and processing. This can be accomplished using the [GetMongoQuery](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetMongoQuery_Syncfusion_Blazor_QueryBuilder_RuleModel_) method for exporting to MongoDB query.
+Convert the current rules to MongoDB query syntax using [`GetMongoQuery`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_GetMongoQuery_Syncfusion_Blazor_QueryBuilder_RuleModel_). Ensure date and number formats match expectations of the target database.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -567,4 +567,4 @@ Exporting to MongoDB Query involves converting the defined conditions within the
 
 ```
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/localization.md b/blazor/query-builder/localization.md
index 794c0bd8da..6df09b87b3 100644
--- a/blazor/query-builder/localization.md
+++ b/blazor/query-builder/localization.md
@@ -9,6 +9,6 @@ documentation: ug
 
 # Localization in Blazor QueryBuilder Component
 
-[Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+[Blazor QueryBuilder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports localization for UI text (such as button labels, operator names, and messages) and honors the application’s culture for date and number formatting. See the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic for end-to-end guidance on configuring languages, providing translations, and switching cultures in Blazor apps.
 
 N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/lock-group-rule.md b/blazor/query-builder/lock-group-rule.md
index c5efb07689..4e11ec4584 100644
--- a/blazor/query-builder/lock-group-rule.md
+++ b/blazor/query-builder/lock-group-rule.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Lock Group/ Rule in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to lock individual rules or entire groups. When a rule is locked, it prevents users from modifying its field, operator, and value, effectively disabling these components. Similarly, locking a group disables all elements contained within it. This feature offers users greater control over their query configurations, ensuring that specific rules or groups remain unchanged. Additionally, users can manage the visibility of locking buttons through the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) function, allowing for seamless control over the locking mechanism.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports locking individual rules or entire groups. When a rule is locked, its field, operator, and value editors are disabled and cannot be changed. Locking a group disables all editors and actions within that group. Locked items still participate in evaluation; only editing is restricted. The visibility of lock buttons in the UI can be configured through the [`ShowButtons`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderShowButtons.html) configuration.
 
-You can `lock` groups and rules by interacting through the user interface and methods.
+Locking can be done through the user interface or programmatically.
 
 * Use the [LockGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_LockGroup_System_String_System_Boolean_) method to lock group.
 * Use [LockRule](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_LockRule_System_String_System_Boolean_) method to lock rule.
@@ -94,6 +94,6 @@ You can `lock` groups and rules by interacting through the user interface and me
 
 ```
 
-![Lock Group/Rule in Blazor QueryBuilder](./images/lock-group-rule.png)
+![Lock Group/Rule in Blazor Query Builder](./images/lock-group-rule.png)
 
 N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/separate-connector.md b/blazor/query-builder/separate-connector.md
index a4b89a8edb..154f41e5b1 100644
--- a/blazor/query-builder/separate-connector.md
+++ b/blazor/query-builder/separate-connector.md
@@ -9,7 +9,9 @@ documentation: ug
 
 # Separate Connector in Blazor QueryBuilder Component
 
-The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) provides the functionality to integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. You can use [EnableIndividualConditions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderEnableIndividualConditions.html) to perform separate connector functionality.
+The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) supports separate connectors between rules or groups within the same parent group. When enabled, each rule (or nested group) can specify its own connector (AND/OR), allowing more precise control over complex logic than using a single group-level connector.
+
+Use the [`EnableIndividualConditions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.SfQueryBuilder-1.html#Syncfusion_Blazor_QueryBuilder_SfQueryBuilder_1_EnableIndividualConditions) property to enable separate connectors. 
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -61,6 +63,6 @@ The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-q
 
 ```
 
-![EnableIndividualConditions in Blazor QueryBuilder](./images/separate-connector.png)
+![EnableIndividualConditions in Blazor Query Builder](./images/separate-connector.png)
 
 N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap4) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/query-builder/style-and-appearance.md b/blazor/query-builder/style-and-appearance.md
index 0b14062791..5d4381bf62 100644
--- a/blazor/query-builder/style-and-appearance.md
+++ b/blazor/query-builder/style-and-appearance.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Styles and Appearances in Blazor QueryBuilder Component
 
-To modify the QueryBuilder appearance, you need to override the default CSS of QueryBuilder component. Find the list of CSS classes and its corresponding section in QueryBuilder component. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+Customize the appearance of the Query Builder by overriding the component’s default CSS. The following table lists commonly used CSS selectors and the corresponding UI areas they affect. For consistent theming across applications, consider generating a custom theme with [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 | CSS Class | Purpose of Class |
 | ----- | ----- |
-| .e-query-builder .e-btn-group input + label.e-btn | To customize the condition button in querybuilder. | 
-| .e-query-builder .e-btn-group input:checked + label.e-btn | To customize the selected condition button in querybuilder. |
-| .e-query-builder .e-group-body .e-rule-container | To customize the querybuilder rule container. |
-| .e-query-builder .e-group-action .e-btn | To customize the querybuilder add group/condition button. |
-| .e-query-builder .e-removerule.e-btn.e-round | To customize the querybuilder Delete button. |
-| .e-query-builder .e-rule-list > ::after,.e-query-builder .e-rule-list > ::before | To customize the querybuilder group joining line. |
-| .e-query-builder .e-rule-container.e-joined-rule | To customize the querybuilder condition joining line. |
\ No newline at end of file
+| .e-query-builder .e-btn-group input + label.e-btn | Customize the condition button in the Query Builder. | 
+| .e-query-builder .e-btn-group input:checked + label.e-btn | Customize the selected condition button in the Query Builder. |
+| .e-query-builder .e-group-body .e-rule-container | Customize the Query Builder rule container. |
+| .e-query-builder .e-group-action .e-btn | Customize the Query Builder Add Group/Add Condition buttons. |
+| .e-query-builder .e-removerule.e-btn.e-round | Customize the Query Builder delete button. |
+| .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before | Customize the Query Builder group joining line. |
+| .e-query-builder .e-rule-container.e-joined-rule | Customize the Query Builder condition joining line. |
\ No newline at end of file
diff --git a/blazor/query-builder/templates.md b/blazor/query-builder/templates.md
index 400f399c0b..f59a8ae548 100644
--- a/blazor/query-builder/templates.md
+++ b/blazor/query-builder/templates.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Templates in Blazor QueryBuilder Component
 
-This section explains the list of templates available in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder).
+This section describes the template options available in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) to customize editors and layout.
 
 ## Value Template
 
-The template allows to define our own widgets for column values. Use the [ValueTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ValueTemplate), property to define templates.
+Use a value template to render a custom editor for a column’s value field. Define the template with the [`ValueTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ValueTemplate) property.
 
 ```cshtml
 @using Syncfusion.Blazor.QueryBuilder
@@ -86,13 +86,13 @@ The template allows to define our own widgets for column values. Use the [ValueT
 
 ```
 
-![Blazor QueryBuilder with Value Template](./images/blazor-querybuilder-value-template.png)
+![Blazor Query Builder with a value template](./images/blazor-querybuilder-value-template.png)
 
 ## Column Template
 
-Column Template allows to define our own widgets for entire column. Use the [ColumnTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ColumnTemplate) property to define templates.
+A column template allows customizing the entire editor area for a column, including the field and value UI. Define the template with the [`ColumnTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ColumnTemplate) property.
 
-In the following sample, the SFDropDownList component is used as the custom components for field and value in the `PaymentMode` column.
+In the following sample, the DropDownList component is used as a custom editor for both the field and value in the PaymentMode column.
 
 ```cshtml
 
@@ -240,13 +240,13 @@ In the following sample, the SFDropDownList component is used as the custom comp
 
 ```
 
-![Blazor QueryBuilder with Column Template](./images/blazor-querybuilder-column-template.png)
+![Blazor Query Builder with a column template](./images/blazor-querybuilder-column-template.png)
 
 ## Header Template
 
-Header Template allows to define our own widgets for group header. Customize the AND/OR/NOT operators and add rules/groups buttons. Use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_HeaderTemplate) property to define templates.
+A header template customizes the group header area, including the AND/OR operators and the Add Rule/Add Group actions. Define the template with the [`HeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_HeaderTemplate) property.
 
-In the following sample, the SFDropDownList component is used as the custom components for AND/OR operators and customized SfButtons for add rules and add groups button.
+In the following sample, the DropDownList is used to switch the group condition (AND/OR), and buttons are used to add or delete groups and add conditions.
 
 ```cshtml
 
@@ -361,6 +361,6 @@ In the following sample, the SFDropDownList component is used as the custom comp
 
 ```
 
-![Blazor QueryBuilder with Header Template](./images/blazor-querybuilder-header-template.png)
+![Blazor Query Builder with a header template](./images/blazor-querybuilder-header-template.png)
 
-N> You can also explore our [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
+N> Explore the [Blazor Query Builder example](https://blazor.syncfusion.com/demos/query-builder/default-functionalities?theme=bootstrap5) to know how to render and configure the query builder.
\ No newline at end of file
diff --git a/blazor/radio-button/accessibility.md b/blazor/radio-button/accessibility.md
index 597679da9a..9d81b3824c 100644
--- a/blazor/radio-button/accessibility.md
+++ b/blazor/radio-button/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor RadioButton component
 
-The Blazor RadioButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor RadioButton component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also adheres to applicable [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) used to evaluate accessibility.
 
 The accessibility compliance for the Blazor RadioButton component is outlined below.
 
@@ -46,16 +46,16 @@ The Blazor RadioButton component followed the [WAI-ARIA](https://www.w3.org/WAI/
 
 ## Keyboard interaction
 
-The Blazor RadioButton component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor RadioButton component.
+The Blazor RadioButton component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/radio/#keyboardinteraction) guideline, supporting users of assistive technologies and keyboard-only navigation. The following keyboard shortcuts are supported:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↑</kbd> or <kbd>←</kbd> | <kbd>↑</kbd> or <kbd>←</kbd> | Move and select the previous options. |
-| <kbd>↓</kbd> or <kbd>→</kbd> | <kbd>↓</kbd> or <kbd>→</kbd> | Move and select the next options. |
+| <kbd>↑</kbd> or <kbd>←</kbd> | <kbd>↑</kbd> or <kbd>←</kbd> | Move focus to and select the previous option. |
+| <kbd>↓</kbd> or <kbd>→</kbd> | <kbd>↓</kbd> or <kbd>→</kbd> | Move focus to and select the next option. |
 
 ## Ensuring accessibility
 
-The Blazor RadioButton component component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor RadioButton component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
 The accessibility compliance of the Blazor RadioButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/radio-button) in a new window to evaluate the accessibility of the Blazor RadioButton component with accessibility tools.
 
diff --git a/blazor/radio-button/getting-started-webapp.md b/blazor/radio-button/getting-started-webapp.md
index 54a3bdd2ec..265156a721 100644
--- a/blazor/radio-button/getting-started-webapp.md
+++ b/blazor/radio-button/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor RadioButton Component in Blazor Web App
 
-This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,19 @@ This section briefly explains about how to include [Blazor RadioButton](https://
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor RadioButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor RadioButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
+
+Here's an example of how to add **Blazor RadioButton** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Buttons --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -226,7 +255,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %}
 
@@ -238,4 +267,4 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button.
+N> Explore the [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that that shows how to render and configure the Radio Button.
diff --git a/blazor/radio-button/getting-started.md b/blazor/radio-button/getting-started.md
index 782c63b96b..955173bcde 100644
--- a/blazor/radio-button/getting-started.md
+++ b/blazor/radio-button/getting-started.md
@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor RadioButton Component
 
-This section briefly explains about how to include [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor RadioButton](https://www.syncfusion.com/blazor-components/blazor-radio-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Radio Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton) sample.
+To get started quickly with the RadioButton component in Blazor, watch the following video or explore the RadioButton getting-started sample on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RadioButton).
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=a6HR1QGAvLo"%}
@@ -28,11 +28,11 @@ To get start quickly with Radio Button Component using Blazor, you can check on
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor RadioButton** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor RadioButton** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -55,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,8 +73,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure you are in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore packages.
 
 {% tabs %}
 
@@ -88,7 +88,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -96,7 +96,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in **~/Program.cs** of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -131,7 +131,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet
 
-The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section of the **~/index.html** file.
+The theme stylesheet is provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section of **~/index.html**.
 
 ```html
 <head>
@@ -140,11 +140,11 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http
 
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application.
+N> Review [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for options to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Ensure the theme stylesheet is loaded before any custom styles.
 
 ## Add Blazor RadioButton component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the **~/Pages/Index.razor** file.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in **~/Pages/Index.razor**.
 
 {% tabs %}
 {% highlight razor %}
@@ -159,7 +159,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton comp
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBptsKNKsShQnkV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RadioButton Component](./images/blazor-radiobutton-component.png)" %} 
 
@@ -169,4 +169,4 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor RadioButton comp
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button.
+N> Explore the [Blazor Radio Button example](https://blazor.syncfusion.com/demos/buttons/radio-button) that demonstrates rendering and configuration of the Radio Button.
\ No newline at end of file
diff --git a/blazor/radio-button/how-to/customize-radiobutton-appearance.md b/blazor/radio-button/how-to/customize-radiobutton-appearance.md
index f1e13b42d2..895250a160 100644
--- a/blazor/radio-button/how-to/customize-radiobutton-appearance.md
+++ b/blazor/radio-button/how-to/customize-radiobutton-appearance.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Customize Blazor RadioButton Appearance
 
-The appearance of the Radio Button component can be customized by using the CSS rules. Define own CSS rules according to your requirement and assign the class name to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property.
+Customize the appearance of the RadioButton component by applying custom CSS rules and assigning a CSS class to the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property.
 
-The background and border color of the Radio Button is customized through the custom classes to create the primary, success, info, warning, and danger type of Radio Button.
+The background and border color of the radio button can be customized using custom classes to create primary, success, info, warning, and danger variants.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
diff --git a/blazor/radio-button/how-to/radio-button-model-binding.md b/blazor/radio-button/how-to/radio-button-model-binding.md
index 8c63c41e63..2b2c9c5fac 100644
--- a/blazor/radio-button/how-to/radio-button-model-binding.md
+++ b/blazor/radio-button/how-to/radio-button-model-binding.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Radio Button Model Binding in Blazor RadioButton Component
 
-To get start quickly with Model Binding in Blazor RadioButton Component, you can check on this video:
+To get started quickly with model binding in the Blazor RadioButton component, watch the following video:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=4vMuReo0Hz4"%}
 
-This section demonstrates the strongly typed extension support in Radio Button. The view that can bind with any model is called as strongly typed view. You can bind any class as model to view. You can access model properties on that view. You can use data associated with model to render the component.
+This section demonstrates strongly typed view support with the RadioButton component. A strongly typed view binds to a model class, allowing access to its properties and rendering the component based on that data. In this example, the component is placed inside an EditForm and uses DataAnnotationsValidator for validation. The Name property groups the radio buttons so only one option can be selected, and @bind-Checked binds the model property to the selected Value.
 
-In this sample, first check the male value and click the submit button to post the selected value in the Radio Button. When female value is checked, validation error message will be shown below the Radio Button.
+In this sample, selecting Female triggers a validation error message below the radio button group because the Range attribute is configured to allow only the value "male". This demonstrates how validation rules on the model control the allowed selection and display validation feedback.
 
 ```cshtml
 
diff --git a/blazor/radio-button/how-to/right-to-left.md b/blazor/radio-button/how-to/right-to-left.md
index 11979e0f94..937a8d8d83 100644
--- a/blazor/radio-button/how-to/right-to-left.md
+++ b/blazor/radio-button/how-to/right-to-left.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Right-To-Left in Blazor RadioButton Component
 
-Radio Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`.
+The RadioButton component supports right-to-left (RTL) layout, Enable RTL by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_EnableRtl) as `true`.
 
-The following example illustrates how to enable right-to-left support in Radio Button component.
+The following example illustrates enabling right-to-left support in the RadioButton component. RTL can also be configured globally for all Syncfusion components during service registration.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -24,4 +24,4 @@ The following example illustrates how to enable right-to-left support in Radio B
 
 ```
 
-![RIght to Left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png)
\ No newline at end of file
+![Right to left in Blazor RadioButton](./../images/blazor-radiobutton-right-to-left.png)
\ No newline at end of file
diff --git a/blazor/radio-button/how-to/set-the-disabled-state.md b/blazor/radio-button/how-to/set-the-disabled-state.md
index b63a1d3730..7ee01389b8 100644
--- a/blazor/radio-button/how-to/set-the-disabled-state.md
+++ b/blazor/radio-button/how-to/set-the-disabled-state.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Set the disabled state in Blazor RadioButton Component
 
-Radio Button component can be enabled/disabled by giving [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`.
+The RadioButton component can be enabled/disabled by setting [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled) property. To disable Radio Button component, the `Disabled` property can be set as `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -24,4 +24,4 @@ Radio Button component can be enabled/disabled by giving [Disabled](https://help
 
 ```
 
-![Blazor RadioButton in Disable State](./../images/blazor-radiobutton-disable-state.png)
\ No newline at end of file
+![Blazor RadioButton in disabled state](./../images/blazor-radiobutton-disable-state.png)
\ No newline at end of file
diff --git a/blazor/radio-button/label-and-size.md b/blazor/radio-button/label-and-size.md
index 3ca96b60c2..10832f3870 100644
--- a/blazor/radio-button/label-and-size.md
+++ b/blazor/radio-button/label-and-size.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Label and Size in Blazor RadioButton Component
 
-This section explains the different sizes and labels.
+This section explains how to configure labels and sizes for the RadioButton component.
 
 ## Label
 
-Radio Button caption can be defined by using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_Label) property. This reduces the manual addition of label for Radio Button. You can customize the label position before or after the Radio Button through the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_LabelPosition) property.
+Define the RadioButton caption using the [Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_Label) property to automatically render an associated label element, improving accessibility and click/tap targets. Control where the label appears with the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfRadioButton-1.html#Syncfusion_Blazor_Buttons_SfRadioButton_1_LabelPosition) property (before or after the radio button). When multiple radio buttons share the same Name value, they form a group that allows only one selection.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -27,11 +27,11 @@ Radio Button caption can be defined by using the [Label](https://help.syncfusion
 
 ```
 
-![Blazor RadioButton with Label](./images/blazor-radiobutton-label.png)
+![Blazor RadioButton with label](./images/blazor-radiobutton-label.png)
 
 ## Size
 
-The different Radio Button sizes available are default and small. To reduce the size of the default Radio Button to small, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property to `e-small`.
+RadioButton supports two sizes: default and small. To render the small size, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_CssClass) property to`e-small`.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -45,7 +45,7 @@ The different Radio Button sizes available are default and small. To reduce the
 
 ```
 
-![Blazor RadioButton with Different Size](./images/blazor-radiobutton-different-size.png)
+![Blazor RadioButton with different size](./images/blazor-radiobutton-different-size.png)
 
 ## See Also
 
diff --git a/blazor/radio-button/native-event.md b/blazor/radio-button/native-event.md
index 04d573f1a0..8b6f799016 100644
--- a/blazor/radio-button/native-event.md
+++ b/blazor/radio-button/native-event.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Native Events in Blazor RadioButton Component
 
-You can define the native event using on `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.
+Attach native DOM events to the RadioButton component using the @on{event} attribute (for example, @onchange, @onclick). The attribute value is an event handler method, and the event-specific data is provided via the event argument parameter.
 
 The different event argument types for each event are,
 
@@ -20,16 +20,16 @@ The different event argument types for each event are,
 
 ## List of Native events supported
 
-The following native event support have been provided to the Radio Button component:
+The following native event support has been provided to the RadioButton component:
 
-| List of Native events |  |  | | |
+| List of native events |  |  |  |  |
 | --- | --- | --- | --- | --- |
 | onchange | oninput | onblur | onfocus | onfocusout |
-|onfocusin|onclick|onkeydown|onkeyup|onkeypress |
+| onfocusin | onclick | onkeydown | onkeyup | onkeypress |
 
 ## How to bind onchange event to Radio Button
 
-The `onchange` attribute is used to bind the onchange event for Radio Button. Here, we have explained about the sample code snippets of Radio Button.
+Use the `onchange` attribute to bind the change event for a radio button. The following example shows how to access the event arguments in the handler.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -48,4 +48,4 @@ The `onchange` attribute is used to bind the onchange event for Radio Button. He
 
 ```
 
-![Blazor RadioButton with Native Event](./images/blazor-radiobutton-native-event.png)
+![Blazor RadioButton with Native Event](./images/blazor-radiobutton-native-event.png)
\ No newline at end of file
diff --git a/blazor/radio-button/style-and-appearance.md b/blazor/radio-button/style-and-appearance.md
index a5f2f15042..0f8bffd1bd 100644
--- a/blazor/radio-button/style-and-appearance.md
+++ b/blazor/radio-button/style-and-appearance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Styles and Appearances in Blazor RadioButton Component
 
-To modify the RadioButton appearance, you need to override the default CSS of RadioButton component. Find the list of CSS classes and its corresponding section in RadioButton. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
+To modify the RadioButton appearance, override the component’s default CSS. The following table lists common CSS selectors and their purposes within the RadioButton. Ensure custom CSS is loaded after the Syncfusion theme so overrides take effect. A custom theme for all controls can also be created using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 | CSS Class | Purpose of Class |
 | ----- | ----- |
diff --git a/blazor/range-slider/accessibility.md b/blazor/range-slider/accessibility.md
index 0642d1c377..c5b0642df2 100644
--- a/blazor/range-slider/accessibility.md
+++ b/blazor/range-slider/accessibility.md
@@ -17,8 +17,8 @@ The accessibility compliance for the Blazor Range Slider component is outlined b
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
+| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> |
 | Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
@@ -33,45 +33,45 @@ The accessibility compliance for the Blazor Range Slider component is outlined b
     }
 </style>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial support"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor Range Slider component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) patterns to meet the accessibility. The following ARIA attributes are used in the Range Slider component:
+The Blazor Range Slider component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) pattern to meet accessibility requirements. The following ARIA attributes are used in the Range Slider component:
 
 | **Attributes** | **Purpose** |
 | --- | --- |
-| `aria-valuenow` | It indicates the current value of the slider. |
-| `aria-valuetext`| It returns the current text of the slider. |
-| `aria-valuemin` | It indicates the minimum value of the slider. |
-| `aria-valuemax` | It indicates the maximum value of the slider. |
-| `aria-orientation` | It indicates the Slider Orientation. |
-| `aria-label` | Slider left and right button label text (increment and decrement). |
-| `aria-labelledby` | It indicates the name of the Slider. |
+| `aria-valuenow` | Indicates the current value of the slider. |
+| `aria-valuetext`| Provides a human-readable text alternative for the current value. |
+| `aria-valuemin` | Indicates the minimum value of the slider. |
+| `aria-valuemax` | Indicates the maximum value of the slider. |
+| `aria-orientation` | Indicates the slider orientation. |
+| `aria-label` | Defines an accessible name for controls (for example, increment or decrement). |
+| `aria-labelledby` | References the element that provides the accessible name for the slider. |
 
 ## Keyboard interaction
 
-The Keyboard interaction of the Blazor Range Slider component is designed based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for Slider. Users can use the following shortcut keys to interact with the Slider.
+Keyboard interaction of the Blazor Range Slider component is based on the [WAI-ARIA Practices](https://www.w3.org/TR/wai-aria-practices/#slider) described for sliders. Use the following shortcut keys to interact with the slider.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the Slider value.|
-| <kbd>↓</kbd> , <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the Slider value. |
-| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves to the start value (for Range Slider when the second thumb is focused and the Home key is pressed, it moves to the first thumb value). |
-| <kbd>End</kbd> | <kbd>End</kbd> | Moves to the end value (for Range Slider when the first thumb is focused and the End key is pressed, it moves to the second thumb value). |
-| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Increases the Slider by `LargeStep` value. |
-| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Decreases the Slider by `LargeStep` value. |
+| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Increase the slider value. |
+| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Decrease the slider value. |
+| <kbd>Home</kbd> | <kbd>Home</kbd> | Move to the start value (for range sliders, when the second thumb is focused and Home is pressed, it moves to the first thumb’s value). |
+| <kbd>End</kbd> | <kbd>End</kbd> | Move to the end value (for range sliders, when the first thumb is focused and End is pressed, it moves to the second thumb’s value). |
+| <kbd>Page Up</kbd> | <kbd>Page Up</kbd> | Increase by the `LargeStep` value. |
+| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Decrease by the `LargeStep` value. |
 
 ## Ensuring accessibility
 
-The Blazor Range Slider component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
+The Blazor Range Slider component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.
 
-The accessibility compliance of the Range Slider component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the accessibility of the Range Slider component with accessibility tools.
+The accessibility compliance of the Range Slider component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/slider) in a new window to evaluate the Range Slider component with accessibility tools.
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
\ No newline at end of file
diff --git a/blazor/range-slider/format.md b/blazor/range-slider/format.md
index a49a7bcf64..3901e4d7b9 100644
--- a/blazor/range-slider/format.md
+++ b/blazor/range-slider/format.md
@@ -9,11 +9,10 @@ documentation: ug
 
 # Formatting in Blazor Range Slider Component
 
-The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature used to customize the units of Slider values to desired format. The formatted values will also be applied to the ARIA attributes of the slider. There are two ways of achieving formatting in slider.
+The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_Format) feature is used to customize the units and appearance of slider values. Formatted values are also applied to the ARIA attributes of the slider to ensure accessible output. There are two ways to apply formatting in the slider.
 
-* Use the `Format` API of slider which utilizes our **Internationalization** to format values.
-
-* Customize using the events namely [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange).
+* Use the `Format` API of the slider, which leverages the built-in internationalization and .NET standard format strings.
+* Customize formatting using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -28,11 +27,11 @@ The [`Format`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.Sl
 }
 ```
 
-![Formating in Blazor RangeSlider](images/blazor-rangeslider-format.gif)
+![Formatting values in the Blazor Range Slider](images/blazor-rangeslider-format.gif)
 
 ## Using format API
 
-Slider provides different predefined formatting styles like Numeric (N), Percentage (P), Currency (C) and # specifiers.
+Slider provides predefined formatting styles such as Numeric (`N`), Percentage (`P`), Currency (`C`), and custom numeric format strings (for example, `#`). These formats are culture-aware and use the application’s current culture for symbols and separators.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -48,11 +47,11 @@ Slider provides different predefined formatting styles like Numeric (N), Percent
 
 ```
 
-![Blazor Range Slider Format API](images/blazor-rangeslider-format-api.gif)
+![Blazor Range Slider format API](images/blazor-rangeslider-format-api.gif)
 
 ## Using Events
 
-For custom formatting use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). Below is an example where slider values are formatted into weekdays and corresponding tooltip values are formatted as days of the week.
+For custom scenarios, use event handlers like [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange). The following example formats tick labels as weekday names and tooltips as day numbers.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -82,4 +81,4 @@ For custom formatting use event handlers like [`TicksRendering`](https://help.sy
 
 ```
 
-![Blazor Range Slider Events](images/blazor-rangeslider-format-using-events.png)
\ No newline at end of file
+![Blazor Range Slider events](images/blazor-rangeslider-format-using-events.png)
\ No newline at end of file
diff --git a/blazor/range-slider/getting-started-webapp.md b/blazor/range-slider/getting-started-webapp.md
index 0ce7360f5f..676c4c1654 100644
--- a/blazor/range-slider/getting-started-webapp.md
+++ b/blazor/range-slider/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Range Slider in Blazor Web App
 
-This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,19 @@ This section briefly explains about how to include [Blazor Range Slider](https:/
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor Range Slider** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Range Slider** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add **Blazor Range Slider** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -223,7 +252,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VthfZWAZKrFqBOlr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Slider Component](images/blazor-rangeslider.gif)" %}
 
diff --git a/blazor/range-slider/getting-started.md b/blazor/range-slider/getting-started.md
index 89bf5ed058..aaea1bd447 100644
--- a/blazor/range-slider/getting-started.md
+++ b/blazor/range-slider/getting-started.md
@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor Range Slider Component
 
-This section briefly explains about how to include [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Blazor Range Slider component, you can check on this video.
+To get started quickly with the Blazor Range Slider component, watch the following video overview.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=UeSbfQtK-5I" %}
@@ -28,11 +28,11 @@ To get start quickly with Blazor Range Slider component, you can check on this v
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor Range Slider** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Range Slider** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -55,9 +55,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,8 +73,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure you are in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -88,7 +88,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -96,7 +96,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +107,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of your Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -131,7 +131,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are provided via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
 
 ```html
 <head>
@@ -140,7 +140,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different theme options (such as Bootstrap 5, Fluent, or Material) and referencing methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Blazor Range Slider component
 
@@ -156,7 +156,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider com
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Range Slider component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VthfZWAZKrFqBOlr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Slider Component](images/blazor-rangeslider.gif)" %}
 
@@ -178,4 +178,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
 
-[Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+[Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/customize-slider-ticks-label.md b/blazor/range-slider/how-to/customize-slider-ticks-label.md
index eb8bc3a999..2aa71ec821 100644
--- a/blazor/range-slider/how-to/customize-slider-ticks-label.md
+++ b/blazor/range-slider/how-to/customize-slider-ticks-label.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the tick label in Blazor Range Slider Component
 
-Slider can be customized via CSS. By overriding the slider CSS classes, you can customize the ticks. The ticks in slider allows to easily identify the current value/values of the slider. It contains [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). By default, slider has class `e-tick` for slider ticks. You can override the class as per your requirement. Refer to the following code snippet to render ticks.
+The slider’s tick appearance can be customized with CSS. By overriding the slider’s CSS classes, the tick marks (icons) and their styles can be tailored. Ticks help users identify current values on the slider. Tick generation is controlled by the [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep) settings. By default, the slider uses the `e-tick` class for ticks. The example below appends a custom class during the `TicksRendering` event and injects a glyph via CSS to render custom tick icons.
 
 ```css
 .e-scale .e-tick.e-custom::before {
@@ -19,7 +19,7 @@ Slider can be customized via CSS. By overriding the slider CSS classes, you can
 
 ```
 
-Here, the color for rendered ticks has been applied through nth-child(`child_number`). The color is applied to the value of the `child_number` in the slider.
+In this example, individual tick colors are applied using the `:nth-child(child_number)` selector to target each tick element.
 
 ```css
 #ticks_slider .e-scale :nth-child(1)::before {
@@ -165,4 +165,4 @@ Here, the color for rendered ticks has been applied through nth-child(`child_num
 </style>
 ```
 
-![Customizing TicksLabel in Blazor RangeSlider](./../images/blazor-rangeslider-ticks-label.gif)
\ No newline at end of file
+![Customizing TicksLabel in the Blazor Range Slider](./../images/blazor-rangeslider-ticks-label.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/customize-the-bar.md b/blazor/range-slider/how-to/customize-the-bar.md
index 2052a7949c..a26fe642ba 100644
--- a/blazor/range-slider/how-to/customize-the-bar.md
+++ b/blazor/range-slider/how-to/customize-the-bar.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the bar in Blazor Range Slider Component
 
-Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the slider bar. The slider bar can be customized with different themes. By default, slider have class name `e-slider-track` for bar. The class can be overridden with our own color values like the following code snippet.
+The slider’s appearance can be customized with CSS. By overriding the slider CSS classes, the slider bar can be styled to match application design requirements. The slider bar supports theme-based styling and can be further customized. By default, the slider uses the `e-slider-track` class for the track. Override the class with custom color values as shown in the following example.
 
 ```css
 #gradient_slider.e-control.e-slider .e-range {
@@ -23,7 +23,7 @@ Slider appearance can be customized through CSS. By overriding the slider CSS cl
 }
 ```
 
-In this code snippet, it can be seen that the dynamic color of the slider is being changed.
+In this example, the gradient background of the selection bar is customized to create a dynamic color effect.
 
 ```cshtml
 <SfSlider @bind-Value="@Value" ID="dynamic_color_slider" Type="SliderType.MinRange">
@@ -31,7 +31,7 @@ In this code snippet, it can be seen that the dynamic color of the slider is bei
 </SfSlider>
 ```
 
-Color bar can be customized in quite a number of ways.
+The color of the bar can be customized in several ways, including height, gradients, and dynamic CSS classes based on the current value.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs;
@@ -184,16 +184,16 @@ Color bar can be customized in quite a number of ways.
 
 ```
 
-![Blazor RangeSlider with Bar](./../images/blazor-rangeslider-with-bar.gif)
+![Blazor Range Slider with customized bar styles](./../images/blazor-rangeslider-with-bar.gif)
 
 ## Customizing the Range Slider Track with Color Segments
 
 You can enhance the Blazor Range Slider by defining different track colors for specific value ranges. This is done using the [`ColorRange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html) child elements within the [`SliderColorRanges`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderColorRanges.html) tag.
 
-**How It Works:**
+**How it works:**
 
 * [``Start``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_Start): Defines where the color segment begins.
-* [``End``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_End): Defines where the color segment stops.
+* [``End``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_End): Defines where the color segment ends.
 * [``Color``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ColorRange.html#Syncfusion_Blazor_Inputs_ColorRange_Color): Specifies the color for the segment.
 
 ```cshtml
@@ -226,4 +226,4 @@ You can enhance the Blazor Range Slider by defining different track colors for s
 
 ```
 
-![Blazor RangeSlider with track color](./../images/blazor-rangeslider-track.png)
+![Blazor Range Slider with track color](./../images/blazor-rangeslider-track.png)
diff --git a/blazor/range-slider/how-to/customize-the-limits.md b/blazor/range-slider/how-to/customize-the-limits.md
index 86ea41d329..2a04998957 100644
--- a/blazor/range-slider/how-to/customize-the-limits.md
+++ b/blazor/range-slider/how-to/customize-the-limits.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the limits in Blazor Range Slider Component
 
-Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider limit bar can be customized. Here, the limit bar is customized with different background color. By default, the slider has class `e-limits` for limits bar. You can override the class with our own color values as given in the following code snippet.
+The slider’s limits bar can be customized with CSS. By overriding the slider CSS classes, the limits region can be styled to match application design requirements. In this example, the limits bar is given a custom background color. By default, the limits bar uses the `e-limits` class. Override that class with your preferred color values as shown below.
 
 ```css
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
@@ -17,7 +17,7 @@ Slider appearance can be customized via CSS. By overriding the slider CSS classe
 }
 ```
 
-And on implementing the above code snippet in the below slider control's Blazor code, the overview would be like the one found below.
+Apply the above CSS to the following sliders to visualize the customized limits bar.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs;
@@ -89,4 +89,4 @@ And on implementing the above code snippet in the below slider control's Blazor
 </style>
 ```
 
-![Customizing Limits in Blazor RangeSlider](./../images/blazor-rangeslider-custom-limits.gif)
\ No newline at end of file
+![Customizing the limits bar in the Blazor Range Slider](./../images/blazor-rangeslider-custom-limits.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/customize-the-thumb.md b/blazor/range-slider/how-to/customize-the-thumb.md
index 42f09f4ba8..c7d0630f3d 100644
--- a/blazor/range-slider/how-to/customize-the-thumb.md
+++ b/blazor/range-slider/how-to/customize-the-thumb.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Customize the thumb in Blazor Range Slider Component
 
-Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize the thumb. By default, slider has unique class `e-handle` for slider thumb. You can override the following class as per your requirement. Here, in the sample, the slider thumb has been customized to square, circle, oval shapes, and background image has also been customized.
+The slider’s appearance can be customized with CSS. By overriding the slider CSS classes, the thumb can be restyled. The slider thumb uses the `e-handle` class by default. Override this class to create different shapes or apply custom images. In the following example, the slider thumb is customized as square, circle, and oval shapes, and a background image is also applied.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs;
@@ -115,4 +115,4 @@ Slider appearance can be customized through CSS. By overriding the slider CSS cl
 </style>
 ```
 
-![Blazor Range Slider with Custom Thumb](./../images/blazor-rangeslider-custom-thumb.gif)
\ No newline at end of file
+![Blazor Range Slider with custom thumb](./../images/blazor-rangeslider-custom-thumb.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/date-range-slider.md b/blazor/range-slider/how-to/date-range-slider.md
index 58fea830d4..8c232b10c2 100644
--- a/blazor/range-slider/how-to/date-range-slider.md
+++ b/blazor/range-slider/how-to/date-range-slider.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Date Range Slider in Blazor Range Slider Component
 
-The date formatting can be achieved using [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events. The process of date formatting is explained in the below sample.
+This example demonstrates how to display dates in the Blazor Range Slider by formatting tick labels and tooltips. The date formatting is implemented using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events, as shown in the following sample.
 
 ```cshtml
 @using System.Globalization;
@@ -45,4 +45,4 @@ The date formatting can be achieved using [`TicksRendering`](https://help.syncfu
 }
 ```
 
-![Blazor Range Slider with DateRange](../images/blazor-rangeslider-with-daterange.gif)
\ No newline at end of file
+![Blazor Range Slider with date-formatted ticks](../images/blazor-rangeslider-with-daterange.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/numeric-range-slider.md b/blazor/range-slider/how-to/numeric-range-slider.md
index 633681a619..d915a6360f 100644
--- a/blazor/range-slider/how-to/numeric-range-slider.md
+++ b/blazor/range-slider/how-to/numeric-range-slider.md
@@ -9,30 +9,34 @@ documentation: ug
 
 # Numeric Range Slider in Blazor Range Slider Component
 
-The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.
+The Blazor Range Slider can display numeric values with custom formatting using the `Format` property on `SliderTicks` and `SliderTooltip`. Formatting options include appending units, controlling decimal precision, and adding leading zeros. The examples below demonstrate three common scenarios.
 
-There are Numeric Range Sliders, which can be formatted in any way of your choice. In the examples found below, the first one demonstrates the visualization of ticks in km.
+- Units: Append units such as “km” to tick labels and tooltips
+- Decimal places: Control the number of decimal digits displayed
+- Leading zeros: Pad values with zeros to a fixed width
+
+The first example formats values with a unit suffix (km).
 
 ```cshtml
 <SliderTicks ShowSmallTicks="true" Placement="Placement.After" LargeStep="20" SmallStep="10" Format="##.##km"> </SliderTicks>
             <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" Format="##.##km"></SliderTooltip>
 ```
 
-The second example showcases the use of decimal point in the Slider's ticks and tooltip placement.
+The second example shows values with a specific decimal format.
 
 ```cshtml
 <SliderTicks ShowSmallTicks="true" Placement="Placement.After" LargeStep="20" SmallStep="10" Format="##.#00"> </SliderTicks>
                 <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" Format="##.#00"></SliderTooltip>
 ```
 
-And in the third example, the formatting involves the placement of zeros before the required values.
+The third example pads values with leading zeros to achieve a fixed width.
 
 ```cshtml
 <SliderTicks ShowSmallTicks="true" Placement="Placement.After" LargeStep="20" SmallStep="10" Format="0000#"> </SliderTicks>
             <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Before" Format="0000#"></SliderTooltip>
 ```
 
-The complete code for the above Numeric Range Slider can be found below.
+The complete code for the numeric formatting examples is shown below.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs;
diff --git a/blazor/range-slider/how-to/reversible-slider.md b/blazor/range-slider/how-to/reversible-slider.md
index 9eaefc91e1..7d0357c689 100644
--- a/blazor/range-slider/how-to/reversible-slider.md
+++ b/blazor/range-slider/how-to/reversible-slider.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Reversible Slider in Blazor Range Slider Component
 
-You can create a Range Slider rendered with values in reverse order by setting the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) property to the maximum value and the [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property to the minimum value. An example of how to achieve a Reversible Slider is shown below
+Create a reversible slider (values displayed in descending order) by setting the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) property to the maximum value and the [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property to the minimum value. The example below renders a vertical range slider that counts down from 100 to 0.ow
 
 ```cshtml
 @using System.Globalization;
@@ -40,4 +40,4 @@ You can create a Range Slider rendered with values in reverse order by setting t
 
 ![Blazor Reversible Slider](./../images/blazor-reversible-slider.gif)
 
-N> Reversible order can be achieved with horizontal orientation Slider by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_EnableRtl) as true.
+N> For a horizontal slider, a reversed visual order can be achieved by enabling right-to-left layout with [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_EnableRtl) set to `true`. 
diff --git a/blazor/range-slider/how-to/slider-inside-dialog.md b/blazor/range-slider/how-to/slider-inside-dialog.md
index b43a5839f6..13bacc9a1a 100644
--- a/blazor/range-slider/how-to/slider-inside-dialog.md
+++ b/blazor/range-slider/how-to/slider-inside-dialog.md
@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Range Slider inside Dialog popup in Blazor Range Slider Component | Syncfusion
+title: Range Slider inside Dialog in Blazor Range Slider | Syncfusion
 description: Checkout and learn here all about Slider inside Dialog popup in Syncfusion Blazor Range Slider component and more.
 platform: Blazor
 control: Range Slider
 documentation: ug
 ---
 
-# Render Blazor Range Slider Inside Dialog Popup
+# Render the Blazor Range Slider Inside a Dialog Popup
 
-The Blazor Slider component will be created before the Dialog popup is opened, and the Slider component will not be adapted to the parent element during dynamic rendering. As a result, the Slider does not render with the accurate initial value. To address this case, you must invoke the Slider's [RepositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_RepositionAsync) method when the Dialog component is opened, utilizing the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event.
+When the dialog is initially hidden, the Blazor Range Slider may be initialized before layout information is available. As a result, the slider cannot size and position itself correctly, and the initial value may not render accurately. To resolve this, capture the slider instance using `@ref` and call the slider’s [RepositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_RepositionAsync) method in the dialog’s [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event so the component recalculates its layout after the dialog is visible.
 
 ```cshtml
 
diff --git a/blazor/range-slider/how-to/time-range-slider.md b/blazor/range-slider/how-to/time-range-slider.md
index c117a93ce3..da0b2f6fd2 100644
--- a/blazor/range-slider/how-to/time-range-slider.md
+++ b/blazor/range-slider/how-to/time-range-slider.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Time Range Slider in Blazor Range Slider Component
 
-The time formatting can be achieved same as the date formatting using [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events.
+Time formatting for the Blazor Range Slider can be achieved in the same way as date formatting by using the [`TicksRendering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_TicksRendering) and [`OnTooltipChange`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderEvents-1.html#Syncfusion_Blazor_Inputs_SliderEvents_1_OnTooltipChange) events.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -58,4 +58,4 @@ The time formatting can be achieved same as the date formatting using [`TicksRen
 }
 ```
 
-![Blazor Range Slider with TimeRange](../images/blazor-rangeslider-with-timerange.gif)
\ No newline at end of file
+![Blazor Range Slider showing a time range](../images/blazor-rangeslider-with-timerange.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/how-to/validate.md b/blazor/range-slider/how-to/validate.md
index 9cdd0bf538..b300142ac9 100644
--- a/blazor/range-slider/how-to/validate.md
+++ b/blazor/range-slider/how-to/validate.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Validation of Slider in Blazor Range Slider Component
 
-The Range Slider component can be validated using our FormValidator. The following steps walk-through slider validation. Render slider component inside a form, by giving the required styles.
+The Range Slider component can be validated using Blazor’s built-in form validation with DataAnnotations. The steps below demonstrate how to place the slider inside an EditForm and display validation messages.
 
-In Blazor Range Slider component, the DataAnnotation Validator is used here.
+In the following examples, the DataAnnotationsValidator is used to validate slider values.
 
 ```csharp
  public class Annotation
@@ -98,4 +98,4 @@ In Blazor Range Slider component, the DataAnnotation Validator is used here.
 </style>
 ```
 
-![Validation in Blazor RangeSlider](./../images/blazor-rangeslider-validation.gif)
\ No newline at end of file
+![Validation in Blazor Range Slider](./../images/blazor-rangeslider-validation.gif)
\ No newline at end of file
diff --git a/blazor/range-slider/limits.md b/blazor/range-slider/limits.md
index 8cc2fe1fc0..c22bfb0134 100644
--- a/blazor/range-slider/limits.md
+++ b/blazor/range-slider/limits.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Limits in Blazor Range Slider Component
 
-The slider limits restrict the slider thumb between a particular range. This is used if higher or lower value affects the process or product where the slider is being used.
+Slider limits restrict the movement of the slider thumb(s) within a specified range. This is useful when higher or lower values would negatively affect a process or product where the slider is used.
 
-The following are the six options in the slider's limits object. Each API in the limits object is optional.
+The following options are available in the slider’s limits object. Each API in the limits object is optional.
 
-* [``Enabled``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_Enabled): Enables the limits in the Slider.
+* [``Enabled``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_Enabled): Enables the limits in the slider.
 * [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart): Sets the minimum limit for the first handle.
 * [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd): Sets the maximum limit for the first handle.
 * [``MaxStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MaxStart): Sets the minimum limit for the second handle.
@@ -21,11 +21,11 @@ The following are the six options in the slider's limits object. Each API in the
 * [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed): Locks the first handle.
 * [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed): Locks the second handle.
 
-## Default and MinRange Slider limits
+## Default and MinRange slider limits
 
-There is only one handle in the Default and MinRange Slider, so [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart), [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd), and [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) options can be used. When the limits are enabled in the Slider, the limited area becomes darken. So you can differentiate the allowed and restricted area. 
+In Default and MinRange sliders, there is only one handle, so the [``MinStart``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinStart), [``MinEnd``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_MinEnd), and [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) options are applicable. When limits are enabled, the restricted area is darkened, making it easy to distinguish allowed and disallowed regions.
 
-Refer to the following snippet to enable the limits in the Slider.
+Refer to the following snippet to enable limits in the slider.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -37,9 +37,9 @@ Refer to the following snippet to enable the limits in the Slider.
 
 ![Blazor Range Slider with Minimum Range Limits](images/blazor-rangeslider-min-range-limit.gif)
 
-## Range Slider limits
+## Range slider limits
 
-In the Range Slider, both handles can be restricted and locked from the limit's object. In this sample, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90.
+In the Range slider, both handles can be restricted and locked using the limits object. In this example, the first handle is limited between 10 and 40, and the second handle is limited between 60 and 90.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -57,7 +57,7 @@ In the Range Slider, both handles can be restricted and locked from the limit's
 
 ## Handle lock
 
-The movement of slider handles can be locked by enabling the [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) and [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed) properties in the limit's object.
+The movement of slider handles can be locked by enabling the [``StartHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_StartHandleFixed) and [``EndHandleFixed``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderLimits.html#Syncfusion_Blazor_Inputs_SliderLimits_EndHandleFixed) properties in the limits object.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/range-slider/localization.md b/blazor/range-slider/localization.md
index 8f1cadf7b5..26143c121e 100644
--- a/blazor/range-slider/localization.md
+++ b/blazor/range-slider/localization.md
@@ -9,4 +9,4 @@ documentation: ug
 
 # Localization in Blazor Range Slider Component
 
-[Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
\ No newline at end of file
+The [Blazor Range Slider](https://www.syncfusion.com/blazor-components/blazor-range-slider) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
\ No newline at end of file
diff --git a/blazor/range-slider/orientation.md b/blazor/range-slider/orientation.md
index 6c8f118007..15019901cb 100644
--- a/blazor/range-slider/orientation.md
+++ b/blazor/range-slider/orientation.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Orientation in Blazor Range Slider Component
 
-The Slider can be displayed, either in horizontal or vertical orientation by using [**Orientation**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property. By default, the Slider renders in horizontal orientation.
+The slider can be displayed in either horizontal or vertical orientation using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Orientation) property. By default, the slider renders in a horizontal orientation.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/range-slider/style.md b/blazor/range-slider/style.md
index 52bfee8366..e0d6e0ff8f 100644
--- a/blazor/range-slider/style.md
+++ b/blazor/range-slider/style.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # CSS Structure in Blazor Range Slider Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following content outlines the CSS structure that can be used to modify the control’s appearance according to application requirements.
 
 ## Customizing the slider track
 
diff --git a/blazor/range-slider/ticks.md b/blazor/range-slider/ticks.md
index bc4730d8d8..fa8939177f 100644
--- a/blazor/range-slider/ticks.md
+++ b/blazor/range-slider/ticks.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Ticks in Blazor Range Slider Component
 
-The Ticks in Slider supports to easily identify the current value/values of the Slider. It contains [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). The value of the major ticks alone will be displayed in the slider. In order to enable/disable the small ticks, use the [`ShowSmallTicks`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_ShowSmallTicks) property.
+Ticks in the slider help users quickly identify the current value or range. Configure tick intervals using [`SmallStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_SmallStep) and [`LargeStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_LargeStep). By default, only major (large) tick labels are displayed. Use the [`ShowSmallTicks`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTicks.html#Syncfusion_Blazor_Inputs_SliderTicks_ShowSmallTicks) property to show or hide minor ticks.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -28,7 +28,7 @@ The Ticks in Slider supports to easily identify the current value/values of the
 
 ## Step
 
-When the Slider is moved, it increases/decreases the value based on the step value. By default, the value is increased/decreased by 1. Use the [`Step`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Step) property to change the increment step value.
+When the slider moves, its value increases or decreases by the step amount. By default, the step is 1. Use the [`Step`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Step) property to change the increment.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -46,7 +46,7 @@ When the Slider is moved, it increases/decreases the value based on the step val
 
 ## Min and Max
 
-Enables the minimum/starting and maximum/ending value of the Slider, by using the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) and [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) property. By default, the minimum value is 1 and maximum value is 100. In the following sample the slider is rendered with the min value as 100 and max value as 1100.
+Set the minimum (start) and maximum (end) values using the [`Min`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Min) and [`Max`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Max) properties. By default, the slider range is 1 to 100. The following example configures a range from 100 to 1100.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -87,4 +87,4 @@ The [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Input
     }
 }
 
-```
+```
\ No newline at end of file
diff --git a/blazor/range-slider/tooltip.md b/blazor/range-slider/tooltip.md
index 34a5f69803..a28a4de116 100644
--- a/blazor/range-slider/tooltip.md
+++ b/blazor/range-slider/tooltip.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Tooltip in Blazor Range Slider Component
 
-The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the [`Placement`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTooltip.html#Syncfusion_Blazor_Inputs_SliderTooltip_Placement) property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.
+The slider can display a tooltip that shows the current value when interacting with the control. Configure the tooltip position using the [`Placement`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SliderTooltip.html#Syncfusion_Blazor_Inputs_SliderTooltip_Placement) property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -23,13 +23,13 @@ The Slider displays the tooltip to indicate the current value by clicking the Sl
 }
 ```
 
-![Blazor Range Slider displays Tooltip](images/blazor-rangeslider-tooltip.png)
+![Blazor Range Slider displaying a tooltip](images/blazor-rangeslider-tooltip.png)
 
 ## Buttons
 
-The Slider value can be changed by using the [**ShowButtons**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property which can be used to Increase and Decrease the values. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.
+Change the slider value using the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_ShowButtons) property, which renders increment and decrement buttons. In a range slider, button clicks change the first handle by default. To change the other handle, move focus to it and then use the buttons.
 
-N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes to the handle and not to the button.
+N> After enabling slider buttons, pressing the Tab key moves focus to the handle, not the buttons.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -43,4 +43,4 @@ N> After enabling the slider buttons if the 'Tab' key is pressed, the focus goes
 }
 ```
 
-![Blazor Range Slider with Buttons](images/blazor-rangeslider-buttons.png)
\ No newline at end of file
+![Blazor Range Slider with buttons](images/blazor-rangeslider-buttons.png)
\ No newline at end of file
diff --git a/blazor/range-slider/types.md b/blazor/range-slider/types.md
index 8d794370c3..9c17361685 100644
--- a/blazor/range-slider/types.md
+++ b/blazor/range-slider/types.md
@@ -9,16 +9,15 @@ documentation: ug
 
 # Types in Blazor Range Slider Component
 
-The [**Type**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Type) of Slider are as follows:
+The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSlider-1.html#Syncfusion_Blazor_Inputs_SfSlider_1_Type) options for the slider are:
 
 | **Types** | **Usage** |
 | --- | --- |
-| Default | Allows to select a single value in the Slider. |
-| MinRange | Allows to select a single value in the Slider. Its display’s a shadow from the start to the current value. |
-| Range | Allows to select a range of values in the Slider. It displays shadow in-between the selection range. |
+| Default | Selects a single value. |
+| MinRange | Selects a single value and displays a filled selection from the start to the current value. |
+| Range | Selects a range of values using two handles and displays a filled selection between them. |
 
-N> Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value.
-In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles.
+N> Default and MinRange both select a single value. MinRange visually fills the track from the start value to the current handle position. Range uses two handles to select a span of values and fills the area between them.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -38,4 +37,4 @@ In Min-Range Slider, a shadow is considered from the start value to current hand
 }
 ```
 
-![Displaying Different Blazor RangeSliders](images/blazor-rangeslider-types.png)
+![Displaying different Blazor Range Sliders](images/blazor-rangeslider-types.png)
\ No newline at end of file
diff --git a/blazor/rating/accessibility.md b/blazor/rating/accessibility.md
index f74714e1d3..51c1ab383a 100644
--- a/blazor/rating/accessibility.md
+++ b/blazor/rating/accessibility.md
@@ -15,14 +15,14 @@ The accessibility compliance for the Blazor Rating component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Right-To-left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Full support"> |
 
 <style>
     .post .post-content img {
@@ -31,43 +31,43 @@ The accessibility compliance for the Blazor Rating component is outlined below.
     }
 </style>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Full support"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial support"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor Rating component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Rating component:
+The Blazor Rating component follows the [WAI-ARIA slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor Rating component:
 
 | Attributes | Purpose |
 | ------------ | ----------------------- |
-| `role=slider` | It defines an input where the user selects a value from within a specified range. |
-| `role=button` | Specifies that the reset is a clickable element that resets the rating to its minimum value. |
-| `aria-label` | Provides an accessible name for Rating. |
-| `aria-valuemin` | It defines the minimum value of rating. |
-| `aria-valuemax` | It defines the maximum value of rating. |
-| `aria-valuenow` | It defines the current value of rating. |
-| `aria-hidden` | It specifies whether the reset button is interactive or not. |
+| `role=slider` | Defines an input where the user selects a value from within a specified range. |
+| `role=button` | Indicates that the reset control is clickable and resets the rating to its minimum value. |
+| `aria-label` | Provides an accessible name for the Rating component. |
+| `aria-valuemin` | Defines the minimum rating value. |
+| `aria-valuemax` | Defines the maximum rating value. |
+| `aria-valuenow` | Announces the current rating value. |
+| `aria-hidden` | Hides the element from assistive technologies when present. |
 
 ## Keyboard interaction
 
-The Blazor Rating component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Rating component.
+The Blazor Rating component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboardinteraction) guideline, improving accessibility for people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Rating component.
 
 | Windows | Mac | Actions |
 |------------|-------------------| ---|
-| <kbd>Space</kbd> | <kbd>Space</kbd> | When **Reset Button** is focused, resets to `min` value. |
+| <kbd>Space</kbd> | <kbd>Space</kbd> | When the Reset button is focused, resets to the `min` value. |
 | <kbd>↑</kbd> | <kbd>↑</kbd> | Increases the value. |
-| <kbd>←</kbd> | <kbd>←</kbd> | Decreases the value; in RTL mode, increases the value. |
+| <kbd>←</kbd> | <kbd>←</kbd> | Decreases the value; in right-to-left mode, increases the value. |
 | <kbd>↓</kbd> | <kbd>↓</kbd> | Decreases the value. |
-| <kbd>→</kbd> | <kbd>→</kbd> | Increases the value; in RTL mode, decreases the value. |
+| <kbd>→</kbd> | <kbd>→</kbd> | Increases the value; in right-to-left mode, decreases the value. |
 
 ## Ensuring accessibility
 
-The Blazor Rating component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Rating component’s accessibility is verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor Rating component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the accessibility of the Blazor Rating component with accessibility tools.
+The accessibility compliance of the Blazor Rating component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the component with accessibility tools.
 
 ## See also
 
diff --git a/blazor/rating/appearance.md b/blazor/rating/appearance.md
index 2bc9db80ce..e9ed0bb5c9 100644
--- a/blazor/rating/appearance.md
+++ b/blazor/rating/appearance.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Appearance in Blazor Rating Component
 
-You can also customize the appearance of rating component.
+The appearance of the Blazor Rating component can be customized to match application design requirements.
 
 ## Items count
 
@@ -23,13 +23,13 @@ You can specify the number of rating items using the [ItemsCount](https://help.s
 
 ```
 
-In this example, the rating component will display `8` rating items. The `Value` property specifies the number of rating items that should be filled, so in this case `3` of the `8` rating items will be filled.
+In this example, the rating component displays 8 rating items. The `Value` property specifies how many items appear filled, so 3 of the 8 items are filled.
 
 ![Blazor Rating Component with ItemsCount](images/blazor-rating-items-count.png)
 
 ## Disabled
 
-You can disable the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one.
+Disable the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one.
 
 ```cshtml
 
@@ -43,7 +43,7 @@ You can disable the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rati
 
 ## Visible
 
-You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden.
+Use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden.
 
 ```cshtml
 
@@ -57,7 +57,7 @@ You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 ## Read only
 
-You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent the user from changing the rating value.
+Use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent changes to the rating value via mouse or keyboard.
 
 ```cshtml
 
@@ -71,11 +71,11 @@ You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ## CssClass
 
-You can customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property. 
+Customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property. 
 
 ### Changing rating symbol border color
 
-You can change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color.
+Change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color.
 
 ```cshtml
 
@@ -97,7 +97,7 @@ You can change the rating icon border color in Blazor Rating component, you can
 
 ### Changing rated/un-rated symbol fill color 
 
-You can customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color.
+Customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color.
 
 ```cshtml
 
@@ -117,13 +117,13 @@ You can customize the fill colors of rated and un-rated icons in the Rating comp
 
 ```
 
-This will customize the rated fill color to `#ffe814` and un-rated fill color to `#d8d7d4`. `--rating-value` in the linear-gradient provides the current value of the rating item.
+This customizes the rated fill color to `#ffe814` and the unrated fill color to `#d8d7d4`. The `--rating-value` custom property in the gradient reflects the current value of the rating item.
 
 ![Blazor Rating Component with custom fill color for icons](images/blazor-rating-fill-color.png)
 
 ### Changing the item spacing
 
-You can change the space between the rating items in Blazor Rating component, by using the `CssClass` property and setting the `margin` / `padding` CSS property of `.e-rating-item-container` to your desired size. 
+To change the space between rating items in the Blazor Rating component, use the `CssClass` property and set the `margin` or `padding` of `.e-rating-item-container` to the desired size. 
 
 ```cshtml
 
@@ -144,7 +144,7 @@ You can change the space between the rating items in Blazor Rating component, by
 
 ## Changing icon using CssClass
 
-You can change the rating item icon in Blazor Rating component, you can use the `CssClass` property and set the `content` CSS property of `.e-icons.e-star-filled:before` to your desired font icon.
+To change the rating item icon in the Blazor Rating component, use the `CssClass` property and set the `content` of `.e-icons.e-star-filled:before` to the desired font icon.
 
 ```cshtml
 
diff --git a/blazor/rating/events.md b/blazor/rating/events.md
index add2ec773b..50eb38333b 100644
--- a/blazor/rating/events.md
+++ b/blazor/rating/events.md
@@ -13,7 +13,7 @@ This section describes the rating events that will be triggered when appropriate
 
 ## Created
 
-The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event when the rendering of the rating component is completed.
+The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event after the component rendering is completed. Use this event for initialization logic that depends on the rendered UI.
 
 ```cshtml
 
@@ -32,7 +32,7 @@ The rating component triggers the [Created](https://help.syncfusion.com/cr/blazo
 
 ## ValueChanged
 
-The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the value of the rating is changed. The changed value is passed as the event argument.
+The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the rating value changes. The new value is passed as the event argument.
 
 ```cshtml
 
@@ -51,7 +51,7 @@ The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/
 
 ## OnItemHover
 
-The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when the rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html) passed as an event argument provides the details of the hovered item.
+The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when a rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html) in the event provides details such as the hovered item’s index and value.
 
 ```cshtml
 
diff --git a/blazor/rating/getting-started-webapp.md b/blazor/rating/getting-started-webapp.md
index 324e31ca98..828ba040eb 100644
--- a/blazor/rating/getting-started-webapp.md
+++ b/blazor/rating/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Rating in Blazor Web App
 
-This section briefly explains about how to include `Blazor Rating` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Rating](https://www.syncfusion.com/blazor-components/blazor-rating) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 {% tabcontents %}
 
@@ -21,17 +21,19 @@ This section briefly explains about how to include `Blazor Rating` component in
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
+
+![Create Blazor Web App](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor Rating** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Rating** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
@@ -54,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +72,9 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -92,20 +92,69 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
 
 {% endtabcontent %}
 
-{% endtabcontents %}
+{% tabcontent .NET CLI %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Prerequisites
+
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet --version
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Blazor Web App using .NET CLI
+
+Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-| Interactive Render Mode | Description |
-| -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet new blazor -o BlazorApp -int Auto
+cd BlazorApp
+cd BlazorApp.Client
+
+{% endhighlight %}
+{% endtabs %}
+
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+
+Here's an example of how to add **Blazor Rating** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET CLI" %}
+
+dotnet add package Syncfusion.Blazor.Inputs --version {{ site.releaseversion }}
+dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
+dotnet restore
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
+
+{% endtabcontent %}
+
+{% endtabcontents %}
+
+## Add Import Namespaces
+
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +165,11 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,27 +203,6 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
-
-...
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-
-var app = builder.Build();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
 ## Add stylesheet and script resources
 
 The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
@@ -193,16 +223,15 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
 | Per page/component | Auto | @rendermode InteractiveAuto |
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -221,13 +250,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %}
 
 ## Value
 
-You can set the rating value by using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property.
+Set the rating using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/rating/getting-started.md b/blazor/rating/getting-started.md
index 492c602d31..68e34d8407 100644
--- a/blazor/rating/getting-started.md
+++ b/blazor/rating/getting-started.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor Rating Component
 
-This section briefly explains about how to include `Blazor Rating` component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the Blazor Rating component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get started quickly with the Blazor Rating component, you can check out this video.
+To get started quickly with the Blazor Rating component, watch the following video overview that demonstrates installation, configuration, and basic usage.
 
 {% youtube "youtube:https://www.youtube.com/watch?v=yWhINyylnTU"%}
 
@@ -25,11 +25,11 @@ To get started quickly with the Blazor Rating component, you can check out this
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor Rating** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Rating** component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -52,9 +52,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -70,8 +70,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure you are in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -85,7 +85,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -93,7 +93,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -137,7 +137,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for different theme options (such as Bootstrap 5, Fluent, or Material) and referencing methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script reference approaches, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component
 
@@ -151,7 +151,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rating component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %}
 
@@ -167,4 +167,4 @@ You can set the rating value by using the [Value](https://help.syncfusion.com/cr
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %}
\ No newline at end of file
diff --git a/blazor/rating/labels.md b/blazor/rating/labels.md
index bdc8fbc795..d49affcaa4 100644
--- a/blazor/rating/labels.md
+++ b/blazor/rating/labels.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Labels in Blazor Rating Component
 
-You can use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowLabel) property to display a label that shows the current value of the rating. When the `ShowLabel` property is set to `true`, a label will be displayed.
+Use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowLabel) property to display a label that shows the current rating value. By default, `ShowLabel` is `false`. When set to `true`, the label is rendered.
 
 ```cshtml
 
@@ -19,18 +19,18 @@ You can use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
 
 ```
 
-![Blazor Rating Component with Label](./images/blazor-rating-label.png)
+![Blazor Rating component with Label](./images/blazor-rating-label.png)
 
 ## Label position
 
-The Rating component allows you to place the label on the top, bottom, left, or right side of the rating using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelPosition) property. 
+Control where the label appears using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelPosition) property. The default position is `Right`. In right-to-left layouts, left and right positions follow RTL direction.
 
 The following label positions are supported:
 
-* Top: The label is placed on the top of the rating.
-* Bottom: The label is placed on the bottom of the rating.
-* Left: The label is placed on the left side of the rating.
-* Right: The label is placed on the right side of the rating.
+* Top: The label appears above the rating.
+* Bottom: The label appears below the rating.
+* Left: The label appears on the left side of the rating.
+* Right: The label appears on the right side of the rating.
 
 ```cshtml
 
@@ -50,12 +50,12 @@ The following label positions are supported:
 
 ```
 
-![Blazor Rating Component with different label positions](./images/blazor-rating-label-positions.png)
+![Blazor Rating component with different label positions](./images/blazor-rating-label-positions.png)
 
 
 ## Label template
 
-You can use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelTemplate) tag directive to specify a custom template for the `Label` of the rating. The current value of the rating will be passed as the `context` when building the content of the label. This allows you to include dynamic information about the rating in the template.
+Use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_LabelTemplate) tag directive to provide custom content for the label. The current rating value (passed as the `context`, a double) is available when building the label content. When a template is provided and `ShowLabel` is `true`, the template replaces the default label.
 
 ```cshtml
 
@@ -67,4 +67,4 @@ You can use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion
 
 ```
 
-![Blazor Rating Component with Label template](./images/blazor-rating-label-template.png)
\ No newline at end of file
+![Blazor Rating component with Label template](./images/blazor-rating-label-template.png)
\ No newline at end of file
diff --git a/blazor/rating/precision-modes.md b/blazor/rating/precision-modes.md
index db4a24f894..6d416957e3 100644
--- a/blazor/rating/precision-modes.md
+++ b/blazor/rating/precision-modes.md
@@ -9,14 +9,14 @@ documentation: ug
 
 # Precision Modes in Blazor Rating Component
 
-You can use the [Precision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Precision) property of the Blazor Rating component to provide ratings with varying levels of precision.
+Use the [Precision](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Precision) property of the Blazor Rating component to control how finely users can select values. The default precision is `Full`. Interaction by mouse and keyboard follows the selected precision step.
 
-The precision types of Rating are as follows:
+The Blazor Rating component supports the following precision modes:
 
-* Full: The rating is increased in whole number increments. For example, if the current rating is 2, the next possible ratings are 3, 4, and so on.
-* Half: The rating is increased in increments of 0.5 (half). For example, if the current rating is 2.5, the next possible ratings are 3, 3.5, 4, and so on. 
-* Quarter: The rating is increased in increments of 0.25 (quarter). For example, if the current rating is 3.75, the next possible ratings are 4, 4.25, 4.5, and so on. 
-* Exact: The rating is increased in increments of 0.1. For example, if the current rating is 3.9, the next possible ratings are 4, 4.1, 4.2, and so on.
+* Full: Increases in whole-number steps (1.0). For example, from 2 the next possible ratings include 3, 4, and so on.
+* Half: Increases in 0.5 steps. For example, from 2.5 the next possible ratings include 3, 3.5, 4, and so on.
+* Quarter: Increases in 0.25 steps. For example, from 3.75 the next possible ratings include 4, 4.25, 4.5, and so on.
+* Exact: Increases in 0.1 steps. For example, from 3.9 the next possible ratings include 4, 4.1, 4.2, and so on.
 
 ```cshtml
 
@@ -36,4 +36,4 @@ The precision types of Rating are as follows:
 
 ```
 
-![Blazor Rating Component with different Precision Types](./images/blazor-rating-precision-types.png)
\ No newline at end of file
+![Blazor Rating component with different Precision Types](./images/blazor-rating-precision-types.png)
\ No newline at end of file
diff --git a/blazor/rating/selection.md b/blazor/rating/selection.md
index 3326f055b2..5d8ce8e476 100644
--- a/blazor/rating/selection.md
+++ b/blazor/rating/selection.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Selection in Blazor Rating Component
 
-The Blazor Rating component allows users to rate something using a visual scale, and the selection state can be changed by the user clicking or tapping on the stars in the rating scale or through code. The Rating component has a minimum value and a reset button, and provides customization options for the selected rating value and selection behavior.
+The Blazor Rating component lets users choose a value using a visual scale. Selection can be changed by clicking or tapping the icons, or programmatically. Key options include the current value, minimum value, single-selection behavior, and an optional reset button.
 
 
 ```cshtml
@@ -20,11 +20,11 @@ The Blazor Rating component allows users to rate something using a visual scale,
 
 ```
 
-![Blazor Rating Component with Selction](./images/blazor-rating-selection.png)
+![Blazor Rating component with selection](./images/blazor-rating-selection.png)
 
 ## Selected value
 
-You can use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property of the Blazor Rating component to determine the currently selected rating value and update it using two-way binding or by setting the value programmatically. The current rating value can also be used to identify the selected items.
+Use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Value) property to get or set the currently selected rating. The value is a double and can be updated with two-way binding or by setting it programmatically. The selected value determines which items are rendered as selected and respects the configured precision, minimum, and item count.
 
 ```cshtml
 
@@ -43,7 +43,7 @@ Rated Value : @value
 
 ## Min value
 
-You can use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Min) property of the Blazor Rating component to set the minimum possible rating value the user can select. If you set the `Min` property to 2, then you will not be able to select a rating lower than 2.
+Use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Min) property to set the lowest selectable rating. For example, if `Min` is 2, selecting a value lower than 2 is not permitted. If the current `Value` is below `Min`, it snaps to the minimum.
 
 ```cshtml
 
@@ -53,11 +53,11 @@ You can use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.In
 
 ```
 
-![Blazor Rating Component with Minimum Value](./images/blazor-rating-min.png)
+![Blazor Rating component with a minimum value enforced](./images/blazor-rating-min.png)
 
 ## Single selection
 
-You can use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EnableSingleSelection) property of the Blazor Rating component to select only one item at a time. When the `EnableSingleSelection` property is set to `true`, only the selected item will be considered to be in the selected state, while all other items will be unselected.
+Use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EnableSingleSelection) property to visually select only one item at a time. When set to `true`, only the chosen item appears selected while the others appear unselected. The `Value` still reflects the selected item index according to the configured precision.
 
 ```cshtml
 
@@ -67,11 +67,11 @@ You can use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Sy
 
 ```
 
-![Blazor Rating Component with Single Selection](./images/blazor-rating-single-selection.png)
+![Blazor Rating component with single-selection](./images/blazor-rating-single-selection.png)
 
 ## Show or hide reset button
 
-You can reset the rating value to its default by using the [AllowReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_AllowReset) property of the Blazor Rating component. When the `AllowReset` property is set to `true`, a reset button will be shown that allows the user to reset the rating value to its default.
+Use the [AllowReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_AllowReset) property to display a reset button. When `AllowReset` is `true`, a reset control appears that resets the rating to the `Min` value. By default, `AllowReset` is `false`.
 
 ```cshtml
 
@@ -81,4 +81,4 @@ You can reset the rating value to its default by using the [AllowReset](https://
 
 ```
 
-![Blazor Rating Component with Reset button](./images/blazor-rating-allow-reset.png)
\ No newline at end of file
+![Blazor Rating component with reset button](./images/blazor-rating-allow-reset.png)
\ No newline at end of file
diff --git a/blazor/rating/templates.md b/blazor/rating/templates.md
index 513baa65f2..3c092ab34b 100644
--- a/blazor/rating/templates.md
+++ b/blazor/rating/templates.md
@@ -9,18 +9,16 @@ documentation: ug
 
 # Templates in Blazor Rating Component
 
-The Blazor Rating component allows you to customize the appearance of the rating items using templates. You can use templates to specify a custom layout for the rating items, which can include any content you want. This allows you to create a more customized and interactive rating experience for the user.
+The Blazor Rating component supports templates to customize the appearance of rating items. Templates let you define custom content for items to create tailored and interactive experiences.
 
-The rating component supports below templates for item customization.
+The rating component supports the following templates for item customization:
 
-* [EmptyTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EmptyTemplate)
-* [FullTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_FullTemplate)
+* [EmptyTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_EmptyTemplate): Template applied to unrated items.
+* [FullTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_FullTemplate): Template applied to rated items.
 
 ## Empty (unrated) symbol template
 
-To customize the appearance of **unrated** items, you can use the `EmptyTemplate` tag directive. It allows you to specify the desired custom content for the unrated items.
-The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingItemContext.html) is passed as a `context` to the template, allowing it to access information about the un-rated item, such as its `Value` and `Index`.
-If the `FullTemplate` is not defined, the `EmptyTemplate` will be used as the default for both rated and unrated items. You can apply custom styles to differentiate between the rated and unrated states of the items.
+Use the `EmptyTemplate` tag directive to customize the appearance of unrated items. The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingItemContext.html) is passed as the `context` to the template and provides information such as the item `Value` and `Index`. If `FullTemplate` is not defined, `EmptyTemplate` is used for both rated and unrated items; custom styles can differentiate the states for visual clarity.
 
 ```cshtml
 
@@ -71,9 +69,9 @@ If the `FullTemplate` is not defined, the `EmptyTemplate` will be used as the de
 
 ```
 
-![Blazor Rating Component with EmptyTemplate](./images/blazor-rating-empty-template.png)
+![Blazor Rating component with EmptyTemplate](./images/blazor-rating-empty-template.png)
 
-N> The current value of the rating item available in the template context (`RatingItemContext`)  as `Value` and in the rating item element as CSS Variable (`--rating-value`) can be used to support precision in templates.
+N> The current value of the rating item is available in the template context (`RatingItemContext`) as `Value` and `Index`. The rating item element also exposes a CSS custom property (`--rating-value`) representing the filled portion, which can be used to support precision in templates.
 
 ## Full (rated) symbol template
 
@@ -131,11 +129,11 @@ The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
-![Blazor Rating Component with FullTemplate](./images/blazor-rating-full-template.png)
+![Blazor Rating component with FullTemplate](./images/blazor-rating-full-template.png)
 
 ## Using Emoji icon as rating symbol
 
-You can use emojis of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` tag directive.
+Use emoji as rating symbols by placing them as template content within the `EmptyTemplate` tag directive. This approach works well with single selection and animations disabled for a clean experience.
 
 ```cshtml
 
@@ -177,11 +175,11 @@ You can use emojis of your choice as rating symbol by specifying them as templat
 
 ```
 
-![Blazor Rating Component with Emoji Icon](./images/blazor-rating-emoji-icon.png)
+![Blazor Rating component with Emoji icon](./images/blazor-rating-emoji-icon.png)
 
 ## Using SVG icon as rating symbol
 
-You can use SVG icons of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives.
+Use SVG icons as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. Gradients can be applied per item using unique IDs derived from the item index.
 
 ```cshtml
 
@@ -245,11 +243,11 @@ You can use SVG icons of your choice as rating symbol by specifying them as temp
 
 ```
 
-![Blazor Rating Component with SVG Icon](./images/blazor-rating-svg-icon.png)
+![Blazor Rating component with SVG icon](./images/blazor-rating-svg-icon.png)
 
 ## Using PNG image as rating symbol
 
-You can use PNG images of your choice as rating symbol by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives.
+Use PNG images as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives.
 
 ```cshtml
 
@@ -271,4 +269,4 @@ You can use PNG images of your choice as rating symbol by specifying them as tem
 
 ```
 
-![Blazor Rating Component with PNG Icon](./images/blazor-rating-png.png)
\ No newline at end of file
+![Blazor Rating component with PNG icon](./images/blazor-rating-png.png)
\ No newline at end of file
diff --git a/blazor/rating/tooltip.md b/blazor/rating/tooltip.md
index d1997fd3a6..c830f22f18 100644
--- a/blazor/rating/tooltip.md
+++ b/blazor/rating/tooltip.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Tooltip in Blazor Rating Component
 
-The Blazor rating component supports tooltip to show additional information in rating items by setting the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowTooltip) property. If enabled, the tooltip appears when the user hovers over a rating item.
+The Blazor Rating component supports tooltips that display additional information for rating items by enabling the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ShowTooltip) property. When enabled (default is `false`), a tooltip appears when the user hovers over a rating item.
 
 ```cshtml
 
@@ -19,11 +19,11 @@ The Blazor rating component supports tooltip to show additional information in r
 
 ```
 
-![Blazor Rating Component with Tooltip](./images/blazor-rating-tooltip.png)
+![Blazor Rating component with tooltip](./images/blazor-rating-tooltip.png)
 
 ## Tooltip template
 
-You can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_TooltipTemplate) tag directive to specify a custom template for the `Tooltip` of the rating. The current value of the rating will be passed as the `context` when building the content of the tooltip. This allows you to include dynamic information about the rating in the template.
+Use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_TooltipTemplate) tag directive to define custom content for the tooltip. The current item’s value is passed to the template as the `context` (a double), allowing dynamic tooltip content based on the hovered item.
 
 ```cshtml
 
@@ -37,13 +37,13 @@ You can use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusi
 
 ```
 
-![Blazor Rating Component with Tooltip Template](./images/blazor-rating-tooltip-template.png)
+![Blazor Rating component with tooltip template](./images/blazor-rating-tooltip-template.png)
 
 ## Tooltip customization
 
-You can customize the appearance of the tooltips using the `CssClass` property of the Blazor Rating component and by defining the custom styles for tooltip elements like the below example.
+Customize the appearance of tooltips by assigning a custom CSS class using the `CssClass` property on the Blazor Rating component and writing styles scoped to that class. The class is applied to the component’s root element, which lets you target the nested tooltip elements without affecting other tooltips.
 
-N> You can find more information about customizing the appearance of the tooltip in the [Tooltip Customization](https://blazor.syncfusion.com/documentation/tooltip/style) documentation.
+N> For more details on styling options, refer to the [tooltip customization](https://blazor.syncfusion.com/documentation/tooltip/style) documentation. For accessibility, ensure tooltip text is concise, meaningful, and readable. Tooltips should supplement visible information.
 
 ```cshtml
 
@@ -82,4 +82,4 @@ N> You can find more information about customizing the appearance of the tooltip
 
 ```
 
-![Blazor Rating Component with Tooltip Customization](./images/blazor-rating-custom-tooltip.png)
\ No newline at end of file
+![Blazor Rating component with tooltip customization](./images/blazor-rating-custom-tooltip.png)
\ No newline at end of file
diff --git a/blazor/ribbon/keytip.md b/blazor/ribbon/keytip.md
index 96f187a25c..566ebb4ac9 100644
--- a/blazor/ribbon/keytip.md
+++ b/blazor/ribbon/keytip.md
@@ -666,4 +666,4 @@ Before adding keytips to Ribbon items, follow these best practices:
 
 * Do not use the same first letter for single- and multi-character keytips on different items.
 
-> When using multi-character keytips (for example, `F`, `FP`, and `FPF`) for different items, pressing `F` activates only the first-level keytip (`F`), and `FP` and `FPF` are ignored.
\ No newline at end of file
+> When using multi-character keytips (for example, `F`, `FP`, and `FPF`) for different items, pressing `F` activates only the first-level keytip (`F`), and `FP` and `FPF` are ignored.
diff --git a/blazor/rich-text-editor/getting-started-webapp.md b/blazor/rich-text-editor/getting-started-webapp.md
index 921891040f..212d2c2af8 100644
--- a/blazor/rich-text-editor/getting-started-webapp.md
+++ b/blazor/rich-text-editor/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Rich Text Editor in Blazor Web App
 
-This section explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section explains how to add the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
 
 > **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
 
@@ -23,9 +23,9 @@ This section explains how to add the [Blazor Rich Text Editor](https://www.syncf
 
 ## Create a new Blazor Web App in Visual Studio
 
-Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
-Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the Blazor Web App.
+Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App.
 
 ![Create Blazor Web App](images/blazor-create-web-app.png)
 
@@ -33,9 +33,9 @@ Configure the appropriate [Interactive render mode](https://learn.microsoft.com/
 
 To add the **Blazor Rich Text Editor** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
-Alternatively, use the following Package Manager commands:
+Alternatively, run the following commands in the Package Manager Console.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -58,9 +58,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-Create a **Blazor Web App** using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
-Configure the appropriate interactive render mode and interactivity location when setting up the Blazor Web App. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands.
 
@@ -76,7 +76,7 @@ cd BlazorWebApp.Client
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the App
 
-If the app uses `WebAssembly` or `Auto` render modes, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
+If using the `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure the current directory contains your `.csproj` file.
@@ -102,7 +102,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Install the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in your terminal or command prompt:
+Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -116,9 +116,9 @@ dotnet --version
 
 Run the following command to create a new Blazor Web App. For detailed instructions, refer to [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
 
-Configure the appropriate interactive render mode and interactivity location when setting up the project. For details, see the [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode) documentation.
+Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, to create a Blazor Web App with the `Auto` interactive render mode, run:
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -130,13 +130,13 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-This command creates a new Blazor Web App in a directory named `BlazorApp` at the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) for more details.
+This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor and Themes NuGet in the App
 
-Use the following commands to add the **Blazor Rich Text Editor** component to the application by installing [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. For details, see [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli).
+Here's an example of how to add **Blazor Rich Text Editor** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
-If the app uses the `WebAssembly` or `Auto` render mode, install the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
+If using the `WebAssembly or Auto` render modes in the Blazor Web App, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component NuGet packages in the client project.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -171,7 +171,7 @@ Open the **~/_Imports.razor** file in the client project and import the `Syncfus
 
 Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Web App.
 
-If the app uses `WebAssembly` or `Auto` interactive render modes, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -259,7 +259,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Rich Text Editor component in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhfZMqXAUqtaOyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rich Text Editor Component](./images/blazor-richtexteditor.png)" %}
 
diff --git a/blazor/rich-text-editor/mail-merge.md b/blazor/rich-text-editor/mail-merge.md
index 55b9c1e9ba..5714b8eeff 100644
--- a/blazor/rich-text-editor/mail-merge.md
+++ b/blazor/rich-text-editor/mail-merge.md
@@ -7,11 +7,11 @@ control: RichTextEditor
 documentation: ug
 ---
 
-# Mail Merge in Blazor Rich Text Editor
+# Mail merge in Blazor Rich Text Editor Control
 
-The Mail Merge feature in Blazor Rich Text Editor enables developers to create dynamic, personalized documents by inserting placeholders (merge fields) into the editor content. These placeholders are later replaced with actual data at runtime, making it ideal for generating letters, invoices, and bulk communication templates.
+The Mail merge feature in Blazor Rich Text Editor enables developers to create dynamic, personalized documents by inserting placeholders (merge fields) into the editor content. These placeholders are later replaced with actual data at runtime, making it ideal for generating letters, invoices, and bulk communication templates.
 
-## Rendering Custom Toolbar Items
+## Rendering custom toolbar items
 
 Custom toolbar items are added using the [RichTextEditorCustomToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorCustomToolbarItems.html) tag. Each item is defined with:
 
@@ -46,11 +46,11 @@ Custom toolbar items are added using the [RichTextEditorCustomToolbarItems](http
 {% endhighlight %}
 {% endtabs %}
 
-## Populating and Using Insert Field Dropdown
+## Populating and using insert field dropdown
 
 The `Insert Field` dropdown in the Rich Text Editor is designed to let users quickly insert predefined merge fields into the editor content. This dropdown is powered by the `SfDropDownButton` control, which uses its [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_Items) property to bind a collection of menu items.
 
-### How the Items Property Works
+### How the items property works
 
 - The `Items` property accepts a list of [DropDownMenuItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html) objects.
 - Each item in this list represents a merge field and contains a [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Text) property, which is displayed in the dropdown.
@@ -92,20 +92,22 @@ When the user selects an item from the dropdown:
 - The snippet is inserted at the current cursor position using [ExecuteCommandAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_ExecuteCommandAsync_Syncfusion_Blazor_RichTextEditor_CommandName_System_String_Syncfusion_Blazor_RichTextEditor_ExecuteCommandOption_).
 
 ```csharp
+ {% raw %}
     public async Task OnItemSelect(MenuEventArgs args)
     {
         if (args.Item.Text != null)
         {
             var value = _mergeData.FirstOrDefault(md => md.Text == args.Item.Text)?.Value;
-            string htmlContent = $"<span contenteditable=\"false\" class=\"e-mention-chip\"><span>{{{{{value}}}}}</span></span> ";
+           string htmlContent = $"<span contenteditable=\"false\" class=\"e-mention-chip\"><span>{{{{{value}}}}}</span></span>";
             var undoOption = new ExecuteCommandOption { Undo = true };
             this._mailMergeEditor.ExecuteCommandAsync(CommandName.InsertHTML, htmlContent, undoOption);
             await this._mailMergeEditor.SaveSelectionAsync();
         }
     }
+ {% endraw %}
 ```
 
-## Role of Mention Control in Mail Merge
+## Role of Mention control in mail merge
 
 Mention control enhances usability by enabling inline field suggestions:
 
@@ -118,7 +120,9 @@ Mention control enhances usability by enabling inline field suggestions:
 
 <SfMention DataSource="_mergeData" TItem="MergeData" Target="#_mailMergeEditor" MentionChar="_mentionChar" AllowSpaces="true" PopupWidth='250px' PopupHeight='200px' @ref="mentionObj">
     <DisplayTemplate>
-        <span>{{@((context as MergeData).Value)}}</span>
+        {% raw %}
+        <span>@((context as MergeData).Value)</span>
+        {% endraw %}
     </DisplayTemplate>
     <ChildContent>
         <MentionFieldSettings Text="Text"></MentionFieldSettings>
@@ -130,7 +134,7 @@ Mention control enhances usability by enabling inline field suggestions:
 
 This feature is ideal for users who prefer keyboard-driven workflows.
 
-## Maintaining Cursor Position During Dropdown Operations
+## Maintaining cursor position during dropdown operations
 
 When the `Insert Field` dropdown opens, the editor loses its current selection because focus shifts to the popup. To ensure the placeholder is inserted at the correct position:
 
@@ -156,7 +160,7 @@ When the `Insert Field` dropdown opens, the editor loses its current selection b
     }
 ```
 
-## Handling Editor Mode Changes with OnActionComplete
+## Handling editor mode changes with OnActionComplete
 
 The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnActionComplete) event fires after specific actions in the RichTextEditor, such as switching between Source Code and Preview modes.
 
@@ -183,7 +187,7 @@ The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.R
 
 **Why is this important?** This prevents users from triggering merge operations or inserting fields while editing raw HTML, which could cause unexpected behavior.
 
-## Executing Merge Data Action
+## Executing merge data action
 
 When the `Merge Data` button is clicked:
 
@@ -192,7 +196,7 @@ When the `Merge Data` button is clicked:
 - Each placeholder is replaced with its corresponding value from a dictionary.
 
 ```csharp
-
+{% raw %}
     public void OnClickHandler()
     {
         if (this._mailMergeEditor != null)
@@ -202,7 +206,8 @@ When the `Merge Data` button is clicked:
             _rteValue = mergedContent;
         }
     }
-     public static string ReplacePlaceholders(string template, Dictionary<string, string> data)
+
+    public static string ReplacePlaceholders(string template, Dictionary<string, string> data)
     {
         return Regex.Replace(template, @"{{\s*(\w+)\s*}}", match =>
         {
@@ -210,7 +215,7 @@ When the `Merge Data` button is clicked:
             return data.TryGetValue(key, out var value) ? value : match.Value;
         });
     }
-
+{% endraw %}
 ```
 This ensures all placeholders are dynamically replaced without manual editing.
 
@@ -222,6 +227,6 @@ This ensures all placeholders are dynamically replaced without manual editing.
 
 ![Blazor RichTextEditor Mail Merge](./images/blazor-richtexteditor-mail-merge.png)
 
-## Related Resources
+## Related resources
 
-[Mention Control Guide](https://blazor.syncfusion.com/documentation/mention/getting-started-webapp)
\ No newline at end of file
+[Mention Control Guide](https://blazor.syncfusion.com/documentation/mention/getting-started-webapp)
diff --git a/blazor/rich-text-editor/code-snippet/nesting-table.razor b/blazor/rich-text-editor/tools/code-snippet/nesting-table.razor
similarity index 100%
rename from blazor/rich-text-editor/code-snippet/nesting-table.razor
rename to blazor/rich-text-editor/tools/code-snippet/nesting-table.razor
diff --git a/blazor/sankey/customization.md b/blazor/sankey/customization.md
index a7700128ab..40deab20fa 100644
--- a/blazor/sankey/customization.md
+++ b/blazor/sankey/customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Customization for Blazor Sankey Diagram | Syncfusion
-description: Explore various customization options available for enhancing the Blazor Sankey Diagram with background style, layout, and orientation configuration.
+description: Explore various customization options available for enhancing the Syncfusion Blazor Sankey Diagram with background style, layout, and orientation configuration.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Blazor Sankey Diagram: Customization
 
-The Blazor Sankey Diagram offers extensive customization options to tailor its appearance and behavior to your specific needs.  This guide covers customizing the background, dimensions, orientation, and right-to-left (RTL) support.
+The Blazor Sankey Diagram includes extensive options to tailor appearance and behavior. This guide covers background styling, dimensions, right-to-left (RTL) layout, and orientation.
 
 ## Setting Background
 
-You can customize the background of the Sankey Diagram using the `BackgroundColor` and `BackgroundImage` properties. The `BackgroundColor` property allows you to set a solid background color for the chart.  You can use any valid CSS color string, including hex codes, named colors, and RGB/RGBA values. The `BackgroundImage` property lets you set a background image for the sankey diagram. Specify the URL or path to the image file.
+Customize the diagram background using `BackgroundColor` and `BackgroundImage`. `BackgroundColor` accepts any valid CSS color (hex, named color, rgb/rgba). `BackgroundImage` applies an image by specifying its URL or file path.
 
 {% tabs %}
 {% highlight razor %}
@@ -27,6 +27,7 @@ You can customize the background of the Sankey Diagram using the `BackgroundColo
     <SankeyLabelSettings Color="#FFFFFF" FontWeight="400" ></SankeyLabelSettings>
     <SankeyLegendSettings Visible="false"></SankeyLegendSettings>
 </SfSankey>
+
 @code {
     string _backgroundColor = "#0b1320";
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
@@ -110,7 +111,7 @@ You can customize the background of the Sankey Diagram using the `BackgroundColo
 
 ## Dimensions (Width and Height)
 
-Control the sankey diagram's dimensions using the `Width` and `Height` properties. You can specify values in pixels or percentages.
+Control diagram size using `Width` and `Height`. Values can be specified in pixels or percentages.
 
 {% tabs %}
 {% highlight razor %}
@@ -120,6 +121,7 @@ Control the sankey diagram's dimensions using the `Width` and `Height` propertie
 
 <SfSankey Width="@_width" Height="@_height" Nodes=@Nodes Links=@Links>
 </SfSankey>
+
 @code {
     string _width = "800px";
     string _height = "450px";
@@ -190,15 +192,15 @@ Control the sankey diagram's dimensions using the `Width` and `Height` propertie
 
 ## Right-to-Left (RTL) Support
 
-The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) languages. To enable RTL support, simply set the `EnableRTL` property to `true`. This will flip the entire layout of the Sankey diagram, including nodes, links, and any associated labels or legends.
+Enable RTL by setting `EnableRTL` to `true`. The entire layout—including nodes, links, labels, and legend—adapts to right‑to‑left flow.
 
-**When you enable RTL support**
+**Effects of enabling RTL**
 
-1. **Node Order**: The order of nodes will be reversed, with the first node appearing on the right side of the diagram.
-2. **Link Direction**: Links between nodes will flow from right to left.
-3. **Labels**: Node and link labels will be aligned to support RTL reading.
-4. **Tooltips**: If enabled, tooltips will be positioned appropriately for RTL layout.
-5. **Legend**: If a legend is present, its layout and order will also be reversed.
+1. Node order is reversed, placing the first node on the right.
+2. Link direction flows right‑to‑left.
+3. Labels align for RTL reading.
+4. Tooltips, if enabled, position appropriately for RTL.
+5. Legend layout and order are mirrored.
 
 {% tabs %}
 {% highlight razor %}
@@ -208,6 +210,7 @@ The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) langua
 
 <SfSankey Nodes=@Nodes Links=@Links EnableRTL="true">
 </SfSankey>
+
 @code {
     string _width = "800px";
     string _height = "450px";
@@ -277,37 +280,24 @@ The Blazor Sankey diagram offers built-in support for Right-to-Left (RTL) langua
 
 ## Orientation
 
-The `Orientation` property controls the flow direction of the Sankey Diagram. You can set it to `Horizontal` or `Vertical`. The default `Auto` setting automatically chooses the best orientation based on the sankey diagram's aspect ratio. Setting the orientation to vertical can be particularly useful for certain types of data or when you want to emphasize the top-down flow of information.
-
-**When you switch the Sankey Diagram to vertical orientation, several aspects of the Sankey Diagram change:**
-
-1. **Node Placement**: Nodes are arranged vertically from top to bottom, instead of left to right.
+Control the flow direction using the `Orientation` property. Values include `Horizontal`, `Vertical`, and `Auto` (default). Vertical orientation can be effective for tall layouts or to emphasize top‑down relationships.
 
-2. **Link Direction**: Links flow downward, connecting nodes from top to bottom.
+**Changes in vertical orientation**
 
-3. **Label Positioning**: 
-   - Node labels are typically positioned to the right of each node.
-   - Link labels, if enabled, are oriented to align with the vertical flow.
-
-4. **Space Utilization**: 
-   - Vertical orientation often allows for better use of space when dealing with many nodes or long node labels.
-   - It can be particularly effective for tall, narrow layouts.
-
-5. **Data Interpretation**: 
-   - The top-down flow can imply a hierarchical or sequential relationship between nodes.
-   - It may be more intuitive for certain types of data, such as organizational charts or process flows.
-
-6. **Responsiveness**: 
-   - Vertical layouts can sometimes be more responsive on mobile devices or narrow screen widths.
-
-7. **Scrolling Behavior**: 
-   - For large diagrams, users will scroll vertically instead of horizontally, which can be more natural on most devices.
+1. Nodes are arranged from top to bottom.
+2. Links flow downward between nodes.
+3. Labels align with the vertical flow (node labels typically to the right).
+4. Space can be used more efficiently for many nodes or longer labels.
+5. A top‑down arrangement can imply hierarchical or sequential relationships.
+6. Vertical layouts can be more responsive on narrow screens.
+7. Large diagrams scroll vertically instead of horizontally.
 
 {% tabs %}
 {% highlight razor %}
 
 <SfSankey Width="@_width" Height="@_height" Nodes=@Nodes Links=@Links Orientation="SankeyOrientation.Vertical">
 </SfSankey>
+
 @code {
     string _width = "650px";
     string _height = "650px";
@@ -378,10 +368,10 @@ The `Orientation` property controls the flow direction of the Sankey Diagram. Yo
 
 ## Key Points
 
-* Combining background customizations can create visually appealing charts.
-* Using percentage values for `Width` and `Height` makes the chart responsive to different screen sizes.
-* `EnableRTL` is crucial for supporting right-to-left languages.
-* `Orientation` determines the layout direction of the sankey diagram, either horizontal or vertical.
+* Background color and image can be combined for richer visuals.
+* Percentage values for `Width` and `Height` support responsive layouts.
+* `EnableRTL` provides right‑to‑left language support.
+* `Orientation` determines horizontal or vertical layout.
 
 ## See also
 
diff --git a/blazor/sankey/data-binding.md b/blazor/sankey/data-binding.md
index 7cfc004307..6524a63479 100644
--- a/blazor/sankey/data-binding.md
+++ b/blazor/sankey/data-binding.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Data Binding for Blazor Sankey Diagram | Syncfusion
-description: Checkout and learn about data binding with Blazor Sankey Diagram and how to implement it effectively.
+description: Learn how to bind nodes and links to the Syncfusion Blazor Sankey Diagram, including data models, REST API binding and JSON response format.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -9,35 +9,35 @@ documentation: ug
 
 # Data Binding in the Blazor Sankey Diagram
 
-The Blazor Sankey Diagram is designed to visualize relationships and flows between categories using nodes and links. Data binding allows you to easily provide the necessary information for the sankey diagram to render effectively. Below, we explore how to bind data to the sankey diagram in Blazor.
+The Blazor Sankey Diagram visualizes relationships and flows between categories using nodes and links. Data binding supplies the node and link information required to render the diagram effectively.
 
 ## Overview of Data Binding
 
 The Sankey Diagram accepts data for:
 
-1. **Nodes**: Represent entities or categories in the flow.
-2. **Links**: Represent the connections and their magnitude between the nodes.
+1. **Nodes**: Entities or categories in the flow.
+2. **Links**: Connections between nodes, including the magnitude of each flow.
 
-The data can be bound using collections of objects that define the properties of nodes and links. The component dynamically generates the diagram based on this data.
+Bind data using collections of objects that define node and link properties. The component generates the diagram based on this data.
 
 ## Understanding Data Models
-The Blazor Sankey Diagram uses predefined data models for nodes and links. These models are already available in the `Syncfusion.Blazor.Sankey` namespace. Here's an overview of their key properties:
+The Blazor Sankey Diagram uses predefined data models for nodes and links available in the `Syncfusion.Blazor.Sankey` namespace. Key properties include:
 
 ### SankeyDataNode
-- `Id`: A string property that serves as a unique identifier for the node.
-- `Label`: An object of type `SankeyDataLabel` that can be used to customize the node's label.
+- `Id`: Unique identifier for the node.
+- `Label`: An instance of `SankeyDataLabel` to customize the node label.
 
 ### SankeyDataLink
-- `SourceId`: A string property identifying the source node of the link.
-- `TargetId`: A string property identifying the target node of the link.
-- `Value`: A double property representing the weight or magnitude of the connection.
+- `SourceId`: Identifier of the source node.
+- `TargetId`: Identifier of the target node.
+- `Value`: Weight or magnitude of the connection.
 
-There's no need to define these classes yourself as they are provided by the Syncfusion<sup style="font-size:70%">&reg;</sup> library.
+These types are provided by the Syncfusion<sup style="font-size:70%">&reg;</sup> library; custom class definitions are not required.
 
 ## Binding Data to the Sankey Diagram
-To use the Sankey Diagram, you need to create collections of `SankeyDataNode` and `SankeyDataLink` objects and bind them to the component. Here's how you can do this.
+Create collections of `SankeyDataNode` and `SankeyDataLink` and assign them to the component.
 
-Below is an example of how to bind data to the Sankey Diagram in a Blazor application:
+Below is an example of binding data to the Sankey Diagram in a Blazor application:
 
 {% tabs %}
 {% highlight razor %}
@@ -61,7 +61,7 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
             new SankeyDataNode() { Id = "Green Coffee" },
             new SankeyDataNode() { Id = "North America" },
             new SankeyDataNode() { Id = "Europe" },
-            new SankeyDataNode() { Id = "Asia Pacific" },
+            new SankeyDataNode() { Id = "Asia Pacific" }
         };
         Links = new List<SankeyDataLink>()
         {
@@ -81,7 +81,7 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
             new SankeyDataLink() { SourceId = "Instant Coffee", TargetId = "Asia Pacific", Value = 15 },
             new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "North America", Value = 10 },
             new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Europe", Value = 8 },
-            new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Asia Pacific", Value = 7 },
+            new SankeyDataLink() { SourceId = "Green Coffee", TargetId = "Asia Pacific", Value = 7 }
         };
         base.OnInitialized();
     }
@@ -94,16 +94,16 @@ Below is an example of how to bind data to the Sankey Diagram in a Blazor applic
 
 ### Key Points
 
-- The `Nodes` parameter expects a collection of `SankeyDataNode` objects.
-- The `Links` parameter expects a collection of `SankeyDataLink` objects.
-- Ensure that `SourceId` and `TargetId` in `SankeyDataLink` match the `Id` values in `SankeyDataNode`.
+- `Nodes` expects a collection of `SankeyDataNode` objects.
+- `Links` expects a collection of `SankeyDataLink` objects.
+- `SourceId` and `TargetId` values in `SankeyDataLink` must match the corresponding `Id` values in `SankeyDataNode`.
 
 ## Advanced Binding Scenarios
 
-You can bind data from various sources such as:
-- REST APIs: Fetch data dynamically using HTTP requests.
-- Databases: Load data using Entity Framework or similar ORM tools.
-- JSON Files: Deserialize JSON data into the node and link models.
+Data can be sourced from:
+- REST APIs: Fetch data dynamically via HTTP requests.
+- Databases: Load data using Entity Framework or another ORM.
+- JSON files: Deserialize JSON into node and link models.
 
 ### Example: Binding Data from a REST API
 
@@ -138,7 +138,7 @@ You can bind data from various sources such as:
 
 
 ### Updated REST API Example
-Ensure that your API endpoint provides a JSON response in the following format:
+The API endpoint should return a JSON response in the following format:
 
 {% tabs %}
 {% highlight json %}
@@ -164,4 +164,4 @@ Ensure that your API endpoint provides a JSON response in the following format:
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/sankey/events.md b/blazor/sankey/events.md
index 57f1eef744..3f93eb2cbb 100644
--- a/blazor/sankey/events.md
+++ b/blazor/sankey/events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Events for Blazor Sankey Component | Syncfusion
-description: Learn about the events supported by the Blazor Sankey component and how to use them for interactivity and customization.
+description: Learn about the events supported by the Syncfusion Blazor Sankey component and how to use them for interactivity and customization.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -11,43 +11,43 @@ documentation: ug
 
 ## Overview
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram component supports a comprehensive set of events, allowing developers to craft responsive and interactive features. These events are designed to handle user interactions and essential diagram lifecycle phases, thereby enhancing the functionality and user experience of your Blazor applications.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram component provides a comprehensive set of events to handle user interactions and key lifecycle moments. These events enable responsive behaviors, targeted customization, and coordinated updates across application features.
 
 ## Events
 
 The Sankey Diagram component includes the following events:
 
-1. **NodeRendering**: This event is fired before nodes are drawn on the diagram, allowing for dynamic customization of node appearance based on data or application state. Use this to apply unique visual adjustments and enhance node representation.
+1. **NodeRendering**: Fires before nodes are drawn, enabling dynamic customization of node appearance based on data or state. Apply visual adjustments to emphasize categories or thresholds.
 
-2. **LegendItemRendering**: Fired before legend items are rendered, this event enables modifications such as changing colors or altering text to align with branding needs. It helps ensure the legend matches the application's theme and improves readability.
+2. **LegendItemRendering**: Fires before legend items render, allowing changes to text and colors for branding and readability. Align legend content with application themes.
 
-3. **LabelRendering**: Triggered before labels appear on the diagram, this event allows for modification of label content or formatting. Use it to ensure labels effectively convey essential information in a clear and concise manner.
+3. **LabelRendering**: Triggers before labels appear, supporting modification of label text or formatting. Ensure labels convey essential information clearly.
 
-4. **LinkRendering**: This event fires when links are being rendered, offering opportunities to customize link appearance based on specific properties or conditions. Adjust link visuals to enhance clarity and emphasize relationships between nodes.
+4. **LinkRendering**: Fires during link rendering, allowing conditional styling based on link properties. Modify colors or stroke styles to highlight relationships.
 
-5. **LegendItemHover**: Occurs when a user hovers over a legend item, enabling responsive actions such as triggering UI updates or displaying contextual data. Use this to create interactive and informative legend behaviors.
+5. **LegendItemHover**: Occurs when hovering over a legend item, enabling contextual UI responses or highlighting. Use to reinforce legend-to-visual mapping.
 
-6. **SizeChanged**: Fired when the dimensions of the Sankey Diagram change, this event allows for dynamic layout adjustments. Ensure that connected components and visual elements remain coherent and visually appealing.
+6. **SizeChanged**: Fires when the component size changes, enabling layout recalculations or responsive adjustments.
 
-7. **TooltipRendering**: Triggered before tooltips for nodes and links are rendered, this event lets you customize tooltip content and style. Leverage it to provide clear, context-specific information that enhances user understanding.
+7. **TooltipRendering**: Triggers before tooltips render for nodes and links, allowing customization of content and style. Event arguments may reference either a node or a link.
 
-8. **PrintCompleted**: This event fires after a print operation completes, allowing you to update UI indicators or log the event for tracking and analytics. Use it to ensure follow-up actions are seamlessly handled post-print.
+8. **PrintCompleted**: Fires after printing completes, allowing status updates, logging, or follow-up actions.
 
-9. **ExportCompleted**: Occurs after an export operation finishes, similar to print completion events. Use this event to trigger follow-up tasks like notifications, data processing, or analytics logging.
+9. **ExportCompleted**: Occurs after export completes, useful for notifications, analytics, or post-processing.
 
-10. **Created**: Fired after the Sankey Diagram is fully initialized and rendered, this event is useful for initializing related components or logging the creation process for monitoring and debugging purposes.
+10. **Created**: Fires after the Sankey Diagram is initialized and rendered, suitable for one-time setup of related components.
 
-11. **NodeClick**: This event occurs when a user clicks on a node, enabling actions such as updating UI elements, starting data transactions, or recording analytics. Use it to respond effectively to user interactions with nodes.
+11. **NodeClick**: Occurs on node click, enabling UI updates, navigation, or analytics triggers.
 
-12. **NodeEnter**: Triggered when the mouse pointer enters a node region, this event allows for dynamic highlights or displaying additional information. It enhances interactivity and provides immediate feedback to user actions.
+12. **NodeEnter**: Triggers when the pointer enters a node region, supporting highlight or context display behaviors.
 
-13. **NodeLeave**: Occurs when the mouse pointer leaves a node region, supporting cleanup actions like removing highlights or hiding overlays. Use it to maintain a clean and clutter-free user interface.
+13. **NodeLeave**: Occurs when the pointer leaves a node, enabling cleanup such as removing highlights or overlays.
 
-14. **LinkClick**: Fires when a user clicks on a link within the component. Handle user clicks on links, enabling features like detailed data viewing or reshaping interactions in connected components.
+14. **LinkClick**: Fires on link click, enabling drill-downs, detail views, or coordinated interactions.
 
-15. **LinkEnter**: This event is triggered when the mouse pointer hovers over a link. Implement interactive behaviors when hovering over links, such as emphasizing connections or showing detailed link information.
+15. **LinkEnter**: Triggers on link hover, supporting emphasis and display of additional link details.
 
-16. **LinkLeave**: It occurs when the mouse pointer exits a link. Cleanup actions can be attached to this event when the pointer moves off a link, such as resetting visual styles or removing interactive elements.
+16. **LinkLeave**: Occurs when the pointer exits a link, enabling visual reset or cleanup.
 
 Below is an example demonstrating how to implement some of the key events in the Sankey component:
 
@@ -113,36 +113,37 @@ Below is an example demonstrating how to implement some of the key events in the
         }
     }
 }
+
 {% endhighlight %}
 {% endtabs %}
 
 ## Key Points
 
-- Events are linked to the Sankey component via attributes that correspond with event names.
-- Each event delivers distinct event arguments, offering detailed information relevant to the event.
-- These events facilitate customizing appearance, enhancing behavior, and executing additional actions based on user interactions.
+- Events are attached to the Sankey component using attributes that map to event names.
+- Each event provides specific event arguments with details relevant to the trigger context.
+- Events enable appearance customization, behavioral enhancements, and coordinated actions based on interactions.
 
 ## Customizing with Events
 
 ### LegendItemRendering
 
-This event allows you to adjust the appearance of legend items prior to rendering. You can tailor the visual style, such as colors and labels, to align with the application's design language or thematic consistency. Customization here can enhance visual coherence and aid user interpretation.
+Adjust legend item appearance prior to rendering. Modify colors and labels to match design guidelines and improve readability.
 
 ### NodeClick
 
-Utilize this event to trigger actions in response to user interactions with nodes, offering opportunities to display detailed information, update related UI components, or log interactions for analytic purposes. This event drives engagement by making visual data exploration more interactive and informative.
+Trigger application logic on node interaction, such as updating related UI, revealing details, or recording telemetry.
 
 ### LinkRendering
 
-Adjust the appearance of links for a more customized visualization, based on dynamic conditions such as link weight or status. By modifying visual properties like color or thickness, you can convey additional information through the visual representation of links, aiding user comprehension of complex networks.
+Customize link visuals based on data-driven conditions. Use color or stroke changes to convey weight, status, or categories.
 
 ### TooltipRendering
 
-Modify both the content and appearance of tooltips to deliver tailored real-time information relevant to the user's context. Tooltips can be adapted to reflect current node or link data, thereby enhancing user interaction and understanding through efficient data presentation.
+Tailor tooltip content and styling for nodes and links to deliver concise, context-specific information at hover or focus.
 
 ## Advanced Event Usage
 
-For more complex interactions, multiple events can be combined effectively. Here's an example utilizing several events:
+For complex interactions, combine multiple events effectively. Here's an example utilizing several events:
 
 {% tabs %}
 {% highlight razor %}
@@ -205,21 +206,22 @@ For more complex interactions, multiple events can be combined effectively. Here
 
     // Nodes and Links initialization (initialization code is omitted for brevity)
 }
+
 {% endhighlight %}
 {% endtabs %}
 
 ## Key Considerations
 
-- Employ events to construct interactive and dynamic Sankey diagrams.
-- Leverage multiple events to develop complex user experiences.
-- Refresh the UI using `StateHasChanged()` when altering component state within event handlers.
-- Be mindful of performance trade-offs when dealing with frequent events, such as hover or mouse movement.
-- Utilize the `Created` event for any initial setup tasks post full rendering of the Sankey Diagram.
+- Use events to build interactive and responsive Sankey diagrams.
+- Combine events to orchestrate complex user experiences.
+- Invoke `StateHasChanged()` when updating component state in event handlers.
+- Consider performance for high-frequency events such as hover.
+- Use the `Created` event for initial setup tasks after the diagram is fully rendered.
 
-By leveraging the robust set of events provided by the Blazor Sankey component, developers can produce rich and interactive visualizations that are both responsive to user actions and enhanced in functionality within Blazor applications.
+By leveraging the events provided by the Blazor Sankey component, applications can deliver interactive visualizations that respond to input and support advanced customization.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/sankey/labels.md b/blazor/sankey/labels.md
index 69f0fa670d..d6184f1268 100644
--- a/blazor/sankey/labels.md
+++ b/blazor/sankey/labels.md
@@ -11,11 +11,11 @@ documentation: ug
 
 ## Overview
 
-Labels in a Sankey Diagram are crucial for providing textual information for nodes, thereby enhancing the readability and comprehension of data flows. In the Blazor Sankey Diagram, labels can be configured and customized to meet various design and informational needs, making your diagrams more effective in conveying underlying data structures.
+Labels provide textual context for nodes in a Sankey Diagram, improving readability and understanding of data flows. The Blazor Sankey Diagram supports flexible label configuration and styling to meet design and information needs.
 
 ## Basic Label Configuration
 
-Labels are included within the node configuration and can be tailored using `SankeyLabelSettings`. Below is an example of how to set up labels in the Sankey Diagram:
+Labels are defined within node settings and further customized using `SankeyLabelSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -91,21 +91,21 @@ Labels are included within the node configuration and can be tailored using `San
 {% endhighlight %}
 {% endtabs %}
 
-In this example, labels are defined for each node with specific `SankeyLabelSettings` to determine their visual style. The settings include font color, weight, size, and style, ensuring labels contribute to both functional clarity and aesthetic quality.
+This configuration defines labels for each node and applies `SankeyLabelSettings` for color, weight, size, and style.
 
 ![Blazor Sankey Labels](images/labels/sankey-labels.png)
 
 ## Customizing Label Appearance
 
-Customizing the appearance of labels in the Blazor Sankey Diagram provides an opportunity to enhance the visual clarity and impact of your data visualization. By utilizing various properties within the SankeyLabelSettings, you can tailor labels to align with your application's design aesthetics and functional requirements. These customizations contribute to a more refined and informative diagram, making it easier for users to interpret complex data relationships.
+Customize labels using `SankeyLabelSettings` to improve clarity and alignment with application design.
 
-- **Visible**: Controls whether labels are shown; set to `false` to hide them if diagram space is limited.
-- **FontSize**: Adjusts the font size, accommodating different display sizes or emphasis levels.
-- **Color**: Sets the text color, important for visibility and theme coherence.
-- **FontFamily**: Defines the text font family, which can match the application's overall typography for design consistency.
-- **FontWeight**: Specifies the thickness of the text, like "400" for normal or "700" for bold, enhancing emphasis where needed.
-- **Padding**: Determines space around the text, allowing for better alignment and placement within nodes.
-- **FontStyle**: Enables styles such as "italic" for creative or hierarchical text presentation.
+- **Visible**: Shows or hides labels.
+- **FontSize**: Controls label size.
+- **Color**: Sets text color for contrast and theme consistency.
+- **FontFamily**: Applies a specific font family to match typography.
+- **FontWeight**: Sets text weight (for example, 400 for normal, 700 for bold).
+- **Padding**: Adds space around text for better placement.
+- **FontStyle**: Enables styles such as italic.
 
 {% tabs %}
 {% highlight razor %}
@@ -124,13 +124,13 @@ Customizing the appearance of labels in the Blazor Sankey Diagram provides an op
 
 ## Key Considerations
 
-- Use concise yet descriptive label text to ensure clarity without cluttering the diagram.
-- Employ various font sizes and weights to create a visual hierarchy that highlights significant data points.
-- Ensure label color contrasts sufficiently with the node color to maintain readability.
-- Adjust padding to perfect label placement within nodes, preventing overlap or misalignment.
-- Use the `Visible` property strategically to manage label density based on diagram complexity.
+- Keep label text concise and descriptive to avoid clutter.
+- Vary font sizes and weights to establish visual hierarchy.
+- Ensure sufficient color contrast between text and node background.
+- Adjust padding to prevent overlap and ensure precise placement.
+- Use the Visible property to manage label density in complex diagrams.
 
-By skillfully configuring and customizing labels within the Blazor Sankey Diagram, developers can generate informative and user-friendly flow diagrams. Effective label usage underscores the significance of nodes and enhances users' ability to interpret data visualizations easily.
+Effective label configuration enhances clarity and supports rapid interpretation of complex flows in Sankey diagrams.
 
 ## See also
 
diff --git a/blazor/sankey/legend.md b/blazor/sankey/legend.md
index a761da91a5..ebacc4a3fc 100644
--- a/blazor/sankey/legend.md
+++ b/blazor/sankey/legend.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Legends for Blazor Sankey Diagram | Syncfusion
-description: Learn how to configure and customize legends in the Blazor Sankey Diagram to enhance data interpretation and user interaction.
+description: Learn how to configure and customize legends in the Syncfusion Blazor Sankey Diagram to enhance data interpretation and user interaction.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -11,13 +11,13 @@ documentation: ug
 
 ## Overview
 
-Legends in a Sankey diagram provide a visual key to interpret the different nodes or links in the diagram. This topic covers how to configure and customize legends in the Blazor Sankey diagram.
+Legends provide a visual key for interpreting nodes or links in a Sankey diagram. This topic explains how to configure and customize legends in the Blazor Sankey Diagram.
 
 ## Basic Legend Configuration
 
-Legends in a Sankey diagram provide a visual representation of the categories or elements involved in your data flow, making it easier for users to interpret and analyze the diagram. They help identify nodes, links, or other key elements by associating them with descriptive labels or colors. The `SankeyLegendSettings` in the Sankey diagram allows you to customize the legend's visibility, position, size, and other settings. By enabling and configuring the legend, you can offer users a clear and interactive way to understand the connections and relationships in the data.
+Legends present the categories or elements in a data flow, associating items with descriptive labels and colors. The `SankeyLegendSettings` API controls legend visibility, position, size, and layout to create an organized and interpretable visualization.
 
-Below is an example of how to configure legends for a Sankey diagram. The sample demonstrates how to add and position the legend, adjust its height, and bind data to the Sankey diagram. This configuration can be used to create a well-organized and visually intuitive data visualization.
+The following example demonstrates enabling a legend, positioning it, adjusting height, and binding data for the Sankey diagram.
 
 {% tabs %}
 {% highlight razor %}
@@ -32,9 +32,11 @@ Below is an example of how to configure legends for a Sankey diagram. The sample
         Height="200px">
     </SankeyLegendSettings>
 </SfSankey>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
     public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -96,28 +98,25 @@ Below is an example of how to configure legends for a Sankey diagram. The sample
 {% endhighlight %}
 {% endtabs %}
 
-
 ![Blazor Sankey Basic Legend](images/legends/sankey-legends.png)
 
 ## Legend Customization and Configuration
 
-The Sankey diagram component offers a robust set of features for legend customization and configuration, allowing users to create visually appealing and informative representations of their data. This comprehensive toolset encompasses a wide range of options, from basic visibility controls to advanced styling capabilities.
+The Sankey Diagram supports a comprehensive set of legend options, ranging from visibility and sizing to layout and styling. Appearance settings enable precise control over legend elements, including item spacing, shape size, and ordering. A legend title can be added to provide additional context.
 
-Appearance customization extends beyond basic properties, allowing for detailed adjustments to the legend's visual elements. Users can modify the dimensions of legend shapes, customize the padding between shapes and text, and even invert or reverse the order of legend items. The legend can be further enhanced with a title, adding context to the displayed information.
-
-- `Visible`: Determines whether the legend is displayed (default is true).
+- `Visible`: Shows or hides the legend.
 - `Position`: Sets the position of the legend (Auto, Top, Left, Bottom, Right).
-- `Width` and `Height`: Set the dimensions of the legend.
-- `Padding`: Sets the padding around the legend collection.
-- `ItemPadding`: Sets the padding between legend items.
-- `ShapeWidth` and `ShapeHeight`: Set the dimensions of the legend shapes.
-- `ShapePadding`: Sets the padding between the legend shape and text.
-- `Background`: Sets the background color of the legend area.
-- `Opacity`: Sets the opacity of the legend background.
-- `EnableHighlight`: Enables highlighting of corresponding elements when hovering over legend items.
+- `Width`, `Height`: Defines legend dimensions.
+- `Padding`: Sets outer padding around the legend collection.
+- `ItemPadding`: Sets spacing between legend items.
+- `ShapeWidth`, `ShapeHeight`: Control legend shape size.
+- `ShapePadding`: Sets spacing between legend shapes and text.
+- `Background`: Sets legend background color.
+- `Opacity`: Sets legend background transparency.
+- `EnableHighlight`: Highlights corresponding elements on legend hover.
 - `Title`: Sets a title for the legend.
-- `IsInversed`: Inverts the order of the shape and text in legend items.
-- `Reverse`: Reverses the order of legend items.
+- `IsInversed`: Inverts the order of shape and text in legend items.
+- `Reverse`: Reverses the ordering of legend items.
 
 {% tabs %}
 {% highlight razor %}
@@ -144,9 +143,11 @@ Appearance customization extends beyond basic properties, allowing for detailed
     <SankeyLegendMargin Left="20" Right="20" Top="20" Bottom="20"></SankeyLegendMargin>
 </SankeyLegendSettings>
 </SfSankey>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
     public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -212,7 +213,7 @@ Appearance customization extends beyond basic properties, allowing for detailed
 
 ### Legend Text and Title Styles
 
-The Sankey diagram provides advanced customization options for legend text and title styles through the `SankeyLegendTextStyle` and `SankeyLegendTitleStyle` APIs, enabling developers to configure properties such as font size, family, weight, color, and style. These APIs offer flexibility to align the legend's typography with the overall design aesthetic of the visualization, ensuring the legends complement the data representation and enhance the user experience. This level of control allows for seamless integration of legends into a wide range of visualization styles, from simple and clean to highly customized designs, as demonstrated in the following code snippet:
+Legend typography can be tailored using `SankeyLegendTextStyle` and `SankeyLegendTitleStyle`. Configure font size, family, weight, color, and style to match the application’s visual language.
 
 {% tabs %}
 {% highlight razor %}
@@ -239,20 +240,20 @@ The Sankey diagram provides advanced customization options for legend text and t
 
 ## Key Considerations
 
-- Use clear and concise legend items to improve diagram readability.
-- Choose an appropriate legend position that doesn't interfere with the main Sankey diagram.
-- Customize legend appearance to match your application's design theme.
-- Use the `EnableHighlight` property to enhance user interaction.
-- Consider using `IsInversed` or `Reverse` properties to optimize legend item ordering for better comprehension.
+- Keep legend items concise and unambiguous to support quick scanning.
+- Choose positions that avoid overlap with the primary diagram content.
+- Align legend styling with the application theme for consistency.
+- Use `EnableHighlight` to assist targeted exploration of flows.
+- Adjust `IsInversed` or `Reverse` to optimize reading order when needed.
 
 ## Legend Interaction
 
-When `EnableHighlight` is set to true, hovering over a legend item will highlight the corresponding elements in the Sankey diagram. This feature helps users quickly identify specific data flows or node categories.
+When `EnableHighlight` is true, hovering over a legend item highlights corresponding elements in the Sankey diagram, assisting quick identification of flows or categories.
 
-By effectively configuring and customizing legends in the Blazor Sankey diagram, you can create more informative and user-friendly diagrams. Legends play a crucial role in helping users interpret complex Sankey diagrams, especially when dealing with multiple categories or data flows.
+By configuring and styling legends effectively, Sankey diagrams become clearer and more discoverable, especially in scenarios with multiple categories or complex flows.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/sankey/links.md b/blazor/sankey/links.md
index 8068a38987..1dc889dcac 100644
--- a/blazor/sankey/links.md
+++ b/blazor/sankey/links.md
@@ -11,17 +11,17 @@ documentation: ug
 
 ## Overview
 
-Links in a Sankey diagram represent the connections and flow between nodes. They visually depict the relationships and quantities transferred between different entities or stages in a process. This topic covers how to define, customize, and work with links in the Blazor Sankey Diagram.
+Links represent flow between nodes in a Sankey diagram. They visually depict relationships and the quantity transferred between entities or stages. This topic explains how to define, customize, and work with links in the Blazor Sankey Diagram.
 
 ## Basic Link Configuration
 
-To add links to your Sankey Diagram, you need to define a collection of `SankeyDataLink` objects. Each link requires a source node, a target node, and a value representing the flow quantity.
+Add links by defining a collection of `SankeyDataLink` objects. Each link requires a source node, a target node, and a numeric value that represents flow magnitude.
 
-- Each link must have a `SourceId` and `TargetId` corresponding to existing node IDs.
-- The `Value` property determines the thickness of the link and represents the quantity flowing between nodes.
-- Links are automatically rendered based on the node positions and specified values.
+- Each link must include `SourceId` and `TargetId` that match existing node IDs.
+- The `Value` property determines link thickness and indicates the quantity flowing between nodes.
+- Links are rendered automatically based on node positions and specified values.
 
-Here's an example of how to configure links in the Sankey Diagram:
+Here is an example of configuring links in the Sankey Diagram:
 
 {% tabs %}
 {% highlight razor %}
@@ -35,10 +35,13 @@ Here's an example of how to configure links in the Sankey Diagram:
     <SankeyLabelSettings Color="#FFFFFF" FontWeight="400" ></SankeyLabelSettings>
     <SankeyLegendSettings Visible="false"></SankeyLegendSettings>
 </SfSankey>
+
 @code {
     string _backgroundColor = "#0b1320";
+
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
     public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -101,24 +104,24 @@ Here's an example of how to configure links in the Sankey Diagram:
 {% endtabs %}
 
 
-In this example, we define multiple links connecting nodes across different categories such as source, energy types, and usage groups.
+In this example, multiple links connect nodes across sources, energy carriers, and usage sectors.
 
 ![Blazor Sankey Link Customization](images/links/sankey-basic-link.png)
 
 ## Customizing Link Appearance
 
-In a Sankey Diagram, links represent the flow of data between nodes, and their appearance plays a critical role in making the visualization clear and aesthetically pleasing. The `SankeyLinkSettings` in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram allows you to customize these links to match your design requirements or emphasize specific data points.
+In a Sankey Diagram, links convey the flow of data between nodes. Their appearance is essential for clarity. Configure `SankeyLinkSettings` to align with design requirements or emphasize specific flows.
 
-- **`Color`**: Specifies the color of the links, which can be provided in standard formats like HEX (`#RRGGBB`) or RGBA (`rgba(r, g, b, a)`). This setting allows you to visually distinguish different flows in the diagram.
-- **`ColorType`**: Determines how the link color is applied, offering three options:
-  - **`SankeyColorType.Source`**: The link color matches the source node, highlighting the origin of the flow.
-  - **`SankeyColorType.Target`**: The link color matches the target node, emphasizing the destination.
-  - **`SankeyColorType.Blend`**: A gradient blend of source and target node colors, illustrating the connection between them dynamically.
-- **`Opacity`**: Defines the overall transparency of the links, with values ranging from `0.0` (completely transparent) to `1.0` (fully opaque). The default value is `0.8`, ensuring a balance between visibility and unobtrusiveness.
-- **`HighlightOpacity`**: Sets the opacity of links when hovered over, enabling a visual cue for interactivity. The default value is `0.8`, but it can be adjusted for more emphasis.
-- **`InactiveOpacity`**: Specifies the opacity of inactive links (those not hovered over), providing a contrast that directs attention to the active flow. The default value is `0.2`.
+- `Color`: Sets link color (HEX or RGBA) to distinguish flows.
+- `ColorType`: Controls how color is applied:
+  - `SankeyColorType.Source`: Matches the source node color.
+  - `SankeyColorType.Target`: Matches the target node color.
+  - `SankeyColorType.Blend`: Blends source and target colors as a gradient.
+- `Opacity`: Sets overall link transparency (0.0 – 1.0). The default value is **0.8**.
+- `HighlightOpacity`: Opacity on hover for emphasis. The default value is **0.8**.
+- `InactiveOpacity`: Opacity for non‑hovered links to minimize visual prominence. The default value is **0.2**.
 
-Below is an example configuration that demonstrates how to apply these properties to customize the links in a Sankey Diagram. Adjusting these settings can help you create a visualization that aligns with your data storytelling needs.
+Example configuration:
 
 {% tabs %}
 {% highlight razor %}
@@ -136,16 +139,16 @@ Below is an example configuration that demonstrates how to apply these propertie
 
 ## Key Considerations
 
-- Use meaningful values for links to accurately represent the flow between nodes.
-- Adjust link colors and opacities to enhance visibility and distinguish between different types of flows.
-- Consider using the `ColorType` property to create visually appealing color schemes that help users understand the data flow direction.
-- Utilize the `HighlightOpacity` and `InactiveOpacity` properties to improve user interaction and focus on specific data flows.
+- Provide accurate values to reflect real flow magnitudes.
+- Adjust link colors and opacities to improve contrast and readability.
+- Use `ColorType` to reinforce flow origin or destination, or to blend both.
+- Leverage `HighlightOpacity` and `InactiveOpacity` to guide focus during interaction.
 
-By effectively configuring and customizing links in the Blazor Sankey Diagram, you can create informative and visually appealing flow diagrams that clearly communicate the relationships and quantities in your data. The example provided demonstrates how to create a comprehensive visualization of device usage patterns across different demographic groups, showcasing the power and flexibility of the Sankey Diagram.
+Effective link configuration results in informative, visually clear Sankey diagrams that communicate relationships and quantities with precision.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Labels](./labels)
 * [Legend](./legend)
-* [tooltip](./tooltip)
\ No newline at end of file
+* [tooltip](./tooltip)
diff --git a/blazor/sankey/nodes.md b/blazor/sankey/nodes.md
index ec82f6abc4..617a83c94b 100644
--- a/blazor/sankey/nodes.md
+++ b/blazor/sankey/nodes.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Nodes for Blazor Sankey Diagram | Syncfusion
-description: Explore how to define and configure nodes in the Blazor Sankey Diagram to create meaningful and visually appealing flow diagrams.
+description: Learn how to define, configure and style nodes in the Syncfusion Blazor Sankey Diagram, including IDs, labels, and appearance settings.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -11,17 +11,17 @@ documentation: ug
 
 ## Overview
 
-Nodes are fundamental elements in a Sankey Diagram, representing entities or stages in a process flow. This topic covers how to define, customize, and work with nodes in the Blazor Sankey Diagram.
+Nodes are fundamental elements in a Sankey Diagram, representing entities or stages in a process flow. This topic describes how to define, customize, and work with nodes in the Blazor Sankey Diagram.
 
 ## Basic Node Configuration
 
-To add nodes to your Sankey Diagram, you need to define a collection of `SankeyDataNode` objects. Each node requires a unique ID and can have additional properties for customization.
+To add nodes to a Sankey Diagram, define a collection of `SankeyDataNode` objects. Each node requires a unique identifier and optional properties for display and layout.
 
-- Each node must have a unique `Id` property.
-- The `Label` property is of type `SankeyDataLabel` and defines the text displayed for the node.
-- Nodes are automatically positioned based on their connections defined in the `Links` collection.
+- Each node must include a unique `Id` property.
+- The `Label` property is of type `SankeyDataLabel` and specifies the text displayed for the node.
+- Node positions are determined automatically based on connections defined in the `Links` collection.
 
-Here's an example of how to configure nodes in the Sankey Diagram:
+Here is an example of configuring nodes in the Sankey Diagram:
 
 {% tabs %}
 {% highlight razor %}
@@ -35,10 +35,13 @@ Here's an example of how to configure nodes in the Sankey Diagram:
     <SankeyLabelSettings Color="#FFFFFF" FontWeight="400" ></SankeyLabelSettings>
     <SankeyLegendSettings Visible="false"></SankeyLegendSettings>
 </SfSankey>
+
 @code {
     string _backgroundColor = "#0b1320";
+
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
     public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -102,25 +105,25 @@ Here's an example of how to configure nodes in the Sankey Diagram:
 {% endtabs %}
 
 
-In this example, we define multiple nodes representing different categories such as source, energy types, and usage groups.
+In this example, nodes represent categories such as sources, energy types, and usage groups.
 
 ![Blazor Sankey Node Customization](images/nodes/sankey-node-basic.png)
 
 ## Customizing Node Appearance
 
-The nodes in a Sankey Diagram represent the primary entities or data points, and their appearance can be tailored to enhance the clarity and style of your visualization. Using the `SankeyNodeSettings` in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram, you can configure properties like width, alignment, padding, and more to make the diagram visually distinct and avoid overlap between elements.
+Nodes represent the primary entities in a Sankey Diagram, and their appearance can be tailored to improve clarity and style. Using `SankeyNodeSettings`, properties such as width, alignment, padding, and spacing can be configured to avoid overlap and enhance readability.
 
-- **`Width`**: Specifies the width of the nodes. The default value is `20`, but it can be increased or decreased to adjust the visual prominence of nodes in the diagram.
-- **`Alignment`**: Determines the alignment of nodes. Options include:
-  - **Left**: Aligns nodes to the left edge of the layout.
-  - **Top**: Aligns nodes to the top edge of the layout.
-  - **Stretch**: Stretches the nodes across the layout to fill available space.
-- **`Offset`**: Sets an additional offset for nodes based on their alignment, allowing fine-grained control over node placement.
-- **`Padding`**: Defines the spacing around nodes to prevent overlapping with other elements.
-- **`Color`**: Lets you customize the fill color of the nodes (not shown in the example but configurable).
-- **`Opacity`**: Adjusts the transparency level of the nodes (not shown in the example but configurable).
+- `Width`: Sets the node width. The default value is `20`; increase or decrease to adjust emphasis.
+- `Alignment`: Controls node alignment options:
+  - Left: Aligns nodes to the left edge of the layout.
+  - Top: Aligns nodes to the top edge of the layout.
+  - Stretch: Stretches nodes to fill available space.
+- `Offset`: Applies an additional offset relative to the alignment to fine‑tune placement.
+- `Padding`: Defines spacing around nodes to prevent overlap with other elements.
+- `Color`: Customizes the fill color of nodes (configurable).
+- `Opacity`: Adjusts node transparency (configurable).
 
-Below is an example demonstrating the customization of node appearance:
+Example:
 
 {% tabs %}
 {% highlight razor %}
@@ -136,16 +139,16 @@ Below is an example demonstrating the customization of node appearance:
 
 ## Key Considerations
 
-- Use meaningful IDs and labels for nodes to improve diagram readability.
-- Adjust node width, padding, and alignment to create clear and visually appealing Sankey diagrams.
-- Consider the relationships between nodes when defining links to accurately represent data flow.
-- Utilize the `SankeyLinkSettings` and `SankeyLabelSettings` to further customize the appearance of links and labels in the diagram.
+- Use meaningful IDs and labels to improve diagram readability.
+- Adjust node width, padding, and alignment to maintain visual hierarchy and spacing.
+- Define links to accurately represent relationships and flow between nodes.
+- Leverage `SankeyLinkSettings` and `SankeyLabelSettings` to style links and labels consistently.
 
-By mastering node configuration in the Blazor Sankey Diagram, you can create rich, informative flow diagrams that effectively communicate complex processes or relationships in your data. The example provided demonstrates how to create a comprehensive visualization of device usage patterns across different demographic groups.
+Mastering node configuration enables creation of rich, informative flow diagrams that communicate complex processes and relationships effectively. The example demonstrates a comprehensive visualization of energy usage patterns across sectors.
 
 ## See also
 
 * [Links](./links)
 * [Labels](./labels)
 * [Legend](./legend)
-* [tooltip](./tooltip)
\ No newline at end of file
+* [tooltip](./tooltip)
diff --git a/blazor/sankey/print-export.md b/blazor/sankey/print-export.md
index 15d8a209e5..437719afcb 100644
--- a/blazor/sankey/print-export.md
+++ b/blazor/sankey/print-export.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Print and Export for Blazor Sankey Diagram | Syncfusion
-description: Learn how to configure print and export functionalities in the Blazor Sankey Diagram to generate high-quality outputs.
+description: Learn how to configure print and export functionalities in the Syncfusion Blazor Sankey Diagram to generate high-quality outputs.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Blazor Sankey Diagram: Printing and Exporting
 
-This guide explains how to print and export the Blazor Sankey Diagram using its built-in functionalities. These features allow you to generate high-quality output for presentations, reports, or further analysis.
+This guide explains how to print and export the Blazor Sankey Diagram using built-in methods. These features enable high-quality output generation for presentations, reports, or further analysis.
 
 ## Printing the Sankey Diagram
 
-The Sankey Diagram offers a convenient way to print its contents directly from the browser. The `PrintAsync` method triggers the browser's print dialog, allowing users to select printing options and target printers. Note that the availability and appearance of print options depend on the user's browser and operating system.
+The Sankey Diagram provides a convenient way to print its contents from the browser. The `PrintAsync` method invokes the browser’s print dialog, allowing users to select print settings and send the diagram to a printer. The appearance and availability of print options are determined by the user's browser and operating system.
 
 {% tabs %}
 {% highlight razor %}
@@ -34,6 +34,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t
         <button class="btn btn-secondary" @onclick="PrintSankey">Print Sankey</button>
     </div>
 </div>
+
 @code {
     SfSankey sankey;
     string _backgroundColor = "#0b1320";
@@ -44,6 +45,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t
     {
         await sankey.PrintAsync();
     }
+
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -109,7 +111,7 @@ The Sankey Diagram offers a convenient way to print its contents directly from t
 
 ## Exporting the Sankey Diagram
 
-The Sankey Diagram can be exported to various image formats, including PNG, JPEG, SVG, and PDF. The `ExportAsync` method handles the export process.  You provide the desired file name and format as arguments. The exported image will reflect the current state of the chart, including any customizations or user interactions.
+The diagram can be exported to multiple formats, including PNG, JPEG, SVG, and PDF. The `ExportAsync` method handles this process, accepting a file format and name. The exported image reflects the current state of the chart, including all customizations and user interactions.
 
 {% tabs %}
 {% highlight razor %}
@@ -130,6 +132,7 @@ The Sankey Diagram can be exported to various image formats, including PNG, JPEG
         <button class="btn btn-secondary" @onclick="ExportSankey">Export Sankey</button>
     </div>
 </div>
+
 @code {
     SfSankey sankey;
     string _backgroundColor = "#0b1320";
@@ -207,16 +210,13 @@ The Sankey Diagram can be exported to various image formats, including PNG, JPEG
 
 ## Key Considerations
 
-* **Print Functionality:** The print feature relies on the browser's print capabilities. Ensure users have the necessary printer drivers and browser settings configured.
-
-* **Export Formats:** Choose the appropriate export format based on your needs.  PNG and JPEG are suitable for raster images, while SVG and PDF are vector formats that offer scalability without loss of quality.
-
-* **File Names:** Provide meaningful file names to help users organize and identify exported charts.
-
-* **Event Handling:** The  `PrintCompleted` and `ExportCompleted` events can be used to notify the user or perform actions after the respective operations finish. See the Events section of the Sankey Diagram documentation for more details.
+*   **Print Functionality**: Printing depends on browser capabilities. Ensure users have correctly configured printer drivers and settings.
+*   **Export Formats**: Select an appropriate format. PNG and JPEG are raster formats suitable for bitmaps, while SVG and PDF are vector formats that support lossless scaling.
+*   **File Naming**: Use descriptive filenames for exported charts to aid organization.
+*   **Event Handling**: `PrintCompleted` and `ExportCompleted` events can be used to provide feedback or trigger actions after an operation concludes. Refer to the Events section for more information.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/sankey/title.md b/blazor/sankey/title.md
index 8915658f4d..8afa86bb65 100644
--- a/blazor/sankey/title.md
+++ b/blazor/sankey/title.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Title and Subtitle in Blazor Sankey Diagram | Syncfusion
-description: Learn how to set and customize the title and subtitle in the Blazor Sankey Diagram from Syncfusion for better data representation.
+description: Learn how to set and customize the title and subtitle in the Syncfusion Blazor Sankey Diagram for better data representation.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -9,13 +9,11 @@ documentation: ug
 
 # Title and Subtitle in Blazor Sankey Diagram
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram allows you to add a title and subtitle to your chart, providing context and description for the data visualization. This topic covers how to set and customize the title and subtitle in the Sankey Diagram.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Sankey Diagram supports adding a title and subtitle to provide context and description for the data visualization. This topic explains how to set and customize the title and subtitle in the Sankey Diagram.
 
 ## Setting the Title and Subtitle
 
-Adding a title and subtitle to your Sankey diagram helps provide context and clarity. Use the `Title` property for the main heading, representing the chart's purpose, and the `SubTitle` property for additional details like a specific time period or region.
-
-By utilizing these properties, your Sankey diagram becomes more informative and visually engaging.
+Adding a title and subtitle helps convey purpose and scope. Use the `Title` property for the primary heading and the `SubTitle` property for supplemental details such as a time period or region.
 
 {% tabs %}
 {% highlight razor %}
@@ -23,7 +21,6 @@ By utilizing these properties, your Sankey diagram becomes more informative and
 @using Syncfusion.Blazor;
 @using Syncfusion.Blazor.Sankey;
 
-
 <SfSankey Nodes=@Nodes Links=@Links Title="Energy Flow" SubTitle="-2024">
 </SfSankey>
 @code {
@@ -91,13 +88,13 @@ By utilizing these properties, your Sankey diagram becomes more informative and
 {% endtabs %}
 
 
-In this example, "Energy Flow" is set as the title, and "-2024" is set as the subtitle.
+In this example, "Energy Flow" is configured as the title and "-2024" as the subtitle.
 
 ![Blazor Sankey Title](images/titles/sankey-title.png)
 
 ## Customizing Title and Subtitle
 
-The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and links. You can customize the appearance of the **title** and **subtitle** of your Sankey Diagram using the `SankeyTitleStyle` and `SankeySubtitleStyle` components. These components let you define font properties like `FontFamily`, `FontSize`, `FontStyle`, and `FontWeight` to match your design requirements.
+The title and subtitle can be styled using `SankeyTitleStyle` and `SankeySubtitleStyle`. Set font properties such as `FontFamily`, `FontSize`, `FontStyle`, and `FontWeight` to match branding and readability requirements.
 
 {% tabs %}
 {% highlight razor %}
@@ -105,12 +102,12 @@ The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and l
 @using Syncfusion.Blazor;
 @using Syncfusion.Blazor.Sankey;
 
-
 <SfSankey Nodes=@Nodes Links=@Links Title="Energy Flow" SubTitle="-2024">
     <SankeyTitleStyle FontFamily="Arial, sans-serif" FontSize="16px" FontStyle="Bold" FontWeight="600"></SankeyTitleStyle>
     <SankeySubtitleStyle FontFamily="Arial, sans-serif" FontSize="12px" FontStyle="italic" FontWeight="400"></SankeySubtitleStyle>
     <SankeyLabelSettings Color="#000000" FontWeight="500"></SankeyLabelSettings>
 </SfSankey>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
     public List<SankeyDataLink> Links = new List<SankeyDataLink>();        
@@ -180,16 +177,13 @@ The **Blazor Sankey Diagram** allows you to visualize flow data with nodes and l
 
 ## Key Considerations
 
-- Use meaningful and descriptive titles to give users a quick insight into the data represented in the Sankey Diagram.
-- Keep titles and subtitles concise while providing enough context.
-- Use the subtitle to provide additional details related to the data.
-- Customize the font size, family, weight, and color to ensure the title and subtitle are visually appealing and readable.
-- Ensure that the title and subtitle do not overshadow the actual chart data.
-
-By effectively utilizing the title and subtitle features of the Blazor Sankey Diagram, you can create more informative and user-friendly data visualizations that clearly communicate the purpose and context of your Sankey diagrams.
+- Use concise, descriptive titles to communicate the diagram’s purpose quickly.
+- Keep the subtitle brief and focused on contextual details.
+- Configure font size, family, weight, and color for legibility without distracting from the diagram.
+- Ensure the title and subtitle do not overpower the data visualization.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/sankey/tooltip.md b/blazor/sankey/tooltip.md
index e33842c13a..4b92ad020c 100644
--- a/blazor/sankey/tooltip.md
+++ b/blazor/sankey/tooltip.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Tooltips for Blazor Sankey Diagram | Syncfusion
-description: Learn how to configure and customize tooltips in the Blazor Sankey Diagram to enhance data visualization and user interaction.
+description: Learn how to configure and customize tooltips in the Syncfusion Blazor Sankey Diagram to enhance data visualization and user interaction.
 platform: Blazor
 control: Sankey
 documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
 
 # Tooltips in Blazor Sankey Diagram
 
-The **Blazor Sankey Diagram** is a powerful tool for visualizing energy flow, financial data, or any other system with nodes and links. The component allows you to display a flow diagram where nodes represent entities, and links represent the relationships or flows between them.
+The Blazor Sankey Diagram visualizes flows between nodes and links. Tooltips surface contextual details for hovered elements without cluttering the diagram.
 
-This guide provides step-by-step instructions on how to configure and customize tooltips within the **Blazor Sankey Diagram**.
+This guide outlines how to enable and customize tooltips in the Blazor Sankey Diagram.
 
 ## Basic Tooltip Configuration
 
-Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`. Below is an example of how to configure tooltips in the Sankey Diagram:
+Enable tooltips using `SankeyTooltipSettings`.
 
 {% tabs %}
 {% highlight razor %}
@@ -26,9 +26,11 @@ Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`.
 <SfSankey Nodes=@Nodes Links=@Links>
     <SankeyTooltipSettings Enable="true"></SankeyTooltipSettings>
 </SfSankey>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
-    public List<SankeyDataLink> Links = new List<SankeyDataLink>();        
+    public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+      
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -90,22 +92,21 @@ Tooltips can be added to your Sankey diagram using the `SankeyTooltipSettings`.
 {% endhighlight %}
 {% endtabs %}
 
-
 ![Blazor Sankey Tooltip](images/tooltip/sankey-tooltip.png)
 
 
 ## Customizing Tooltip Appearance
 
-The **Blazor Sankey Diagram** allows you to customize the appearance and behavior of tooltips through several properties. The tooltip settings allow for full control over how tooltips appear, including their background color, opacity, and animation effects for both nodes and links.
+Adjust tooltip appearance and behavior using `SankeyTooltipSettings`.
 
-- **`Enable`**: Controls whether tooltips are displayed. Default is `true`.
-- **`Fill`**: Sets the background color of the tooltip.
-- **`Opacity`**: Adjusts the tooltip opacity (0 to 1). Default is `0.75`.
-- **`NodeFormat`**: Defines the format for node tooltips.
-- **`LinkFormat`**: Specifies the format for link tooltips.
-- **`EnableAnimation`**: Toggles tooltip animation. Default is `true`.
-- **`Duration`**: Sets the duration (in milliseconds) for the tooltip animation. Default is `300`.
-- **`FadeOutDuration`**: Specifies the fade-out duration for tooltips (in milliseconds). Default is `1000`.
+- **Enable**: Shows or hides tooltips.
+- **Fill**: Sets background color.
+- **Opacity**: Controls transparency (0 to 1). The default value is 0.75.
+- **NodeFormat**: Template string for node tooltips.
+- **LinkFormat**: Template string for link tooltips.
+- **EnableAnimation**: Toggles animation. Default: true.
+- **Duration**: Animation duration in milliseconds. The default value is 300.
+- **FadeOutDuration**: Fade‑out duration in milliseconds. The default value is 1000.
 
 {% tabs %}
 {% highlight razor %}
@@ -113,7 +114,6 @@ The **Blazor Sankey Diagram** allows you to customize the appearance and behavio
 @using Syncfusion.Blazor;
 @using Syncfusion.Blazor.Sankey;
 
-
 <SfSankey Nodes=@Nodes Links=@Links Title="Energy Flow" SubTitle="-2024">
     <SankeyTooltipSettings 
     Enable="true" 
@@ -131,9 +131,11 @@ The **Blazor Sankey Diagram** allows you to customize the appearance and behavio
     </SankeyTooltipTextStyle>
 </SankeyTooltipSettings>
 </SfSankey>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
-    public List<SankeyDataLink> Links = new List<SankeyDataLink>();        
+    public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+    
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -195,14 +197,13 @@ The **Blazor Sankey Diagram** allows you to customize the appearance and behavio
 {% endhighlight %}
 {% endtabs %}
 
-
 ![Blazor Sankey Tooltip Customization](images/tooltip/sankey-tooltip-customization.png)
 
 ## Advanced Tooltip Configuration
 
 ### Custom Tooltip Templates
 
-For more advanced customizations, you can use custom templates for both node and link tooltips by utilizing the `SankeyNodeTemplate` and `SankeyLinkTemplate` properties. This allows you to define HTML templates that customize the layout and content of the tooltips.
+Customize tooltip content using `SankeyNodeTemplate` and `SankeyLinkTemplate` to render arbitrary HTML.
 
 {% tabs %}
 {% highlight razor %}
@@ -255,6 +256,7 @@ For more advanced customizations, you can use custom templates for both node and
         </SankeyLinkTemplate>
     </SankeyTooltipSettings>
 </SfSankey>
+
 <style>
     .e-sankeychart-tooltip-template{        
         margin: 0px !important;
@@ -273,9 +275,11 @@ For more advanced customizations, you can use custom templates for both node and
         margin-top: 30px;
     }
 </style>
+
 @code {
     public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
-    public List<SankeyDataLink> Links = new List<SankeyDataLink>();        
+    public List<SankeyDataLink> Links = new List<SankeyDataLink>();
+ 
     protected override void OnInitialized()
     {
         Nodes = new List<SankeyDataNode>()
@@ -343,24 +347,24 @@ For more advanced customizations, you can use custom templates for both node and
 **Link Template**
 ![Blazor Sankey Link Tooltip Template](images/tooltip/sankey-tooltip-link-template.png)
 
-These templates allow you to completely customize the content and appearance of tooltips for nodes and links.
+Templates enable fully customized content and layout for node and link tooltips.
 
 ## Key Considerations
 
-- Use clear and concise tooltip content to improve readability.
-- Choose appropriate colors and opacity levels that contrast well with your Sankey diagram.
-- Consider using custom templates for more complex tooltip designs or to include additional data.
-- Adjust animation settings to ensure smooth transitions without being distracting.
-- Use the `NodeFormat` and `LinkFormat` properties for quick customization of tooltip content without needing to create full templates.
+- Keep tooltip text concise and readable.
+- Ensure sufficient contrast for tooltip text and background.
+- Use templates for richer content or additional fields.
+- Tune animation durations to balance responsiveness and polish.
+- Prefer `NodeFormat` and `LinkFormat` for simple content customization without templates.
 
 ## Tooltip Interaction
 
-Tooltips appear when users hover over nodes or links in the Sankey diagram. The `EnableAnimation` property, when set to true, allows for smooth transitions as the tooltip moves between different elements.
+Tooltips appear on hover over nodes or links. When `EnableAnimation` is true, transitions are animated as focus changes between elements.
 
-By effectively configuring and customizing tooltips in the Blazor Sankey Diagram, you can create more informative and interactive diagrams. Tooltips play a crucial role in helping users understand detailed information about specific nodes and links without cluttering the main diagram view.
+Well‑designed tooltips improve comprehension of detailed values while keeping the main diagram clear.
 
 ## See also
 
 * [Nodes](./nodes)
 * [Links](./links)
-* [Labels](./labels)
\ No newline at end of file
+* [Labels](./labels)
diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md
index b848cfb0c6..4f81c9e8e4 100644
--- a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md
+++ b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md
@@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic
 - **OllamaSharp**
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
@@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models:
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package OllamaSharp
@@ -174,7 +174,7 @@ Install-Package OllamaSharp
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati
 - **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
 
 {% tabs %}
-{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
+{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
 
 using Syncfusion.Blazor;
 
@@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor();
 var app = builder.Build();
 
 {% endhighlight %}
-{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
+{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
 
 using Syncfusion.Blazor;
 
diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
index 3feda80ab1..14740fb7bc 100644
--- a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
+++ b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md
@@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic
 - **OllamaSharp**
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
@@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models:
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package OllamaSharp
@@ -174,7 +174,7 @@ Install-Package OllamaSharp
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati
 - **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
 
 {% tabs %}
-{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
+{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
 
 using Syncfusion.Blazor;
 
@@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor();
 var app = builder.Build();
 
 {% endhighlight %}
-{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
+{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
 
 using Syncfusion.Blazor;
 
@@ -241,7 +241,7 @@ The Kanban AI interface starts with a simple form where users provide **Project
 - **Generate Button:** A progress-enabled button that calls `GenerateTasks()` to start AI-based task creation.
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <div class="e-rte-label1" >
     <label>Project Details</label>
@@ -320,7 +320,7 @@ The Kanban board uses `SfKanban` to organize tasks into columns like **To Do**,
 - **Dynamic Binding:** The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_DataSource) property binds to `smartSuggestion`, ensuring that newly generated tasks appear instantly.
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <SfKanban TValue="SmartSuggestionDataModel" KeyField="Status" DataSource="@smartSuggestion">
     <KanbanColumns>
@@ -365,7 +365,7 @@ When users switch to **Backlog View**, tasks are displayed in a grid using `SfGr
 - **Data Binding:** The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property binds to `smartSuggestion`, just like Kanban.
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <SfGrid DataSource="@smartSuggestion" AllowPaging="true" Toolbar="@(new List<string>() { "Add" })">
     <GridEvents OnActionBegin="TaskEditingHandler" RowCreated="RowCreatedHandler" TValue="SmartSuggestionDataModel"></GridEvents>
@@ -408,7 +408,7 @@ When users switch to **Backlog View**, tasks are displayed in a grid using `SfGr
 **View Toggle:** Users can switch between **Kanban** and **Grid** using the button below:
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <SfButton OnClick="GoToBacklogBoardView" Content="@BacklogButtonViewContent"></SfButton>
 
@@ -444,5 +444,4 @@ If the AI service fails to return a valid response, the Kanban will display an e
 - **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible.
 - **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported.
 - **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances.
-- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.
-
+- **Large Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency.
\ No newline at end of file
diff --git a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
index eab9d75cc6..b6a21e6c14 100644
--- a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
+++ b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md
@@ -30,7 +30,7 @@ Ensure the following NuGet packages are installed based on your chosen AI servic
 - **OllamaSharp**
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }}
 Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
@@ -77,7 +77,7 @@ Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired mode
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -88,7 +88,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -115,7 +115,7 @@ Deploy an Azure OpenAI Service resource and model as described in [Microsoft's d
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package Microsoft.Extensions.AI.OpenAI
@@ -127,7 +127,7 @@ Install-Package Azure.AI.OpenAI
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Azure.AI.OpenAI;
@@ -163,7 +163,7 @@ To use Ollama for self-hosted AI models:
 - Install the required NuGet packages:
 
 {% tabs %}
-{% highlight C# tabtitle="Package Manager" %}
+{% highlight csharp tabtitle="Package Manager" %}
 
 Install-Package Microsoft.Extensions.AI
 Install-Package OllamaSharp
@@ -174,7 +174,7 @@ Install-Package OllamaSharp
 - Add the following to the **~/Program.cs** file in your Blazor WebApp:
 
 {% tabs %}
-{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
+{% highlight csharp tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %}
 
 using Syncfusion.Blazor.AI;
 using Microsoft.Extensions.AI;
@@ -202,7 +202,7 @@ Add the Syncfusion Blazor service to your **~/Program.cs** file. The configurati
 - **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files.
 
 {% tabs %}
-{% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
+{% highlight csharp tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %}
 
 using Syncfusion.Blazor;
 
@@ -216,7 +216,7 @@ builder.Services.AddSyncfusionBlazor();
 var app = builder.Build();
 
 {% endhighlight %}
-{% highlight C# tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
+{% highlight csharp tabtitle="Client (~/_Program.cs)" hl_lines="2 5" %}
 
 using Syncfusion.Blazor;
 
@@ -307,7 +307,7 @@ The dialog is divided into two main rows:
 - **Replace:** Inserts the AI-generated content back into the original editor with undo support.
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <SfDialog @bind-Visible="@dialogVisible" AllowPrerender="true" CssClass="e-rte-elements custom-dialog" ZIndex="1000" ShowCloseIcon="true" IsModal="true" Width="80%" Height="100%" Target="#rteSection">
     <DialogTemplates>
@@ -571,7 +571,7 @@ Once the AI-generated content is ready, it needs to be inserted exactly where th
 Additionally, users can copy the AI-generated content to the clipboard for use elsewhere. This is handled via a `JavaScript interop` function that copies plain text extracted from the AI result.
 
 {% tabs %}
-{% highlight %}
+{% highlight razor %}
 
 <FooterTemplate>
     <SfButton Disabled="@enabelContentButton" @onclick="CopyContent">Copy</SfButton>
diff --git a/blazor/smart-ai-solutions/ai/ollama.md b/blazor/smart-ai-solutions/ai/ollama.md
index ffc5972945..a8c1aac9ef 100644
--- a/blazor/smart-ai-solutions/ai/ollama.md
+++ b/blazor/smart-ai-solutions/ai/ollama.md
@@ -305,5 +305,6 @@ This example illustrates how the Syncfusion Blazor AI library integrates with Ol
 - **JSON parsing errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method.
 - **Resource limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements.
 
+
 ## See Also
 - [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp)
\ No newline at end of file
diff --git a/blazor/smart-ai-solutions/ai/openAI.md b/blazor/smart-ai-solutions/ai/openAI.md
index 6adb831850..844f5501cb 100644
--- a/blazor/smart-ai-solutions/ai/openAI.md
+++ b/blazor/smart-ai-solutions/ai/openAI.md
@@ -373,4 +373,5 @@ This example shows how the Syncfusion Blazor AI library integrates with OpenAI t
 - **Network issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages.
 
 ## See Also
+
 - [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/sparkline/accessibility.md b/blazor/sparkline/accessibility.md
index 24c98ae240..dc3b4f4785 100644
--- a/blazor/sparkline/accessibility.md
+++ b/blazor/sparkline/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Sparkline component and more.
+description: Learn about accessibility, keyboard navigation, and compliance in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline
 documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor Sparkline Component
 
-The Blazor Sparkline component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Sparkline component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
 
-The accessibility compliance for the Blazor Sparkline component is outlined below.
+The table below outlines accessibility compliance for the Blazor Sparkline component.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Sparkline component is outlined belo
 | [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 | [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
 
 <style>
@@ -30,6 +30,7 @@ The accessibility compliance for the Blazor Sparkline component is outlined belo
         margin: 0.5em 0;
     }
 </style>
+
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
@@ -37,9 +38,9 @@ The accessibility compliance for the Blazor Sparkline component is outlined belo
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
 
-## WAI-ARIA attributes
+## WAI-ARIA Attributes
 
-The Blazor Sparkline component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Sparkline component:
+The component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns for accessibility. The following ARIA attributes are used:
 
 * img (role)
 * region (role)
@@ -47,26 +48,25 @@ The Blazor Sparkline component followed the [WAI-ARIA](https://www.w3.org/WAI/AR
 * aria-hidden (attribute)
 * aria-pressed (attribute)
 
-## Keyboard interaction
+## Keyboard Interaction
 
-The Blazor Sparkline component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Sparkline component.
+The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users relying on assistive technologies (AT) or keyboard navigation. Supported keyboard shortcuts:
 
 | Windows | Mac | Description |
 | --- | --- | --- |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Sparkline. |
-| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Sparkline. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point right side from the selected point. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. |
-| <kbd>ESC</kbd> | <kbd>ESC</kbd> | Cancel the tooltip for the data point. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the Sparkline. |
+| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Sparkline. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point right side from the selected point. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point right side from the selected point. |
+| <kbd>ESC</kbd> | <kbd>ESC</kbd> | Cancels the tooltip for the data point. |
 | <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Sparkline. |
 
-## Ensuring accessibility
-
-The Blazor Sparkline component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+## Ensuring Accessibility
 
-The accessibility compliance of the Blazor Sparkline component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/sparkline) in a new window to evaluate the accessibility of the Blazor Sparkline component with accessibility tools.
+Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
+Evaluate accessibility in the Blazor Sparkline component by opening the [sample](https://blazor.syncfusion.com/accessibility/sparkline) in a new window and using accessibility tools.
 
-## See also
+## See Also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
diff --git a/blazor/sparkline/appearance.md b/blazor/sparkline/appearance.md
index d934330eb7..7f52e2d68b 100644
--- a/blazor/sparkline/appearance.md
+++ b/blazor/sparkline/appearance.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Appearance in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about appearance in Syncfusion Blazor Sparkline component and much more.
+description: Check out and learn here all about appearance customization in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,28 +9,31 @@ documentation: ug
 
 # Appearance in Blazor Sparkline Component
 
-The rendering direction, padding, border, and the background appearance of the Sparkline can all be customized.
+The rendering direction, padding, border, and background appearance of the Sparkline can be customized.
 
-## Right-to-left (RTL)
+## Right-to-Left (RTL)
 
-The Sparkline supports the right-to-left (RTL) rendering that can be enabled by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_EnableRtl) property to **true**.
+Right-to-left (RTL) rendering is supported and can be enabled by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_EnableRtl) property to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new double[]{ 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 }" Height="200px" Width="350px" Format="c2" EnableRtl="true">
     <SparklineDataLabelSettings Visible="new List<VisibleType> { VisibleType.All }" EdgeLabelMode="EdgeLabelMode.Shift"></SparklineDataLabelSettings>
     <SparklinePadding Top="25"></SparklinePadding>
 </SfSparkline>
+
 ```
 
 ![Right to Left in Blazor Sparkline Chart](images/Appearance/blazor-sparkline-right-to-left.png)
 
 ## Border
 
-The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of the [SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html).
+The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of [SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
@@ -38,15 +41,17 @@ The border can be enabled and customized by specifying the [Color](https://help.
         <SparklineContainerAreaBorder Color="#033e96" Width="1"></SparklineContainerAreaBorder>
     </SparklineContainerArea>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Border](images/Appearance/blazor-sparkline-with-border.png)
 
 ## Padding
 
-The Sparkline supports padding between the container and the component using the [SparklinePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklinePadding.html). The code example in the following shows the Sparkline Chart with overall padding set to 20.
+Padding between the container and the component is supported using [SparklinePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklinePadding.html). The following example shows the Sparkline Chart with overall padding set to 20.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
@@ -56,15 +61,17 @@ The Sparkline supports padding between the container and the component using the
     <SparklineBorder Color="#033e96" Width="1"></SparklineBorder>
     <SparklinePadding Left="20" Right="20" Bottom="20" Top="20"></SparklinePadding>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Padding](images/Appearance/blazor-sparkline-with-padding.png)
 
 ## Background
 
-The background color of the Sparkline area can be changed using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html#Syncfusion_Blazor_Charts_SparklineContainerArea_Background) property of the [SparklineContainerArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html). By default, the Sparkline background color is **Transparent**.
+The background color of the Sparkline area can be changed using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html#Syncfusion_Blazor_Charts_SparklineContainerArea_Background) property of [SparklineContainerArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerArea.html). By default, the background color is **Transparent**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
@@ -75,6 +82,7 @@ The background color of the Sparkline area can be changed using the [Background]
     <SparklineBorder Color="#033e96" Width="1"></SparklineBorder>
     <SparklinePadding Left="20" Right="20" Bottom="20" Top="20"></SparklinePadding>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Custom Background](images/Appearance/blazor-sparkline-custom-background.png)
diff --git a/blazor/sparkline/axis-customization.md b/blazor/sparkline/axis-customization.md
index 6f7106875b..33f4cf4693 100644
--- a/blazor/sparkline/axis-customization.md
+++ b/blazor/sparkline/axis-customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Axis Customization in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about axis customization in Syncfusion Blazor Sparkline component and more.
+description: Check out and learn here all about axis customization options in Syncfusion Blazor Sparkline component and more.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,15 +9,16 @@ documentation: ug
 
 # Axis Customization in Blazor Sparkline Component
 
-## Change the value type of the Sparkline Chart
+## Change the Value Type of the Sparkline Chart
 
-The [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify the Sparkline value type, which can be [Numeric](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Numeric), [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Category), or [DateTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_DateTime).
+The [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property specifies the Sparkline value type, which can be [Numeric](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Numeric), [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Category), or [DateTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_DateTime).
 
 ### Numeric
 
-The numeric axis value can be provided by specifying the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to the [Numeric](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Numeric).
+A numeric axis value is provided by setting the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to [Numeric](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Numeric).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
@@ -29,25 +30,28 @@ The numeric axis value can be provided by specifying the [ValueType](https://hel
         public int Year { get; set; }
         public int Expense { get; set; }
     };
+
     public List<ExpenditureDetails> ExpenditureReport = new List<ExpenditureDetails> {
-        new ExpenditureDetails{ Year= 2010, Expense= 190 },
-        new ExpenditureDetails{ Year= 2011, Expense= 165 },
-        new ExpenditureDetails{ Year= 2012, Expense= 158 },
-        new ExpenditureDetails{ Year= 2013, Expense= 175 },
-        new ExpenditureDetails{ Year= 2014, Expense= 200 },
-        new ExpenditureDetails{ Year= 2015, Expense= 180 },
-        new ExpenditureDetails{ Year= 2016, Expense= 210 }
+        new ExpenditureDetails{ Year = 2010, Expense = 190 },
+        new ExpenditureDetails{ Year = 2011, Expense = 165 },
+        new ExpenditureDetails{ Year = 2012, Expense = 158 },
+        new ExpenditureDetails{ Year = 2013, Expense = 175 },
+        new ExpenditureDetails{ Year = 2014, Expense = 200 },
+        new ExpenditureDetails{ Year = 2015, Expense = 180 },
+        new ExpenditureDetails{ Year = 2016, Expense = 210 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with Numeric Value](images/Axis/blazor-sparkline-numeric-value.png)
 
 ### Category
 
-The category axis value can be provided by specifying the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to the [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Category).
+A category axis value is provided by setting the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to [Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_Category).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline XName="EmployeeName"YName="WorkHours"TValue="WorkDetails"DataSource="@EmployeeWorkReport" Type="SparklineType.Column"ValueType="SparklineValueType.Category" Height="250px"Width="450px">
@@ -59,26 +63,29 @@ The category axis value can be provided by specifying the [ValueType](https://he
         public string EmployeeName { get; set; }
         public double WorkHours { get; set; }
     };
+
     public List<WorkDetails> EmployeeWorkReport = new List<WorkDetails> {
-        new WorkDetails { EmployeeName = "Robert", WorkHours= 60 },
-        new WorkDetails { EmployeeName = "Andrew", WorkHours= 65 },
-        new WorkDetails { EmployeeName = "Suyama", WorkHours= 70 },
-        new WorkDetails { EmployeeName = "Michael", WorkHours= 80 },
-        new WorkDetails { EmployeeName = "Janet", WorkHours= 55 },
-        new WorkDetails { EmployeeName = "Davolio", WorkHours= 90 },
-        new WorkDetails { EmployeeName = "Fuller", WorkHours= 75 },
-        new WorkDetails { EmployeeName = "Nancy", WorkHours= 85 }
+        new WorkDetails { EmployeeName = "Robert", WorkHours = 60 },
+        new WorkDetails { EmployeeName = "Andrew", WorkHours = 65 },
+        new WorkDetails { EmployeeName = "Suyama", WorkHours = 70 },
+        new WorkDetails { EmployeeName = "Michael", WorkHours = 80 },
+        new WorkDetails { EmployeeName = "Janet", WorkHours = 55 },
+        new WorkDetails { EmployeeName = "Davolio", WorkHours = 90 },
+        new WorkDetails { EmployeeName = "Fuller", WorkHours = 75 },
+        new WorkDetails { EmployeeName = "Nancy", WorkHours = 85 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with Category Value](images/Axis/blazor-sparkline-category-value.png)
 
 ### DateTime
 
-The DateTime axis value can be provided by specifying the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to the [DateTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_DateTime).
+A DateTime axis value is provided by setting the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property to [DateTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineValueType.html#Syncfusion_Blazor_Charts_SparklineValueType_DateTime).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline XName="Date" YName="Expense" TValue="ExpenditureDetail" DataSource="@ExpenditureReports" Type="SparklineType.Column" ValueType="SparklineValueType.DateTime" Height="250px" Width="450px">
@@ -102,49 +109,54 @@ The DateTime axis value can be provided by specifying the [ValueType](https://he
         new ExpenditureDetail { Date = new DateTime(2011, 01, 01), Expense = 70 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with DateTime Value](images/Axis/blazor-sparkline-datetime-value.png)
 
-## Change the min and the max values of axis
+## Change the Min and Max Values of Axis
 
-The min and the max values of the X-axis can be customized using the [MinX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MinX) and the [MaxX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MaxX) properties of the [SparklineAxisSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html), and the min and the max values of the Y-axis using the [MinY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MinY) and the [MaxY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MaxY) properties.
+The minimum and maximum values of the X-axis can be customized using the [MinX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MinX) and [MaxX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MaxX) properties of [SparklineAxisSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html). The Y-axis min and max values can be set using [MinY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MinY) and [MaxY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_MaxY).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
     <SparklineAxisSettings MinY="100" MaxY="220"></SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#numeric) to know about the property value of the **ExpenditureReport**.
+N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
 ![Changing Minimum and Maximum Values of Blazor Sparkline Chart Axis](images/Axis/blazor-sparkline-min-max-value.png)
 
-## Change value of axis
+## Change Value of Axis
 
-The horizontal axis line value can be customized by setting the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_Value) in the [SparklineAxisSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html).
+The horizontal axis line value can be customized by setting the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html#Syncfusion_Blazor_Charts_SparklineAxisSettings_Value) property in [SparklineAxisSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisSettings.html).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="@ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Column" ValueType="SparklineValueType.Numeric" Height="250px" Width="450px">
     <SparklineAxisSettings Value="170"></SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#numeric) to know about the property value of the **ExpenditureReport**.
+N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
 ![Blazor Sparkline Chart with Axis Value](images/Axis/blazor-sparkline-axis-value.png)
 
 ## Axis Line Customization
 
-The axis line can be enabled by specifying the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_Visible) property to **true** in the [SparklineAxisLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html).
+The axis line can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_Visible) property to **true** in [SparklineAxisLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html).
 
 N> The axis line is not applicable for the [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_WinLoss) chart type.
 
-The axis line can be customized using the following properties.
+The axis line can be customized using the following properties:
 
 * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_Color) - Specifies the color of the axis line.
 * [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_Opacity) - Specifies the opacity for the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_Color) of the axis line.
@@ -152,6 +164,7 @@ The axis line can be customized using the following properties.
 * [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineAxisLineSettings.html#Syncfusion_Blazor_Charts_SparklineAxisLineSettings_DashArray) - Specifies the dash array of the axis line.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="ExpenditureReport" TValue="ExpenditureDetails" XName="Year" YName="Expense" Type="SparklineType.Line" Height="250px" Width="450px">
@@ -159,8 +172,9 @@ The axis line can be customized using the following properties.
         <SparklineAxisLineSettings Visible="true" Color="#ff14ae" DashArray="5" Opacity="1"></SparklineAxisLineSettings>
     </SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#numeric) to know about the property value of **ExpenditureReport**.
+N> Refer to the [code block](#numeric) for the **ExpenditureReport** property value.
 
 ![Blazor Sparkline Chart with Custom Axis Line](images/Axis/blazor-sparkline-custom-axis-line.png)
diff --git a/blazor/sparkline/chart-types.md b/blazor/sparkline/chart-types.md
index 62d3ebe636..473d84eb65 100644
--- a/blazor/sparkline/chart-types.md
+++ b/blazor/sparkline/chart-types.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Chart Types in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about chart types in Syncfusion Blazor Sparkline component and much more.
+description: Check out and learn about the different chart types available in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # Chart Types in Blazor Sparkline Component
 
-The different type of shapes can be used to represent the Sparkline Chart, and the type of Sparkline Chart can be changed by specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property.
+Different shapes can be used to represent the Sparkline Chart by specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property.
 
 ## Line
 
-The [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Line) chart type is used to render the Sparkline series as line.
+The [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Line) chart type renders the Sparkline series as a line.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="200px" Height="150px" Type="SparklineType.Line">
@@ -27,77 +28,87 @@ The [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sparkl
         public int Year { get; set; }
         public int Population { get; set; }
     };
+
     private List<PopulationReport> PopulationData = new List<PopulationReport> {
-        new  PopulationReport { Year= 2005, Population= 20090440 },
-        new  PopulationReport { Year= 2006, Population= 20264080 },
-        new  PopulationReport { Year= 2007, Population= 20434180 },
-        new  PopulationReport { Year= 2008, Population= 21007310 },
-        new  PopulationReport { Year= 2009, Population= 21262640 },
-        new  PopulationReport { Year= 2010, Population= 21515750 },
-        new  PopulationReport { Year= 2011, Population= 21766710 },
-        new  PopulationReport { Year= 2012, Population= 22015580 },
-        new  PopulationReport { Year= 2013, Population= 22262500 },
-        new  PopulationReport { Year= 2014, Population= 22507620 }
+        new  PopulationReport { Year = 2005, Population = 20090440 },
+        new  PopulationReport { Year = 2006, Population = 20264080 },
+        new  PopulationReport { Year = 2007, Population = 20434180 },
+        new  PopulationReport { Year = 2008, Population = 21007310 },
+        new  PopulationReport { Year = 2009, Population = 21262640 },
+        new  PopulationReport { Year = 2010, Population = 21515750 },
+        new  PopulationReport { Year = 2011, Population = 21766710 },
+        new  PopulationReport { Year = 2012, Population = 22015580 },
+        new  PopulationReport { Year = 2013, Population = 22262500 },
+        new  PopulationReport { Year = 2014, Population = 22507620 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Line Chart](images/SparklineTypes/blazor-line-sparkline.png)
 
 ## Column
 
-The [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Column) chart type is used to render the Sparkline series as column.
+The [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Column) chart type renders the Sparkline series as columns.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="150px" Type="SparklineType.Column">
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#line) to know about the property value of the **PopulationData**.
+N> Refer to the [code block](#line) for the **PopulationData** property value.
 
 ![Blazor Sparkline Column Chart](images/SparklineTypes/blazor-column-sparkline.png)
 
 ## Pie
 
-The [Pie](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Pie) chart type is used to render the Sparkline series as pie.
+The [Pie](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Pie) chart type renders the Sparkline series as a pie chart.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="250px" Type="SparklineType.Pie">
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#line) to know about the property value of the **PopulationData**.
+N> Refer to the [code block](#line) for the **PopulationData** property value.
 
 ![Blazor Sparkline Pie Chart](images/SparklineTypes/blazor-pie-sparkline.png)
 
 ## WinLoss
 
-The [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_WinLoss) chart type is used to render the Sparkline series as WinLoss.
+The [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_WinLoss) chart type renders the Sparkline series as WinLoss.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10}" Width="500px" Height="200px" Type="SparklineType.WinLoss">
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline WinLoss Chart](images/SparklineTypes/blazor-winloss-sparkline.png)
 
 ## Area
 
-The [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Area) chart type is used to render the Sparkline series as area.
+The [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Area) chart type renders the Sparkline series as an area chart.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="PopulationData" TValue="PopulationReport" XName="Year" YName="Population" Width="500px" Height="100px" Type="SparklineType.Area">
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#line) to know about the property value of the **PopulationData**.
+N> Refer to the [code block](#line) for the **PopulationData** property value.
 
-![Blazor Sparkline Area Chart](images/SparklineTypes/blazor-area-sparkline.png)
\ No newline at end of file
+![Blazor Sparkline Area Chart](images/SparklineTypes/blazor-area-sparkline.png)
diff --git a/blazor/sparkline/data-labels.md b/blazor/sparkline/data-labels.md
index a213be66b9..9959c55d24 100644
--- a/blazor/sparkline/data-labels.md
+++ b/blazor/sparkline/data-labels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Data Labels in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about Data Labels in Syncfusion Blazor Sparkline component and much more.
+description: Check out and learn how to configure and customize Data Labels in Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,44 +9,46 @@ documentation: ug
 
 # Data Labels in Blazor Sparkline Component
 
-To improve readability, the Data Labels are used to display the value of data points.
+To improve readability, data labels display the value of data points.
 
 ## Enable Data Label
 
-The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html) can be used to enable the Data Label by specifying a collection of special points. The following special points are applicable for the Sparkline Data Label.
-
-* [All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_All) - Data label for all points are enabled.
-* [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Start) - Data label for start points are enabled.
-* [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_End) - Data label for end points are enabled.
-* [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_High) - Data label for high points are enabled.
-* [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Low) - Data label for low points are enabled.
-* [Negative](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Negative) - Data label for negative points are enabled.
-* [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_None) - Data label for all points are disabled.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property in [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html) enables data labels by specifying a collection of special points. The following special points are applicable:
 
+* [All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_All) – Data label for all points
+* [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Start) – Data label for start points
+* [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_End) – Data label for end points
+* [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_High) – Data label for high points
+* [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Low) – Data label for low points
+* [Negative](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Negative) – Data label for negative points
+* [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_None) – Data label for all points are disabled
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
     <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
     <SparklineDataLabelSettings Visible="new List<VisibleType>() { VisibleType.All }"></SparklineDataLabelSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Data Label](images/Datalabels/blazor-sparkline-data-label.png)
 
-## Data Label customization
+## Data Label Customization
 
-The following properties can be used to customize the Sparkline Data Label:
+The following properties can be used to customize Sparkline data labels:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) - Specifies color for the Data Label.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Opacity) - Specifies opacity of [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) color for the Data Label.
-* [EdgeLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_EdgeLabelMode) - Specifies controlling option when the label comes in the edge. Available options are the [Shift](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Shift), the [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_None) and the [Hide](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Hide).
-* [SparklineFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineFont.html) - To customize the Data Label font family, font style, font weight, color, opacity and size.
-* [SparklineDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelBorder.html) - Specifies the color and the width for the Data Label border.
-* [SparklineDataLabelOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelOffset.html) - Specifies the label offset position from its default position.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) – Specifies color for the Data Label
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Opacity) – Specifies opacity of the data label [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) color
+* [EdgeLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_EdgeLabelMode) – Specifies controlling option when the label comes in the edge. Available options are the [Shift](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Shift), the [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_None) and the [Hide](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Hide)
+* [SparklineFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineFont.html) – Customize the Data Label font family, font style, font weight, color, opacity and size
+* [SparklineDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelBorder.html) – Specifies the color and the width for the Data Label border
+* [SparklineDataLabelOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelOffset.html) – Specifies the label offset position from its default position
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
@@ -58,15 +60,17 @@ The following properties can be used to customize the Sparkline Data Label:
         </SparklineDataLabelBorder>
     </SparklineDataLabelSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Custom Data Label](images/Datalabels/blazor-sparkline-custom-data-label.png)
 
 ## Format
 
-The Data Label text can be formatted by specifying the property name from the datasource to the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Format) property in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). By default, Data Label text will be based on [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) property.
+The data label text can be formatted by specifying the property name from the data source to the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Format) property in [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). By default, the data label text is based on the [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="ClimateData" TValue="WeatherReport" XName="Month" YName="Celsius" ValueType="SparklineValueType.Category" Height="200px" Width="500px">
@@ -81,21 +85,23 @@ The Data Label text can be formatted by specifying the property name from the da
         public string Month { get; set; }
         public double Celsius { get; set; }
     };
+
     public List<WeatherReport> ClimateData = new List<WeatherReport> {
-        new  WeatherReport { Month= "Jan", Celsius= 34 },
-        new  WeatherReport { Month= "Feb", Celsius= 36 },
-        new  WeatherReport { Month= "Mar", Celsius= 32 },
-        new  WeatherReport { Month= "Apr", Celsius= 35 },
-        new  WeatherReport { Month= "May", Celsius= 40 },
-        new  WeatherReport { Month= "Jun", Celsius= 38 },
-        new  WeatherReport { Month= "Jul", Celsius= 33 },
-        new  WeatherReport { Month= "Aug", Celsius= 37 },
-        new  WeatherReport { Month= "Sep", Celsius= 34 },
-        new  WeatherReport { Month= "Oct", Celsius= 31 },
-        new  WeatherReport { Month= "Nov", Celsius= 30 },
-        new  WeatherReport { Month= "Dec", Celsius= 29}
+        new  WeatherReport { Month = "Jan", Celsius = 34 },
+        new  WeatherReport { Month = "Feb", Celsius = 36 },
+        new  WeatherReport { Month = "Mar", Celsius = 32 },
+        new  WeatherReport { Month = "Apr", Celsius = 35 },
+        new  WeatherReport { Month = "May", Celsius = 40 },
+        new  WeatherReport { Month = "Jun", Celsius = 38 },
+        new  WeatherReport { Month = "Jul", Celsius = 33 },
+        new  WeatherReport { Month = "Aug", Celsius = 37 },
+        new  WeatherReport { Month = "Sep", Celsius = 34 },
+        new  WeatherReport { Month = "Oct", Celsius = 31 },
+        new  WeatherReport { Month = "Nov", Celsius = 30 },
+        new  WeatherReport { Month = "Dec", Celsius = 29}
     };
 }
+
 ```
 
-![Label Formatting in Blazor Sparkline Chart](images/Datalabels/blazor-sparkline-label-format.png)
\ No newline at end of file
+![Label Formatting in Blazor Sparkline Chart](images/Datalabels/blazor-sparkline-label-format.png)
diff --git a/blazor/sparkline/dimensions.md b/blazor/sparkline/dimensions.md
index 8625791385..4625dad121 100644
--- a/blazor/sparkline/dimensions.md
+++ b/blazor/sparkline/dimensions.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Dimensions in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about dimensions in Syncfusion Blazor Sparkline component and much more.
+description: Check out and learn how to set and customize dimensions in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,11 +9,12 @@ documentation: ug
 
 # Dimensions in Blazor Sparkline Component
 
-## Size for the container
+## Size for the Container
 
-The size of the [Blazor Sparkline Chart](https://www.syncfusion.com/blazor-components/blazor-sparkline) is determined by the container size, and it can be changed inline or via CSS as following.
+The size of the [Blazor Sparkline Chart](https://www.syncfusion.com/blazor-components/blazor-sparkline) is determined by its container. You can set the size inline or via CSS.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <div style="width:650px; height:350px;">
@@ -40,19 +41,21 @@ The size of the [Blazor Sparkline Chart](https://www.syncfusion.com/blazor-compo
         new  PopulationReport { Year= 2014, Population= 22507620 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with Container Size](./images/SparklineDimension/blazor-sparkline-chart-container-size.png)
 
 ## Size for Sparkline
 
-The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Width) and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Height) properties can be used to set the size of the Sparkline Chart.
+Set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Height) properties to define the Sparkline Chart's size.
 
-### In Pixel
+### In Pixels
 
-The Sparkline Chart can be sized in pixels.
+Specify the Sparkline Chart size in pixels.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline XName="Year"
@@ -62,17 +65,19 @@ The Sparkline Chart can be sized in pixels.
               Width="350px"
               Height="150px">
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#size-for-the-container) to know about the property value of the `populationData`.
+N> Refer to the [code block](#size-for-the-container) for the `populationData` property value.
 
 ![Changing Blazor Sparkline Chart Size in Pixel](./images/SparklineDimension/blazor-sparkline-chart-size-in-pixel.png)
 
 ### In Percentage
 
-By setting values in percentage, the Sparkline Chart gets their dimension with respect to their containers. For example, when the height is set to "50%", the Sparkline Chart is rendered to half of its container width.
+Set values in percentage to size the Sparkline Chart relative to its container. For example, setting height to "50%" renders the chart at half the container's height.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <div style="width:650px; height:350px;">
@@ -84,8 +89,9 @@ By setting values in percentage, the Sparkline Chart gets their dimension with r
                   Height="80%">
     </SfSparkline>
 </div>
+
 ```
 
-N> Refer to the [code block](#size-for-the-container) to know about the property value of the `populationData`.
+N> Refer to the [code block](#size-for-the-container) for the `populationData` property value.
 
-![Changing Blazor Sparkline Chart Size in Percentage](./images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png)
\ No newline at end of file
+![Changing Blazor Sparkline Chart Size in Percentage](./images/SparklineDimension/blazor-sparkline-chart-size-in-percentage.png)
diff --git a/blazor/sparkline/events.md b/blazor/sparkline/events.md
index 3718840d73..50bada0fd2 100644
--- a/blazor/sparkline/events.md
+++ b/blazor/sparkline/events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Events in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about events in Syncfusion Blazor Sparkline component and much more details.
+description: Check out and learn about available events and event handling in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,39 +9,42 @@ documentation: ug
 
 # Events in Blazor Sparkline Component
 
-This section describes the Sparkline component's events that will be triggered when appropriate actions are performed. The events should be provided to the Sparkline through the [SparklineEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html).
+This section describes the Sparkline component's events that are triggered when actions are performed. Events are provided through the [SparklineEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html) component.
 
 ## Loaded
 
 The `Loaded` event triggers after the Sparkline component has been loaded.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
     <SparklineEvents OnLoaded="@LoadedHandler"></SparklineEvents>
 </SfSparkline>
 
-@code{
+@code {
     public void LoadedHandler(System.EventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnPointRendering
 
-The [OnPointRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnPointRendering) event triggers before the point rendering.
+The [OnPointRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnPointRendering) event triggers before point rendering.
 
-|   Argument name    |   Description                                          |
-|--------------------| -------------------------------------------------------|
-|   PointIndex            |    Specifies the current point index.           |
-|   Fill     |    Specifies the point index color.       |
-|   Border               |   Specifies the color and the width of the point border. |
-|   Cancel               |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| PointIndex   | Specifies the current point index. |
+| Fill         | Specifies the point color. |
+| Border       | Specifies the color and width of the point border. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Column" Height="200px" Width="450px">
@@ -55,18 +58,20 @@ The [OnPointRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnPointRegionMouseClick
 
-The [OnPointRegionMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnPointRegionMouseClick) event triggers when the mouse click on the point region.
+The [OnPointRegionMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnPointRegionMouseClick) event triggers when the mouse clicks on the point region.
 
-|   Argument name    |   Description                                          |
-|--------------------| -------------------------------------------------------|
-|   PointerIndex     |    Specifies the Sparkline point index region.      |
-|   Cancel             |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| PointerIndex | Specifies the Sparkline point index region. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Column" Height="200px" Width="450px">
@@ -74,80 +79,86 @@ The [OnPointRegionMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.B
     <SparklineEvents OnPointRegionMouseClick="@PointRegionMouseClickHandler"></SparklineEvents>
 </SfSparkline>
 
-@code{
+@code {
     public void PointRegionMouseClickHandler(PointRegionEventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnResizing
 
 The [OnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnResizing) event triggers while resizing the window.
 
-|   Argument name      |   Description                          |
-|----------------------| ---------------------------------------|
-|   CurrentSize        |   Specifies the size of Sparkline.         |
-|   PreviousSize       |   Specifies the previous size of Sparkline. |
-|   Cancel             |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| CurrentSize  | Specifies the size of Sparkline. |
+| PreviousSize | Specifies the previous size of Sparkline. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
     <SparklineEvents OnResizing="@ResizeHandler"></SparklineEvents>
 </SfSparkline>
 
-@code{
+@code {
     public void ResizeHandler(SparklineResizeEventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnSeriesRendering
 
-The [OnSeriesRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnSeriesRendering) event triggers before rendering on each Sparkline series.
+The [OnSeriesRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnSeriesRendering) event triggers before rendering each Sparkline series.
 
-|   Argument name      |   Description                                                         |
-|----------------------| ----------------------------------------------------------------------|
-|   Border             |   Specifies the color and width of the series border.                         |
-|   Fill               |   Specifies the series fill color.                             |
-|   LineWidth          |   Specifies the series line width. |
-|   Cancel             |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| Border       | Specifies the color and width of the series border. |
+| Fill         | Specifies the series fill color. |
+| LineWidth    | Specifies the series line width. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
     <SparklineEvents OnSeriesRendering="@SeriesRenderingHandler"></SparklineEvents>
 </SfSparkline>
 
-@code{
+@code {
     public void SeriesRenderingHandler(SeriesRenderingEventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnMarkerRendering
 
-The [OnMarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnMarkerRendering) event triggers before rendering the Sparkline marker render.
+The [OnMarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnMarkerRendering) event triggers before rendering the Sparkline marker.
 
-|   Argument name      |   Description                                                         |
-|----------------------| ----------------------------------------------------------------------|
-|   Border             |   Specifies the color and the width of the marker border.                         |
-|   Fill               |   Specifies the marker fill color.                             |
-|   PointIndex          |   Specifies the marker point index. |
-|   X          |   Specifies the x axis of the marker. |
-|   Y          |   Specifies the y axis of the marker. |
-|   Size          |   Specifies the size of the marker. |
-|   Cancel             |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| Border       | Specifies the color and width of the marker border. |
+| Fill         | Specifies the marker fill color. |
+| PointIndex   | Specifies the marker point index. |
+| X            | Specifies the x axis of the marker. |
+| Y            | Specifies the y axis of the marker. |
+| Size         | Specifies the size of the marker. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
@@ -155,30 +166,32 @@ The [OnMarkerRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
     <SparklineEvents OnMarkerRendering="@MarkerRenderingHandler"></SparklineEvents>
 </SfSparkline>
 
-@code{
+@code {
     public void MarkerRenderingHandler(MarkerRenderingEventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
 
 ## OnDataLabelRendering
 
-The [OnDataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnDataLabelRendering) event triggers before rendering the Sparkline data label render.
+The [OnDataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html#Syncfusion_Blazor_Charts_SparklineEvents_OnDataLabelRendering) event triggers before rendering the Sparkline data label.
 
-|   Argument name      |   Description                                                         |
-|----------------------| ----------------------------------------------------------------------|
-|   Border             |   Specifies the color and the width of the data label border.                        |
-|   Fill               |   Specifies the series fill color of the data label.                             |
-|   PointIndex          |   Specifies the data label point index. |
-|   X          |   Specifies the x axis of the data label. |
-|   Y          |   Specifies the y axis of the data label. |
-|   Text          |   Specifies the content of the data label. |
-|   Color          |   Specifies the content color. |
-|   Cancel             |   Specifies the event cancel status. |
+| Argument name | Description |
+|--------------|-------------|
+| Border       | Specifies the color and width of the data label border. |
+| Fill         | Specifies the series fill color of the data label. |
+| PointIndex   | Specifies the data label point index. |
+| X            | Specifies the x axis of the data label. |
+| Y            | Specifies the y axis of the data label. |
+| Text         | Specifies the content of the data label. |
+| Color        | Specifies the content color. |
+| Cancel       | Specifies the event cancel status. |
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
@@ -187,10 +200,11 @@ The [OnDataLabelRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
     <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
 </SfSparkline>
 
-@code{
+@code {
     public void DataLabelRenderingHandler(DataLabelRenderingEventArgs args)
     {
         // Here you can customize the code.
     }
 }
+
 ```
diff --git a/blazor/sparkline/globalization.md b/blazor/sparkline/globalization.md
index 4a64471798..3848129e44 100644
--- a/blazor/sparkline/globalization.md
+++ b/blazor/sparkline/globalization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Globalization in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about globalization in Syncfusion Blazor Sparkline component and much more.
+description: Check out and learn about globalization support in the Syncfusion Blazor Sparkline component for better adaptability.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,18 +9,20 @@ documentation: ug
 
 # Globalization in Blazor Sparkline Component
 
-Globalization is the process of designing and developing a component that can work in different cultures or locations. In the Sparkline component, the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Format) property is used to globalize number, date, and time values. The tooltip in the following code example is globalized to currency format in the Deutsch culture.
+Globalization is the process of designing and developing a component to work in different cultures or locations. In the Sparkline component, the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Format) property is used to globalize number, date, and time values. The following example shows the tooltip globalized to currency format in the Deutsch culture.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new double[]{ 300.00, 600.00, 400.21, 100.20, 300.70, 200.04, 500.00 }" Height="200px" Width="350px" Format="C">
     <SparklineTooltipSettings TValue="double" Visible="true"></SparklineTooltipSettings>
 </SfSparkline>
+
 ```
 
-N> Refer [here](https://blazor.syncfusion.com/documentation/common/localization/#enable-localization-in-blazor-server-application) to configure localization for the Blazor server application, and [here](https://blazor.syncfusion.com/documentation/common/localization/#enable-localization-in-blazor-webassembly-application) for the Blazor web assembly application.
+N> Refer to the [localization documentation for Blazor Server](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-server-application) and [Blazor WebAssembly](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application) for configuration details.
 
-On successful configuration, the Sparkline will be rendered as following.
+On successful configuration, the Sparkline will be rendered as shown below.
 
 ![Localization in Blazor Sparkline Chart](./images/localization/blazor-sparkline-localization.png)
diff --git a/blazor/sparkline/localization.md b/blazor/sparkline/localization.md
index fa4c085d42..3a0c6f3f4b 100644
--- a/blazor/sparkline/localization.md
+++ b/blazor/sparkline/localization.md
@@ -1,21 +1,24 @@
 ---
 layout: post
-title: Localization in Blazor Sparkline Charts Component | Syncfusion 
-description: Learn about Localization in Blazor Sparkline Charts component of Syncfusion, and more details.
+title: Localization in Blazor Sparkline Charts Component | Syncfusion
+description: Learn about localization support in the Syncfusion Blazor Sparkline Charts component, including culture and RTL settings.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
 ---
 
-# Localization
+# Localization in Blazor Sparkline Charts Component
 
-The Sparkline Charts component supports localization. The default culture for localization is `en-US`. Change the culture using the `LoadCldrData` and the `setCulture` method.
+The Sparkline Charts component supports localization. The default culture is `en-US`. The culture can be changed using the `LoadCldrData` and `setCulture` methods.
 
-## Tooltip format
+## Tooltip Format
 
-The Sparkline Charts tooltip supports localization. The following code sample shows the tooltip text with currency format based on culture.
+The Sparkline Charts tooltip supports localization. The following example shows the tooltip text with currency format based on culture.
 
 ```cshtml
+
+@using Microsoft.JSInterop;
+
 <SfSparkline DataSource="@Numbers"
               Type="SparklineType.Line"
               Fill="#b2cfff"
@@ -23,50 +26,51 @@ The Sparkline Charts tooltip supports localization. The following code sample sh
               UseGroupingSeparator= "true"
               Height="200px" Width="350px"
               Format = "c0">
-                <SparklineContainerArea>
-                    <SparklineContainerAreaBorder Color="#033e96" Width="2"></SparklineContainerAreaBorder>
-                </SparklineContainerArea>
-                <SparklinePadding Left='20' Right='20' Bottom='20' Top='20'></SparklinePadding>
-                <SparklineTooltipSettings  Visible='true'></SparklineTooltipSettings>
+    <SparklineContainerArea>
+        <SparklineContainerAreaBorder Color="#033e96" Width="2"></SparklineContainerAreaBorder>
+    </SparklineContainerArea>
+    <SparklinePadding Left='20' Right='20' Bottom='20' Top='20'></SparklinePadding>
+    <SparklineTooltipSettings  Visible='true'></SparklineTooltipSettings>
 </SfSparkline>
 
 @code {
-    int[] Numbers={30000, 60000, 40000, 10000, 30000, 20000, 50000};
     [Inject]
     protected IJSRuntime JsRuntime { get; set; }
 
+    int[] Numbers = { 30000, 60000, 40000, 10000, 30000, 20000, 50000 };
+
     protected override void OnAfterRender() {
         this.JsRuntime.Ejs().LoadCldrData(new string[]{"ca-gregorian.json",
         "currencies.json","numbers.json","timeZoneNames.json"}).SetCulture("de");
     }
 }
-```
 
-![Sparkline Charts with localization](./images/localization/Localization.png)
+```
 
 ## Rtl
 
-If the `EnableRtl` property is set to true, then the Sparkline Charts will be rendered from right-to-left direction.
+If the `EnableRtl` property is set to true, the Sparkline Charts will render from right-to-left.
 
-The following example shows the Sparkline Charts render from "Right-to-left".
+The following example shows the Sparkline Charts rendered in right-to-left mode.
+
+```cshtml
 
 @using Microsoft.JSInterop;
 
-```cshtml
 <SfSparkline DataSource="@Numbers"
               Type="SparklineType.Line"
                Height="150px" Width="150px">
 </SfSparkline>
 
 @code {
-    int[] Numbers={0, 6, 4, 1, 3, 2, 5};
     [Inject]
     protected IJSRuntime JsRuntime { get; set; }
 
+    int[] Numbers = { 0, 6, 4, 1, 3, 2, 5 };
+
     protected override void OnAfterRender() {
         this.JsRuntime.Ejs().EnableRtl(true);
     }
 }
-```
 
-![Sparkline Charts with Rtl](./images/localization/Rtl.png)
\ No newline at end of file
+```
diff --git a/blazor/sparkline/markers.md b/blazor/sparkline/markers.md
index 6014b70487..24debf8d52 100644
--- a/blazor/sparkline/markers.md
+++ b/blazor/sparkline/markers.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Markers in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about markers in Syncfusion Blazor Sparkline component and much more details.
+description: Check out and learn about marker options and customization in the Syncfusion Blazor Sparkline component.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,57 +9,61 @@ documentation: ug
 
 # Markers in Blazor Sparkline Component
 
-Data markers are used to provide information about the data points in the Sparkline series.
+Data markers provide information about data points in the Sparkline series.
 
-## Adding markers
+## Adding Markers
 
-The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Visible) property in the [SparklineMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html) can be used to enable a marker by specifying a collection of special points. The following code example shows how to enable markers for all points.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Visible) property in [SparklineMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html) enables markers by specifying a collection of special points. The following example shows how to enable markers for all points.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px">
     <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }"></SparklineMarkerSettings>
     <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Marker](./images/marker/blazor-sparkline-marker.png)
 
-## Adding special point markers
+## Adding Special Point Markers
 
-The markers can be enabled for specific points as a collection. The following special points are applicable for markers.
-
-* [All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_All) - Markers for all points are enabled.
-* [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Start) - Markers for start points are enabled.
-* [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_End) - Markers for end points are enabled.
-* [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_High) - Markers for high points are enabled.
-* [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Low) - Markers for low points are enabled.
-* [Negative](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Negative) - Markers for negative points are enabled.
-* [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_None) - Markers for all points are disabled.
+Markers can be enabled for specific points as a collection. The following special points are applicable:
 
+* [All](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_All) – Markers for all points
+* [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Start) – Markers for start points
+* [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_End) – Markers for end points
+* [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_High) – Markers for high points
+* [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Low) – Markers for low points
+* [Negative](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_Negative) – Markers for negative points
+* [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.VisibleType.html#Syncfusion_Blazor_Charts_VisibleType_None) – Markers for all points are disabled
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="350px" HighPointColor="Blue" LowPointColor="Red">
     <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }"></SparklineMarkerSettings>
     <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
 ![Displaying High and Low Points Marker in Blazor Sparkline Chart](./images/marker/blazor-sparkline-high-low-point-marker.png)
 
-## Markers customization
+## Markers Customization
 
 The following properties can be used to customize markers:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Fill) - Specifies fill color for marker.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Opacity) - Specifies opacity of [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Fill) color for marker.
-* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Size) - Specifies marker size.
-* [SparklineMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerBorder.html) - Specifies color and width for marker border.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Fill) - Specifies fill color for marker
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Opacity) - Specifies opacity of marker [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Fill) color
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerSettings.html#Syncfusion_Blazor_Charts_SparklineMarkerSettings_Size) - Specifies marker size
+* [SparklineMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineMarkerBorder.html) - Specifies color and width for marker border
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Line" Height="200px" Width="450px">
@@ -69,6 +73,7 @@ The following properties can be used to customize markers:
     </SparklineMarkerSettings>
     <SparklineAxisSettings MinX="-1" MaxX="7" MaxY="7" MinY="-1"></SparklineAxisSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Custom Marker](./images/marker/blazor-sparkline-custom-marker.png)
diff --git a/blazor/sparkline/methods.md b/blazor/sparkline/methods.md
index ef0d7053cd..90b45526ca 100644
--- a/blazor/sparkline/methods.md
+++ b/blazor/sparkline/methods.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Methods in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about methods in Syncfusion Blazor Sparkline component and much more details.
+description: Learn about available methods in the Syncfusion Blazor Sparkline component, including how to refresh the chart.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,25 +9,27 @@ documentation: ug
 
 # Methods in Blazor Sparkline Component
 
-Using the `@ref` property, create an object for the Sparkline component and call the desired method.
+The `@ref` property can be used to create an object reference for the Sparkline component and call its methods.
 
 ## Refresh
 
-The `RefreshAsync` method helps to render the Sparkline component again.
+The `RefreshAsync` method re-renders the Sparkline component.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <button @onclick="RefreshCall">Refresh</button>
 <SfSparkline @ref="@Sparkline" DataSource="new int[]{ 3, 6, 4, 1, 3, 2, 5 }" Type="SparklineType.Area" Height="200px" Width="350px" Fill="#b2cfff" LineWidth="1">
 </SfSparkline>
 
-@code
-{
+@code {
     public SfSparkline<int> Sparkline { get; set; }
+
     public async Task RefreshCall()
     {
         await Sparkline.RefreshAsync();
     }
 }
+
 ```
\ No newline at end of file
diff --git a/blazor/sparkline/range-band.md b/blazor/sparkline/range-band.md
index 16a44264c5..f381a30170 100644
--- a/blazor/sparkline/range-band.md
+++ b/blazor/sparkline/range-band.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Range Band in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about range band in Syncfusion Blazor Sparkline component and much more.
+description: Explore and understand how to customize range bands in the Syncfusion Blazor Sparkline component for better visuals.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,14 +9,15 @@ documentation: ug
 
 # Range Band in Blazor Sparkline Component
 
-Range band represents the quality or improves the readability of a specific range for the Sparkline y-axis by specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_EndRange) properties in the [SparklineRangeBand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html) in the [SparklineRangeBandSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBandSettings.html).
+A range band represents a specific range on the Sparkline y-axis, improving readability or highlighting quality by specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_EndRange) properties in the [SparklineRangeBand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html) within [SparklineRangeBandSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBandSettings.html).
 
-The following properties are used for the customization of the range band:
+The following properties are used to customize the range band:
 
-* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_Color) - Specifies the color of the range band.
-* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_Opacity) - Specifies the opacity of [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_Color) in the range band.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_Color) – Specifies the color of the range band.
+* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_Opacity) – Specifies the opacity of the range band color.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline DataSource="new int[]{ 0, 6, 4, 1, 3, 2, 5 }" Height="150px" Width="150px" LineWidth="2" Fill="#0d3c9b">
@@ -29,6 +30,7 @@ The following properties are used for the customization of the range band:
         </SparklineRangeBand>
     </SparklineRangeBandSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Multiple Range Band](./images/rangeband/blazor-sparkline-chart-multiple-range-band.png)
diff --git a/blazor/sparkline/special-points-customization.md b/blazor/sparkline/special-points-customization.md
index c565353c22..c39e981410 100644
--- a/blazor/sparkline/special-points-customization.md
+++ b/blazor/sparkline/special-points-customization.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Special Points Customization in Blazor Sparkline Component
 
-## Add custom color for special points
+## Add Custom Color for Special Points
 
-The color of special points can be changed by specifying the corresponding property, and it is applicable for [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Line), [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Column) and [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Area) chart types in the Sparkline. The following properties are used to customize the special points.
+The color of special points can be changed by specifying the corresponding property. This is applicable for [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Line), [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Column), and [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_Area) chart types. The following properties are used to customize special points:
 
 * [StartPointColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_StartPointColor)
 * [EndPointColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_EndPointColor)
@@ -20,6 +20,7 @@ The color of special points can be changed by specifying the corresponding prope
 * [HighPointColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_HighPointColor)
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline XName="CarName" YName="Rating" Width="130px" Height="150px" TValue="CarRating" DataSource="CarRatings" Type="SparklineType.Column" ValueType="SparklineValueType.Category"
@@ -32,34 +33,38 @@ The color of special points can be changed by specifying the corresponding prope
         public string CarName { get; set; }
         public double Rating { get; set; }
     };
+
     public List<CarRating> CarRatings = new List<CarRating> {
-        new CarRating { CarName= "AUDI", Rating= 1 },
-        new CarRating { CarName= "BMW", Rating= 5 },
-        new CarRating { CarName= "BUICK", Rating= -1 },
-        new CarRating { CarName= "CETROEN", Rating= -6 },
-        new CarRating { CarName= "CHEVROLET", Rating= 0.01 },
-        new CarRating { CarName= "FIAT", Rating= 1 },
-        new CarRating { CarName= "FORD", Rating= -2 },
-        new CarRating { CarName= "HONDA", Rating= 7 },
-        new CarRating { CarName= "HYUNDAI", Rating= -9 },
-        new CarRating { CarName= "JEEP", Rating= 0.01 },
-        new CarRating { CarName= "KIA", Rating= -10 },
-        new CarRating { CarName= "MAZDA", Rating= 3 }
+        new CarRating { CarName = "AUDI", Rating = 1 },
+        new CarRating { CarName = "BMW", Rating = 5 },
+        new CarRating { CarName = "BUICK", Rating = -1 },
+        new CarRating { CarName = "CETROEN", Rating = -6 },
+        new CarRating { CarName = "CHEVROLET", Rating = 0.01 },
+        new CarRating { CarName = "FIAT", Rating = 1 },
+        new CarRating { CarName = "FORD", Rating = -2 },
+        new CarRating { CarName = "HONDA", Rating = 7 },
+        new CarRating { CarName = "HYUNDAI", Rating = -9 },
+        new CarRating { CarName = "JEEP", Rating = 0.01 },
+        new CarRating { CarName = "KIA", Rating = -10 },
+        new CarRating { CarName = "MAZDA", Rating = 3 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with Custom Point](images/SpecialPoints/blazor-sparkline-custom-point.png)
 
-## Tie point color
+## Tie Point Color
 
-To highlight the tie area of the Y-axis value, use the [TiePointColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_TiePointColor) property that is only applicable to the [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_WinLoss) type.
+To highlight the tie area of the Y-axis value, use the [TiePointColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_TiePointColor) property. This is only applicable to the [WinLoss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineType.html#Syncfusion_Blazor_Charts_SparklineType_WinLoss) type.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline Width="130px" Height="150px" Type="SparklineType.WinLoss" TiePointColor="blue" DataSource="new int[]{12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10}">
 </SfSparkline>
+
 ```
 
 ![Highlighting Tie Point Area in Blazor Sparkline Chart](images/SpecialPoints/blazor-sparkline-tie-point-color.png)
diff --git a/blazor/sparkline/user-interaction.md b/blazor/sparkline/user-interaction.md
index 2544e47057..20f54db852 100644
--- a/blazor/sparkline/user-interaction.md
+++ b/blazor/sparkline/user-interaction.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: User Interaction in Blazor Sparkline Component | Syncfusion
-description: Checkout and learn here all about user interaction in Syncfusion Blazor Sparkline component and more.
+description: Check out and learn here all about user interaction in Syncfusion Blazor Sparkline component and more.
 platform: Blazor
 control: Sparkline Charts
 documentation: ug
@@ -9,13 +9,14 @@ documentation: ug
 
 # User Interaction in Blazor Sparkline Component
 
-The Sparkline's user interaction features include the tooltip and the tracker line.
+User interaction features in the Sparkline include the tooltip and the tracker line.
 
 ## Tooltip
 
-When the mouse is hovered over a data point, the Sparkline provides the option to display details about the value of the data point via a tooltip. The following code example shows how to enable Sparkline's tooltip with a custom format.
+When the mouse hovers over a data point, the Sparkline can display details about the value of the data point via a tooltip. The following example shows how to enable the Sparkline tooltip with a custom format.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
@@ -31,14 +32,16 @@ When the mouse is hovered over a data point, the Sparkline provides the option t
         public string Day { get; set; }
         public double Hour { get; set; }
     };
+
     public List<WorkLog> WorkLogs = new List<WorkLog> {
-        new WorkLog {Day= "Mon", Hour= 3 },
-        new WorkLog {Day= "Tue", Hour= 5 },
-        new WorkLog {Day= "Wed", Hour= 2 },
-        new WorkLog {Day= "Thu", Hour= 4 },
-        new WorkLog {Day= "Fri", Hour= 6 }
+        new WorkLog { Day = "Mon", Hour = 3 },
+        new WorkLog { Day = "Tue", Hour = 5 },
+        new WorkLog { Day = "Wed", Hour = 2 },
+        new WorkLog { Day = "Thu", Hour = 4 },
+        new WorkLog { Day = "Fri", Hour = 6 }
     };
 }
+
 ```
 
 ![Blazor Sparkline Chart with Tooltip](images/UserInteraction/blazor-sparkline-tooltip.png)
@@ -47,14 +50,15 @@ When the mouse is hovered over a data point, the Sparkline provides the option t
 
 The following properties can be used to customize the Sparkline tooltip:
 
-* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Fill) - Specifies fill color for the tooltip.
-* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Format) - Specifies custom content of tooltip by assigning the properties from the datasource.
-* [SparklineTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipTextStyle.html) - Specifies font family, font style, font weight, color, opacity and size of the tooltip content.
-* [SparklineTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipBorder.html) - To customize border width and color of the tooltip.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Fill) – Specifies fill color for the tooltip
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Format) – Specifies custom content of the tooltip by assigning the properties from the datasource.
+* [SparklineTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipTextStyle.html) – Specifies font family, font style, font weight, color, opacity and size of the tooltip content
+* [SparklineTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipBorder.html) – Customize border width and color of the tooltip.
 
-The following code example shows customizing tooltip format, text color and fill color.
+The following example shows customizing tooltip format, text color, and fill color.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
@@ -65,17 +69,19 @@ The following code example shows customizing tooltip format, text color and fill
         <SparklineTooltipBorder Color="red" Width="1"></SparklineTooltipBorder>
     </SparklineTooltipSettings>
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#tooltip) to know about the property value of **WorkLogs**.
+N> Refer to the [code block](#tooltip) for the **WorkLogs** property value.
 
 ![Blazor Sparkline Chart with Custom Tooltip](images/UserInteraction/blazor-sparkline-custom-tooltip.png)
 
 ### Tooltip Template
 
-The tooltip can be rendered as a custom component by specifying the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Template) property in the [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html) that accepts one or more UI elements as an input and renders them as a part of the tooltip rendering.
+The tooltip can be rendered as a custom component by specifying the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Template) property in [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html), which accepts one or more UI elements as input and renders them as part of the tooltip.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline Width="500" Height="200" TValue="WorkLog" DataSource="WorkLogs" XName="Day" YName="Hour" Fill="blue" ValueType="SparklineValueType.Category">
@@ -99,17 +105,19 @@ The tooltip can be rendered as a custom component by specifying the [Template](h
         </Template>
     </SparklineTooltipSettings>
 </SfSparkline>
+
 ```
 
-N> Refer to the [code block](#tooltip) to know about the property value of the **WorkLogs**.
+N> Refer to the [code block](#tooltip) for the **WorkLogs** property value.
 
 ![Blazor Sparkline Chart with Tooltip Template](images/UserInteraction/blazor-sparkline-tooltip-template.png)
 
 ## Track Line
 
-The track line tracks data points that are closest to the mouse position or touch interaction, and it can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Visible) property to **true** in the [SparklineTrackLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html). The track line color and width can be customized using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Width) properties in the [SparklineTrackLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html).
+The track line highlights data points closest to the mouse position or touch interaction. Enable it by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Visible) property to **true** in [SparklineTrackLineSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html). The track line color and width can be customized using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTrackLineSettings.html#Syncfusion_Blazor_Charts_SparklineTrackLineSettings_Width) properties.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfSparkline Width="500px" Height="200px"
@@ -121,6 +129,7 @@ The track line tracks data points that are closest to the mouse position or touc
         </SparklineTrackLineSettings>
     </SparklineTooltipSettings>
 </SfSparkline>
+
 ```
 
 ![Blazor Sparkline Chart with Track Line](images/UserInteraction/blazor-sparkline-with-track-line.png)
diff --git a/blazor/speeddial/accessibility.md b/blazor/speeddial/accessibility.md
index ca05bca143..ee3882f8ae 100644
--- a/blazor/speeddial/accessibility.md
+++ b/blazor/speeddial/accessibility.md
@@ -7,22 +7,22 @@ control: SpeedDial
 documentation: ug
 ---
 
-# Accessibility in Blazor SpeedDial component
+# Accessibility in Blazor Speed Dial component
 
-The Blazor Speed Dial component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Speed Dial component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
-The accessibility compliance for the Blazor Speed Dial component is outlined below.
+The accessibility compliance for the Blazor Speed Dial component is outlined below. The badges indicate whether each criterion is fully supported.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
 
 <style>
     .post .post-content img {
@@ -31,29 +31,29 @@ The accessibility compliance for the Blazor Speed Dial component is outlined bel
     }
 </style>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor Speed Dial component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Speed Dial component:
+The Blazor Speed Dial component follows relevant [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Speed Dial component:
 
 | Attributes | Purpose  |
 | ------------ | ----------------------- |
-| `role=menu` | Specifies that the Speed Dial item has a submenu.|
-| `role=menuitem` | Indicates an actionable item within the Speed Dial submenu. |
-| `aria-label` | Indicates the Speed Dial Popup item text. |
-| `aria-expanded` | It indicates whether the Speed Dial current state is expanded or collapsed. |
-| `aria-haspopup` | It indicates whether the Speed Dial has popup items or not. |
-| `aria-controls` | Attribute is set to the Speed Dial button and it points to the corresponding content. |
-| `aria-disabled` | Indicates the state of menu item whether it is disabled. |
+| `role=menu` | Identifies the popup that contains the Speed Dial action items. |
+| `role=menuitem` | Identifies an actionable item within the Speed Dial popup. |
+| `aria-label` | Provides an accessible name for the Speed Dial popup or items. |
+| `aria-expanded` | Indicates whether the Speed Dial popup is expanded or collapsed. |
+| `aria-haspopup` | Indicates that the trigger button opens a popup with menu items. |
+| `aria-controls` | References the popup element controlled by the trigger button. |
+| `aria-disabled` | Indicates that a menu item is disabled and unavailable for interaction. |
 
 ## Keyboard interaction
 
-The Blazor Speed Dial component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Speed Dial component.
+The Blazor Speed Dial component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction) guidelines, making it accessible for users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported:
 
 | Windows | Mac | Actions |
 |------------|-------------------| --- |
@@ -68,10 +68,10 @@ The Blazor Speed Dial component followed the [keyboard interaction](https://www.
 
 ## Ensuring accessibility
 
-The Blazor Speed Dial component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Speed Dial component’s accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright-based automated tests.
 
 The accessibility compliance of the Blazor Speed Dial component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/speeddial) in a new window to evaluate the accessibility of the Blazor Speed Dial component with accessibility tools.
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
\ No newline at end of file
diff --git a/blazor/speeddial/display-modes.md b/blazor/speeddial/display-modes.md
index 7df50f086f..facdcbbb0a 100644
--- a/blazor/speeddial/display-modes.md
+++ b/blazor/speeddial/display-modes.md
@@ -9,23 +9,24 @@ documentation: ug
 
 # Display Modes in Blazor Speed Dial Component
 
-The action items in Blazor Speed Dial can be displayed in `Linear` and `Radial` display modes by setting [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property.
+The action items in the Blazor Speed Dial can be displayed in Linear or Radial modes by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. By default, Speed Dial items are displayed in Linear mode.
 
 ## Linear display mode
 
-In `Linear` display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in `Linear` mode.
+In `Linear` display mode, Speed Dial action items are displayed in a list-like layout either horizontally or vertically, based on the direction.
 
 ### Direction
 
-You can open the action items on the top, left, up, and down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position)of the Speed Dial.
+You can open the action items to the left, right, up, or down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position)
+of the Speed Dial.
 
 The `Linear` directions of Speed Dial are as follows:
 
 * Left - Action items are displayed on the left side of the button.
 * Right - Action items are displayed on the right side of the button.
-* Up - Action items are displayed on the top of the button.
-* Down - Action items are displayed on the bottom of the button.
-* Auto - Action items display direction auto calculated based on `Position` of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top.
+* Up - Action items are displayed above the button.
+* Down - Action items are displayed below the button.
+* Auto - The direction is automatically calculated based on the Speed Dial `Position` (for example, if positioned at the bottom-right, items open upward).
 
 ```cshtml
 
@@ -41,8 +42,8 @@ The `Linear` directions of Speed Dial are as follows:
 
 ```
 
-![Blazor Speed Dial Linear Mode](./images/Blazor-SpeedDial-LinearMode.png)
+![Linear display mode with items opening to the left](./images/Blazor-SpeedDial-LinearMode.png)
 
 ## Radial display mode (Radial Menu)
 
-In `Radial` mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
+In `Radial` mode, Speed Dial action items are displayed in a circular pattern similar to a radial menu. For more details about Radial mode, see the getting started guide [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
\ No newline at end of file
diff --git a/blazor/speeddial/events.md b/blazor/speeddial/events.md
index cb27531f48..2edba8bb37 100644
--- a/blazor/speeddial/events.md
+++ b/blazor/speeddial/events.md
@@ -13,7 +13,7 @@ This section describes the Speed Dial events that will be triggered when appropr
 
 ## Item clicked
 
-The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action.
+The Speed Dial component raises the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action.
 
 {% tabs %}
 {% highlight razor %}
@@ -40,7 +40,7 @@ The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/
 
 ## Created
 
-The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event when SpeedDial Component rendering is completed.
+The Speed Dial component raises the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event after the component has completed rendering. Use this event to run initialization logic, logging, or configuration that depends on the rendered instance.
 
 {% tabs %}
 {% highlight razor %}
@@ -67,7 +67,7 @@ The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/b
 
 ## Opening
 
-The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) argument before the SpeedDial popup is opened.
+The Speed Dial component raises the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup opens. Use this event to prepare data, adjust items, or cancel opening based on conditions by setting the Cancel property in the event arguments.
 
 {% tabs %}
 {% highlight razor %}
@@ -94,7 +94,7 @@ The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/b
 
 ## Opened
 
-The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) argument when SpeedDial popup is opened.
+The Speed Dial component raises the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) after the Speed Dial popup is opened. Use this event to run logic that depends on the popup being visible, such as focusing elements or tracking analytics.
 
 {% tabs %}
 {% highlight razor %}
@@ -121,7 +121,7 @@ The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/bl
 
 ## Closing
 
-The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) argument before the SpeedDial popup is closed.
+The Speed Dial component raises the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup closes. Use this event to validate state, save changes, or cancel closing by setting the Cancel property in the event arguments.
 
 {% tabs %}
 {% highlight razor %}
@@ -148,7 +148,7 @@ The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/b
 
 ## Closed
 
-The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) argument when SpeedDial popup is closed.
+The Speed Dial component raises the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html) after the Speed Dial popup is closed. Use this event to perform cleanup or post-close actions.
 
 {% tabs %}
 {% highlight razor %}
@@ -175,7 +175,7 @@ The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/bl
 
 ## Item rendered
 
-The speed dial Component triggers the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument for each `SpeedDialItem` once its rendered.
+The Speed Dial component raises the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) for each SpeedDialItem after it is rendered. Use this event to customize item UI or attributes once the DOM is available.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/speeddial/getting-started-webapp.md b/blazor/speeddial/getting-started-webapp.md
index 32744e327e..affe38fab5 100644
--- a/blazor/speeddial/getting-started-webapp.md
+++ b/blazor/speeddial/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor SpeedDial in Blazor Web App
 
-This section briefly explains about how to include `Blazor SpeedDial` component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section explains how to add the Blazor Speed Dial component to a Blazor Web App using Visual Studio or Visual Studio Code.
 
 {% tabcontents %}
 
@@ -21,17 +21,17 @@ This section briefly explains about how to include `Blazor SpeedDial` component
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
+Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating the Blazor Web App.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor SpeedDial** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the Blazor Speed Dial component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If you use the WebAssembly or Auto render modes in the Blazor Web App, you need to install the Syncfusion Blazor NuGet packages in the client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available on NuGet.org. For the full list of available packages, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -54,11 +54,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a Blazor Web App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the Blazor Web App.
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, in a Blazor Web App with the Auto interactive render mode, run the following commands:
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,11 +70,11 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
+N> For more information on creating a Blazor Web App with various interactive modes and locations, see [Blazor Web App interactive modes and locations](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
 * Ensure you’re in the project root directory where your `.csproj` file is located.
@@ -102,10 +102,10 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 | Interactive Render Mode | Description |
 | -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+| WebAssembly or Auto | Open **~/_Imports.razor** from the client project. |
+| Server | Open **~/_Imports.razor** (typically in the Components folder). |
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace .
+Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Buttons` namespace .
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+Now register the Syncfusion Blazor service in the **~/Program.cs** file of the Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion Blazor service in both **~/Program.cs** files (server and client) of the Blazor Web App.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -175,7 +175,7 @@ var app = builder.Build();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
+The theme stylesheet and script are provided via NuGet as [static web assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet reference in the head and the script reference at the end of the body in **~/Components/App.razor** as shown below. The script enables client-side interactivity for Syncfusion components.
 
 ```html
 <head>
@@ -203,7 +203,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial compon
 |  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If the interactivity location is set to Global and the render mode is Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -294,4 +294,4 @@ The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpjWAjTARQyWoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-event-sample.png)" %}
 
-N> You can also explore our [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button.
\ No newline at end of file
+N> Explore the [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button.
\ No newline at end of file
diff --git a/blazor/speeddial/getting-started.md b/blazor/speeddial/getting-started.md
index c7c5c837b0..553862ee71 100644
--- a/blazor/speeddial/getting-started.md
+++ b/blazor/speeddial/getting-started.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor SpeedDial Component
 
-This section briefly explains about how to include Blazor SpeedDial component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to add the Blazor SpeedDial component to a Blazor WebAssembly application using Visual Studio or Visual Studio Code.
 
 To get start quickly with SpeedDial Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SpeedDial) sample.
 
@@ -26,11 +26,11 @@ To get start quickly with SpeedDial Component using Blazor, you can check on thi
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a Blazor WebAssembly app using either the [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
-To add **Blazor SpeedDial** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the Blazor SpeedDial component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. 
 
 {% endtabcontent %}
 
@@ -53,9 +53,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a Blazor WebAssembly app using either the [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly application using the following commands in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -71,8 +71,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Buttons and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the current directory is the project root where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies.
 
 {% tabs %}
 
@@ -86,7 +86,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -138,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn multiple methods to reference themes in a Blazor application, including [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). The example below uses the bootstrap5 theme, which also provides the e-icons set used by SpeedDial.
 
 ## Add Blazor SpeedDial component
 
@@ -161,13 +161,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial compon
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SpeedDial component will render in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfjigtfqnDNcxJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-component.png)" %}
 
 ## Linear and radial display modes
 
-You can use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to either display the menu in linear order like a list or like a radial menu in radial (circular) direction.
+Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to display action items either in a linear list or as a radial (circular) menu.
 
 {% tabs %}
 {% highlight razor %}
@@ -197,7 +197,7 @@ You can use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ## Item clicked event
 
-The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [`SpeedDialItemEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action.
+The SpeedDial control triggers the [`ItemClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [`SpeedDialItemEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) when an action item is clicked. Use this event to perform the required action.
 
 {% tabs %}
 {% highlight razor %}
@@ -223,4 +223,4 @@ The speed dial control triggers the [`ItemClicked`](https://help.syncfusion.com/
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpjWAjTARQyWoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SpeedDial Component](./images/blazor-speeddial-event-sample.png)" %}
 
-N> You can also explore our [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button.
+N> Explore the [Blazor Speed Dial Button example](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities) that shows how to render and configure the button.
diff --git a/blazor/speeddial/items.md b/blazor/speeddial/items.md
index 963f021cfb..a5d4d84c5d 100644
--- a/blazor/speeddial/items.md
+++ b/blazor/speeddial/items.md
@@ -9,23 +9,23 @@ documentation: ug
 
 # Items in Blazor Speed Dial Component
 
-The action items in Blazor Speed Dial can be added by using [SpeedDialItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html) tag directive.
+Add action items to the Blazor SpeedDial using the [SpeedDialItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html) tag directive. Items can display text, icons, or both, and support disabling, tooltips, animation, and templating.
 
 | Fields | Type | Description |
 |------|------|-------------|
-| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) | `string` | Defines the text content of SpeedDialItem. |
-| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) | `string` | Defines one or more CSS classes to include an icon or image in speed dial item. |
-| [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) | `boolean` | Defines whether to enable or disable the SpeedDialItem. |
-| [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_ID) | `string` | Defines a unique value for the SpeedDialItem which can be used to identify the item in event args. |
-| [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) | `string` | Defines the title of SpeedDialItem to display tooltip. |
+| [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) | `string` | Defines the text content of the SpeedDialItem. |
+| [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) | `string` | Defines one or more CSS classes to include an icon or image in a speed dial item. |
+| [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) | `bool` | Enables or disables the SpeedDialItem. |
+| [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_ID) | `string` | Defines a unique value for the SpeedDialItem that can be used to identify the item in event arguments. |
+| [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) | `string` | Defines the title of the SpeedDialItem to display a tooltip. |
 
 ## Icons in speeddial items
 
-You can customize the icon and text of Speed Dial action items using [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties.
+Customize the icon and text of speed dial action items using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties.
 
 ### Icon only
 
-You can show icon only in SpeedDial items by setting [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) property. You can show tooltip on hover to show additional details to end-user by setting [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property.
+Show only an icon in SpeedDial items by setting the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) property. To provide additional details, display a tooltip on hover or focus by setting the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property.
 
 ```cshtml
 
@@ -41,11 +41,11 @@ You can show icon only in SpeedDial items by setting [IconCss](https://help.sync
 
 ```
 
-![Blazor Speed Dial with Icon](./images/Blazor-SpeedDial-Icon.png)
+![Blazor SpeedDial with icons](./images/Blazor-SpeedDial-Icon.png)
 
 ### Text Only
 
-You can show only text in Speed Dial items by setting [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) property.
+Show only text in SpeedDial items by setting the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) property.
 
 ```cshtml
 
@@ -61,11 +61,11 @@ You can show only text in Speed Dial items by setting [Text](https://help.syncfu
 
 ```
 
-![Blazor Speed Dial with Text](./images/Blazor-SpeedDial-Text.png)
+![Blazor SpeedDial with text](./images/Blazor-SpeedDial-Text.png)
 
 ### Icon with Text
 
-You can show icon along with text in Speed Dial items by setting [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties.
+Show an icon along with text in SpeedDial items by setting both the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_IconCss) and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Text) properties.
 
 ```cshtml
 
@@ -81,11 +81,11 @@ You can show icon along with text in Speed Dial items by setting [IconCss](https
 
 ```
 
-![Blazor Speed Dial with Icon and Text](./images/Blazor-SpeedDial-Iconwithtext.png)
+![Blazor SpeedDial with icon and text](./images/Blazor-SpeedDial-Iconwithtext.png)
 
 ### Disabled
 
-You can disable Speed Dial items by setting [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) property as `true`.
+Disable SpeedDial items by setting the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Disabled) property to `true`.
 
 ```cshtml
 
@@ -101,7 +101,7 @@ You can disable Speed Dial items by setting [Disabled](https://help.syncfusion.c
 
 ```
 
-![Blazor Speed Dial with Disabled](./images/Blazor-SpeedDial-DisabledItem.png)
+![Blazor SpeedDial with a disabled item](./images/Blazor-SpeedDial-DisabledItem.png)
 
 ## Animation
 
@@ -124,17 +124,17 @@ Below example demonstrates the Speed Dial items with applied Zoom effect.
 
 ```
 
-![Blazor Speed Dial Animation](./images/Blazor-SpeedDial-Animation.png)
+![Blazor SpeedDial animation](./images/Blazor-SpeedDial-Animation.png)
 
 ## Template
 
-The Speed Dial supports to customize the action items and entire pop-up container by setting [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) and [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) tag directive. For more details about templates, check out the link [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
+The Speed Dial supports customizing both the action items and the popup container using the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) and [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) tag directives. For more details about templates, check the guidance [here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
 
 ## HTML attribute
 
-The Blazor Speed Dial items support adding custom HTML attributes with [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_HtmlAttributes) property to customize the items. You can add them as inline attributes or use the `@attributes` directive.
+Blazor Speed Dial items support adding custom HTML attributes via the [HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_HtmlAttributes) property to customize items. Add them as inline attributes or use the `@attributes` directive.
 
-Below example demonstrates the Speed Dial items with HTML attributes.
+The following example shows SpeedDial items with HTML attributes.
 
 ```cshtml
 
@@ -150,4 +150,4 @@ Below example demonstrates the Speed Dial items with HTML attributes.
 
 ```
 
-![Blazor Speed Dial With HTML attributes](./images/Blazor-SpeedDial-HTML-Attribute.png)
\ No newline at end of file
+![Blazor SpeedDial with HTML attributes](./images/Blazor-SpeedDial-HTML-Attribute.png)
\ No newline at end of file
diff --git a/blazor/speeddial/modal.md b/blazor/speeddial/modal.md
index 679c3c2453..f5c3c9d233 100644
--- a/blazor/speeddial/modal.md
+++ b/blazor/speeddial/modal.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Modal in Blazor SpeedDial Component
 
-You can use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_IsModal) property to set the Speed Dial as modal which adds an overlay to prevent the background interaction.
+Use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_IsModal) property to enable modal behavior for the SpeedDial. When enabled, the component displays an overlay while the action items are open, preventing interaction with background content and keeping focus on the speed dial actions.
 
 {% tabs %}
 {% highlight razor %}
@@ -27,4 +27,4 @@ You can use the [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor SpeedDial with IsModal](./images/Blazor-SpeedDial-ModalProperty.png)
+![Blazor SpeedDial with IsModal](./images/Blazor-SpeedDial-ModalProperty.png)
\ No newline at end of file
diff --git a/blazor/speeddial/positions.md b/blazor/speeddial/positions.md
index 2c13d7233a..4d6c049169 100644
--- a/blazor/speeddial/positions.md
+++ b/blazor/speeddial/positions.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Positions in Blazor Speed Dial Component
 
-The Speed dial Component can be positioned anywhere on the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position) property. If the `Target` is not defined, then Speed Dial is positioned based on the browser viewport.
+The SpeedDial component can be positioned anywhere within the specified [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Target) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position) property. If no `Target` is defined, the SpeedDial is positioned relative to the browser viewport.
 
-The position values of Speed Dial are as follows:
+The available position values for the SpeedDial are:
 * TopLeft
 * TopCenter
 * TopRight
@@ -40,7 +40,7 @@ The position values of Speed Dial are as follows:
 
 ## Opens on hover
 
-You can open the Speed Dial action items on mouse hover by setting the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property as true.
+Open the SpeedDial action items on mouse hover by setting the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to `true`.
 
 ```cshtml
 
@@ -60,8 +60,7 @@ You can open the Speed Dial action items on mouse hover by setting the [OpensOnH
 
 ## Programmatically show/hide
 
-You can open/close the Speed Dial action items programmatially using [ShowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ShowAsync) and 
-[HideAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_HideAsync) methods.
+Open or close the SpeedDial action items programmatically using the [ShowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ShowAsync) and [HideAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_HideAsync) methods. These are asynchronous methods and should be awaited when invoked in an async context.
 
 Below example demonstrates open/close action items on button click.
 
@@ -100,7 +99,7 @@ Below example demonstrates open/close action items on button click.
 
 ## Programmatically refresh the position
 
-You can refresh the position of the Speed Dial using [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_RefreshPositionAsync) method when the `Target`position is changed.
+Refresh the position of the SpeedDial using the [RefreshPositionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_RefreshPositionAsync) method when the `Target` position changes. This asynchronous method should be awaited in an async context.
 
 ```cshtml
 
diff --git a/blazor/speeddial/radial-menu.md b/blazor/speeddial/radial-menu.md
index 5360f5ec4f..8159f2a050 100644
--- a/blazor/speeddial/radial-menu.md
+++ b/blazor/speeddial/radial-menu.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Radial Menu in Blazor Speed Dial Component
 
-The action items in Blazor Speed Dial can be displayed in a circular patter like a radial menu by setting [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. You can customize the `Direction`, `StartAngle`, `EndAngle` and `Offset` by setting [SpeedDialRadialSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html) tag directive.
+Display Speed Dial action items in a circular pattern like a radial menu by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property to radial. Customize the `Direction`, `StartAngle`, `EndAngle`, and `Offset` using the [SpeedDialRadialSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html) tag directive.
 
 ## Radial Menu direction
 
-You can open the action items in either clockwise or anticlockwise by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_Direction) property. The default value is `Auto` where the action items are displayed based on the `Position` property of the Speed Dial.
+Open the action items in either a clockwise or an anticlockwise direction by setting the [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_Direction) property. The default value is `Auto`, which determines the arc based on the Speed Dial `Position`.
 
 ```cshtml
 
@@ -30,15 +30,15 @@ You can open the action items in either clockwise or anticlockwise by setting [D
 
 ```
 
-![Blazor Speed Dial Radial Mode](./images/Blazor-SpeedDial-RadialMenu.png)
+![Blazor SpeedDial radial mode](./images/Blazor-SpeedDial-RadialMenu.png)
 
 ## Start and end angle
 
-You can modify the start and end angle of action items by setting [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_EndAngle) properties. If the angle is not defined, the action items are displayed based on the `Position` property of the Speed Dial.
+Modify the start and end angles of the action items using the [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_EndAngle) properties (in degrees). If angles are not defined, the arc is determined by the Speed Dial `Position`.
 
-The SpeedDial angle starts with `0` degree in the right side and increases in the clockwise direction.
+The Speed Dial angle origin is 0° at the right side and increases in the clockwise direction.
 
-![Blazor Speed Dial Radial Angle](./images/Blazor-RadialAngle.png)
+![Blazor SpeedDial radial angles](./images/Blazor-RadialAngle.png)
 
 
 ```cshtml
@@ -56,11 +56,11 @@ The SpeedDial angle starts with `0` degree in the right side and increases in th
 
 ```
 
-![Blazor Speed Dial Angles](./images/Blazor-SpeedDial-Angles.png)
+![Blazor Speed Dial angles](./images/Blazor-SpeedDial-Angles.png)
 
 ## Offset
 
-You can modify the offset distance between action items and Speed Dial button using [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_OffSet) property.
+Adjust the distance between the Speed Dial button and its action items using the [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialRadialSettings.html#Syncfusion_Blazor_Buttons_SpeedDialRadialSettings_OffSet) property.
 
 ```cshtml
 
@@ -77,4 +77,4 @@ You can modify the offset distance between action items and Speed Dial button us
 
 ```
 
-![Blazor Speed Dial Offset](./images/Blazor-SpeedDial-Offset.png)
+![Blazor SpeedDial radial offset](./images/Blazor-SpeedDial-Offset.png)
\ No newline at end of file
diff --git a/blazor/speeddial/styles.md b/blazor/speeddial/styles.md
index da7f40ad40..7c55b890f3 100644
--- a/blazor/speeddial/styles.md
+++ b/blazor/speeddial/styles.md
@@ -9,15 +9,15 @@ documentation: ug
 
 # Styles in Blazor SpeedDial Component
 
-This section briefs different ways to style SpeedDial Component.
+This section describes the different ways to style the SpeedDial component and configure its icons, text, states, and appearance.
 
 ## SpeedDial button
 
-You can customize the icon and text of Blazor SpeedDial component using [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties.
+Customize the icon and text of the Blazor SpeedDial component using the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss), and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties. Icon classes (e-icons) are provided by the selected theme.
 
 ### SpeedDial with Icon
 
-You can use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss) and [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) properties to show icons in speed dial button. You can also show tooltip on hover to show additional details to end-user by setting `title` attribute.
+Use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss) and [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) properties to show icons in the speed dial button. To provide additional context, show a tooltip on hover by setting the `title` attribute.
 
 {% tabs %}
 {% highlight razor %}
@@ -39,7 +39,7 @@ You can use the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.B
 
 ### SpeedDial with Text
 
-You can show text only in SpeedDial button by setting [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) property without setting icon properties.
+Show text only in the SpeedDial button by setting the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) property without specifying icon properties.
 
 {% tabs %}
 {% highlight razor %}
@@ -61,7 +61,7 @@ You can show text only in SpeedDial button by setting [Content](https://help.syn
 
 ### SpeedDial with Icon and Text
 
-You show icon and text in Blazor Speed Dial Button using [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss) and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties together.
+Show both an icon and text in the Blazor SpeedDial button by setting the [OpenIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpenIconCss), [CloseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CloseIconCss), and [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Content) properties together.
 
 {% tabs %}
 {% highlight razor %}
@@ -83,7 +83,7 @@ You show icon and text in Blazor Speed Dial Button using [OpenIconCss](https://h
 
 ## Disabled
 
-You can enable or disable the Speed Dial Component using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Disabled) property.
+Enable or disable the Speed Dial component using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Disabled) property. When disabled, the floating action button and its interactions are unavailable.
 
 {% tabs %}
 {% highlight razor %}
@@ -105,13 +105,13 @@ You can enable or disable the Speed Dial Component using [Disabled](https://help
 
 ## CssClass
 
-The Blazor Speed Dial supports the following predefined styles that can be defined using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property. You can customize by setting the `CssClass` property with the below defined class.
+Apply predefined visual styles using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property. Assign one of the following CSS classes to change the appearance.
 
 | CssClass | Description |
 | -------- | -------- |
 | e-primary | Used to represent a primary action. |
-| e-outline |  Used to represent an appearance of button with outline. |
-| e-info |  Used to represent an informative action. |
+| e-outline | Used to render the button with an outline appearance. |
+| e-info | Used to represent an informative action. |
 | e-success | Used to represent a positive action. |
 | e-warning | Used to represent an action with caution. |
 | e-danger | Used to represent a negative action. |
@@ -136,7 +136,7 @@ The Blazor Speed Dial supports the following predefined styles that can be defin
 
 ## Visible
 
-You can set the Speed Dial Component to visible/hidden state using [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Visible) property.
+Control the visibility of the Speed Dial component using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Visible) property. Set it to false to render the component in a hidden state.
 
 {% tabs %}
 {% highlight razor %}
@@ -156,7 +156,7 @@ You can set the Speed Dial Component to visible/hidden state using [Visible](htt
 
 ## Tooltip
 
-You can show tooltip on hover to show additional details to end-user by setting [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property to speed dial items.
+Show a tooltip on hover to provide additional details by setting the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItem.html#Syncfusion_Blazor_Buttons_SpeedDialItem_Title) property for speed dial items. Tooltips are especially useful when using icon-only items.
 
 {% tabs %}
 {% highlight razor %}
@@ -176,7 +176,7 @@ You can show tooltip on hover to show additional details to end-user by setting
 
 ## Opens on hover
 
-You can use [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to open actions items on hover itself. By default action items displayed only when clicking the speed dial button.
+Use the [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_OpensOnHover) property to open action items on hover. By default, action items open on click.
 
 {% tabs %}
 {% highlight razor %}
@@ -198,7 +198,7 @@ You can use [OpensOnHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
 ## Customized icon
 
-You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property to customize the appearance of the speedDial component in its default primary state. Below example demonstrates the `cssClass` property usage in speedDial.
+Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_CssClass) property to customize the appearance of the SZpeedDial component in its default state. Below example below demonstrates the `cssClass` property usage in speedDial.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/speeddial/template.md b/blazor/speeddial/template.md
index c7d119e316..e19912bd01 100644
--- a/blazor/speeddial/template.md
+++ b/blazor/speeddial/template.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Template in Blazor SpeedDial Component
 
-This section explains available templates in Speed Dial Component and its usage.
+This section describes the available templates in the SpeedDial component and their usage for customizing item content and the popup container.
 
 ## Item template
 
-You can use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) to set a template content for the `SpeedDialItem`. The template content is defined as a child content of `ItemTemplate` tag directive.
+Use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemTemplate) to define custom content for each `SpeedDialItem`. Define the template as child content of the `ItemTemplate` tag directive.
 
 {% tabs %}
 {% highlight razor %}
@@ -56,7 +56,7 @@ You can use the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.
 
 ## Popup template
 
-You can use the [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) to set a template content for popup of  SpeedDial component. The template content is defined as a child content of `PopupTemplate` tag directive.
+Use the [PopupTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_PopupTemplate) to define custom content for the popup of the SpeedDial component. Define the template as child content of the `PopupTemplate` tag directive to render any custom layout or UI inside the popup.
 
 {% tabs %}  
 {% highlight razor %}
diff --git a/blazor/split-button/accessibility.md b/blazor/split-button/accessibility.md
index f3e2d5dc40..217327c4b7 100644
--- a/blazor/split-button/accessibility.md
+++ b/blazor/split-button/accessibility.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor SplitButton Component
 
-The Blazor SplitButton component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor SplitButton component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor SplitButton component is outlined below.
 
@@ -38,33 +38,33 @@ The accessibility compliance for the Blazor SplitButton component is outlined be
 
 ## WAI-ARIA attributes
 
-The Blazor SplitButton component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor SplitButton component:
+The Blazor SplitButton component applies WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor SplitButton component:
 
 | Attributes | Purpose |
 | --- | --- |
-| `role` | Indicates the SplitButton component as `button`, SplitButton popup as `menu`, and the SplitButton popup action items as `menuitem`. |
-| `aria-haspopup` | Indicates the availability and type of interactive SplitButton popup element. |
-| `aria-expanded` | Indicates whether the SplitButton popup can be expanded or collapsed, as well as indicates whether its current state is expanded or collapsed. |
-| `aria-owns` | Identifies an elements in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
-| `aria-disabled` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
+| `role` | Identifies the SplitButton as a `button`, the SplitButton popup as a `menu`, and popup action items as `menuitem`. |
+| `aria-haspopup` | Indicates that the button opens an interactive SplitButton popup (menu). |
+| `aria-expanded` | Reflects whether the SplitButton popup is currently expanded or collapsed. |
+| `aria-owns` | Associates elements to define a parent/child relationship when it cannot be represented in the DOM hierarchy. |
+| `aria-disabled` | Indicates that the element is perceivable but disabled and not operable. |
 
 ## Keyboard interaction
 
-The Blazor SplitButton component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor SplitButton component.
+The Blazor SplitButton component follows keyboard interaction guidelines, making it usable for people who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported:
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
 | <kbd>Esc</kbd> | <kbd>Esc</kbd> | Closes the opened popup. |
 | <kbd>Enter</kbd> | <kbd>Enter</kbd> | Opens the popup, or activates the highlighted item and closes the popup. |
-| <kbd>Space</</kbd> | <kbd>Space</kbd> | Opens the popup. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Navigates up or to the previous action item. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Navigates down or to the next action item. |
+| <kbd>Space</kbd> | <kbd>Space</kbd> | Opens the popup. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Navigates up to the previous action item. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Navigates down to the next action item. |
 | <kbd>Alt</kbd> + <kbd>↑</kbd> | <kbd>⌥</kbd> + <kbd>↑</kbd> | Closes the popup. |
 | <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the popup. |
 
 ## Ensuring accessibility
 
-The Blazor SplitButton component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor SplitButton component’s accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
 The accessibility compliance of the Blazor SplitButton component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/split-button) in a new window to evaluate the accessibility of the Blazor SplitButton component with accessibility tools.
 
diff --git a/blazor/split-button/getting-started-webapp.md b/blazor/split-button/getting-started-webapp.md
index c1a7961040..197e0927db 100644
--- a/blazor/split-button/getting-started-webapp.md
+++ b/blazor/split-button/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Split Button in Blazor Web App
 
-This section briefly explains about how to include [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -21,17 +21,18 @@ This section briefly explains about how to include [Blazor Split Button](https:/
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+
+Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-To add **Blazor Split Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the **Blazor Split Button** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the Client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, run the following commands in the Package Manager Console:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -42,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. For a list of available packages, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -54,11 +55,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
+Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands:
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -70,15 +71,15 @@ cd BlazorWebApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
+N> For more information about creating a Blazor Web App with various interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install the Syncfusion Blazor NuGet packages in the Client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is opened in the project directory that contains the `.csproj` file.
+* Run the following commands to install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and restore dependencies.
 
 {% tabs %}
 
@@ -92,7 +93,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. For a list of available packages, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -100,12 +101,12 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-| Interactive Render Mode | Description |
+| Interactive render mode | Description |
 | -- | -- |
-| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.|
-| Server | Open **~/_import.razor** file, which is located in the `Components` folder.|
+| WebAssembly or Auto | Open **~/_Imports.razor** in the Client project. |
+| Server | Open **~/_Imports.razor** in the Server project (located in the `Components` folder). |
 
-Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -116,9 +117,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+Now register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of Blazor Web App.
 
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive render mode** is `WebAssembly` or `Auto`, register Syncfusion Blazor services in both **~/Program.cs** files (Server and Client) of the Blazor Web App.
 
 {% tabs %}
 {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,7 +153,7 @@ await builder.Build().RunAsync();
 {% endhighlight %}
 {% endtabs %}
 
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
+If the **Interactive render mode** is `Server`, the project contains a single **~/Program.cs** file.  In this case, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
 
 {% tabs %}
 {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
@@ -175,7 +176,7 @@ var app = builder.Build();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
+The theme stylesheet and script can be referenced from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the theme stylesheet in the `<head>` and the script reference at the end of the `<body>` in **~/Components/App.razor** as shown:
 
 ```html
 <head>
@@ -189,11 +190,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 </body>
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> For additional options, see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to reference themes using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). For script reference approaches, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in the **~Pages/.razor** file. If the interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
@@ -202,7 +203,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button com
 |  | Server | @rendermode InteractiveServer |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default.
+N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto` or `WebAssembly` or `Server`, the render mode is configured in `App.razor` file by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -227,7 +228,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component will render in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzDWqZppKquUiR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Split Button Component](./images/blazor-splitbutton.png)" %}
 
@@ -238,4 +239,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows you how to render and configure the Split Button.
\ No newline at end of file
+N> Also explore the [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) for rendering and configuration options.
\ No newline at end of file
diff --git a/blazor/split-button/getting-started.md b/blazor/split-button/getting-started.md
index b8fdccb1ec..a378544036 100644
--- a/blazor/split-button/getting-started.md
+++ b/blazor/split-button/getting-started.md
@@ -11,9 +11,9 @@ documentation: ug
 
 # Getting Started with Blazor Split Button Component
 
-This section briefly explains about how to include [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
+This section explains how to include the [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code.
 
-To get start quickly with Split Button Component using Blazor, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SplitButton) sample:
+To get started quickly with the Split Button component in Blazor, watch this video or explore the [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SplitButton) sample:
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=u6wfpp_TlhI"%}
@@ -28,11 +28,11 @@ To get start quickly with Split Button Component using Blazor, you can check on
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
-To add **Blazor Split Button** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add the **Blazor Split Button** component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -55,9 +55,10 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+
+Alternatively, create a WebAssembly application using the following commands in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -73,8 +74,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor SplitButtons and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is opened in the project root directory where the `.csproj` file is located.
+* Run the following commands to install [Syncfusion.Blazor.SplitButtons](https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -88,7 +89,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a list of available packages and component details, see [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -96,7 +97,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespace.
+Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SplitButtons` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -107,7 +108,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
 {% endhighlight %}
 {% endtabs %}
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -140,7 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> For more ways to reference themes, see [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) (via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script reference options, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references).
 
 ## Add Blazor Split Button component
 
@@ -160,7 +161,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button com
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button component in the default web brow
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzDWqZppKquUiR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Split Button Component](./images/blazor-splitbutton.png)" %}
 
@@ -170,6 +171,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Split Button com
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
 
-N> You can also explore our [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows you how to render and configure the Split Button.
+N> Explore the [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows how to render and configure the Split Button.
 
 
diff --git a/blazor/split-button/how-to/add-remove-items.md b/blazor/split-button/how-to/add-remove-items.md
index f7a4ae8ab7..c52f9a6cf5 100644
--- a/blazor/split-button/how-to/add-remove-items.md
+++ b/blazor/split-button/how-to/add-remove-items.md
@@ -9,7 +9,9 @@ documentation: ug
 
 # Add and Remove Items in Blazor SplitButton Component
 
-Split Button component can dynamically add or remove items using  [AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_), [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_) method.
+The SplitButton component supports dynamically adding or removing dropdown menu items using the AddItems and RemoveItems methods. The following example adds new items at runtime and removes the item matching the Text value "Paste" using a component reference obtained with @ref in button click handlers.
+
+[AddItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_AddItems_System_Collections_Generic_List_Syncfusion_Blazor_SplitButtons_DropDownMenuItem__System_String_System_Boolean_), [RemoveItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_RemoveItems_System_Collections_Generic_List_System_String__System_Boolean_)
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -54,4 +56,4 @@ Split Button component can dynamically add or remove items using  [AddItems](htt
   
 ```
 
-![Adding or Removing Blazor SplitButton Items](./../images/blazor-splitbutton-add-remove-items.png)
\ No newline at end of file
+![Adding or removing menu items in the Blazor SplitButton](./../images/blazor-splitbutton-add-remove-items.png)
\ No newline at end of file
diff --git a/blazor/split-button/how-to/create-right-to-left-splitbutton.md b/blazor/split-button/how-to/create-right-to-left-splitbutton.md
index c78eba844e..1877ea2810 100644
--- a/blazor/split-button/how-to/create-right-to-left-splitbutton.md
+++ b/blazor/split-button/how-to/create-right-to-left-splitbutton.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Create right-to-left Blazor SplitButton Component
 
-Split Button component has RTL support. This can be achieved by setting [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_EnableRtl) as `true`.
+The SplitButton component supports right-to-left (RTL) rendering. Enable RTL by setting the [EnableRtl property (SfSplitButton)](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_EnableRtl) to `true`.
 
-The following example illustrates how to enable right-to-left support in Split Button component.
+The following example demonstrates how to enable right-to-left support in the SplitButton component.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/split-button/how-to/group-items-in-popup.md b/blazor/split-button/how-to/group-items-in-popup.md
index 981c135443..21bf9060bc 100644
--- a/blazor/split-button/how-to/group-items-in-popup.md
+++ b/blazor/split-button/how-to/group-items-in-popup.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Group items in popup in Blazor SplitButton Component
 
-Items in popup can be grouped in Split Button by templating entire popup with ListView. To achieve grouping in ListView, check [ListView Grouping](../../listview/grouping#grouping) documentation. To template ListView in popup, render the ListView Component in Split button popup using `PopupContent` property.
+Items in the popup can be grouped in the SplitButton by rendering a ListView inside the popup using the `PopupContent` property, which replaces the default SplitButton menu. For configuring grouping in the ListView, refer to the [ListView grouping](../../listview/grouping#grouping) documentation. In this approach, the ListView groups items by a specified field (for example, `Category`) using `ListViewFieldSettings`.
 
 ```cshtml
 
@@ -50,4 +50,4 @@ Items in popup can be grouped in Split Button by templating entire popup with Li
 
 ```
 
-![Grouping in Blazor SplitButton](./../images/blazor-splitbutton-grouping.png)
\ No newline at end of file
+![Grouped items in the Blazor SplitButton popup using ListView](./../images/blazor-splitbutton-grouping.png)
\ No newline at end of file
diff --git a/blazor/split-button/how-to/open-a-dialog-on-popup-item-click.md b/blazor/split-button/how-to/open-a-dialog-on-popup-item-click.md
index 51ff4d0f76..0440d2523b 100644
--- a/blazor/split-button/how-to/open-a-dialog-on-popup-item-click.md
+++ b/blazor/split-button/how-to/open-a-dialog-on-popup-item-click.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Open a dialog on popup item click in Blazor SplitButton Component
 
-This section explains about how to open a dialog on Split Button popup item click. This can be achieved by handling dialog open in [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SplitButtonEvents.html#Syncfusion_Blazor_SplitButtons_SplitButtonEvents_ItemSelected) event of the Split Button.
+This section explains how to open a dialog on a SplitButton popup item click. This can be achieved by handling dialog open in [ItemSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SplitButtonEvents.html#Syncfusion_Blazor_SplitButtons_SplitButtonEvents_ItemSelected) event of the Split Button.
 
-In the following example, Dialog will open while selecting `Update` item.
+In the following example, the dialog opens when selecting the Update item.
 
 ```cshtml
 
@@ -65,4 +65,4 @@ In the following example, Dialog will open while selecting `Update` item.
 
 ```
 
-![Opening Dialog on Popup Item Click in Blazor SplitButton](./../images/blazor-splitbutton-dialog.png)
\ No newline at end of file
+![Opening a dialog from a Blazor SplitButton popup item Popup Item Click](./../images/blazor-splitbutton-dialog.png)
\ No newline at end of file
diff --git a/blazor/split-button/how-to/set-the-disabled-state.md b/blazor/split-button/how-to/set-the-disabled-state.md
index 9db0296a53..95e472cfd1 100644
--- a/blazor/split-button/how-to/set-the-disabled-state.md
+++ b/blazor/split-button/how-to/set-the-disabled-state.md
@@ -9,8 +9,7 @@ documentation: ug
 
 # Set the disabled state in Blazor SplitButton Component
 
-Split Button component can be enabled or disabled by disabled property. To disable Split Button component, set the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_Disabled) property as true.
-
+Use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_Disabled) property to disable the SplitButton. When set to `true`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/split-button/icons.md b/blazor/split-button/icons.md
index b581a13750..b77e604452 100644
--- a/blazor/split-button/icons.md
+++ b/blazor/split-button/icons.md
@@ -7,9 +7,9 @@ control: Split Button
 documentation: ug
 ---
 
-# Icons And Separator in Blazor SplitButton Component
+# Icons and separator in Blazor Split Button component
 
-## Split Button Icons
+## Split Button icons
 
 [Blazor Split Button](https://www.syncfusion.com/blazor-components/blazor-split-button) can have an icon to provide the visual representation of the action. To place the icon on a Split Button, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the Split Button. The icon's position can be customized by using the [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_IconPosition) property.
 
@@ -41,11 +41,11 @@ documentation: ug
 
 ![Blazor SplitButton with Icon](./images/blazor-splitbutton-icon.png)
 
-The third party icons on the Split Button can be used by the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_IconCss) property.
+Third-party or custom icons can also be applied by assigning the appropriate class name to the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_IconCss) property. Ensure the corresponding icon font or stylesheet is referenced in the application.
 
-## Vertical Button
+## Vertical button
 
-Vertical Button in Split Button can be achieved by adding `e-vertical` class using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_CssClass) property.
+A vertical layout for the Split Button can be achieved by adding the `e-vertical` class via the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_CssClass) property. This stacks the icon and text vertically within the primary button.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -70,9 +70,7 @@ Vertical Button in Split Button can be achieved by adding `e-vertical` class usi
 
 ## Separator
 
-The Separators are the horizontal lines that are used to separate the popup items. You cannot select the separators. You can enable separators to group the popup items using the separator property.
-
-The following example illustrates how to enable [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) support in Split Button component.
+Separators are horizontal lines used to group items in the popup menu. Separators are non-selectable and serve only as visual dividers. Enable a separator between items by setting the [Separator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_Separator) property to `true` on a `DropDownMenuItem`.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/split-button/native-event.md b/blazor/split-button/native-event.md
index 4180f1c46a..9b096df00b 100644
--- a/blazor/split-button/native-event.md
+++ b/blazor/split-button/native-event.md
@@ -9,22 +9,24 @@ documentation: ug
 
 # Events in Blazor SplitButton Component
 
-The split button event can be defined using on [SplitButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SplitButtonEvents.html) in component. The value of event is treated as an event handler. The event specific data will be available in event arguments.
+Handle Split Button events by defining handlers in the [SplitButtonEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SplitButtonEvents.html) tag. The assigned method names act as event handlers, and event-specific data is provided through strongly typed event argument classes.
 
 ## List of events supported
 
-The following event support is provided to the SplitButton component. The different event argument types for each event are,
+The Split Button component supports the following events and corresponding event argument types:
 
-* OnOpen - BeforeOpenCloseMenuEventArgs
-* Opened - OpenCloseMenuEventArgs
-* ItemSelected - MenuEventArgs
-* OnClose – BeforeOpenCloseMenuEventArgs
-* OnItemRender – MenuEventArgs
-* Closed – OpenCloseMenuEventArgs
+* Created - Initializes after the component is created.
+* Clicked - Raised when the primary button is clicked. Argument type: Syncfusion.Blazor.SplitButtons.ClickEventArgs
+* OnOpen - Raised before the popup opens. Argument type: BeforeOpenCloseMenuEventArgs
+* Opened - Raised after the popup opens. Argument type: OpenCloseMenuEventArgs
+* ItemSelected - Raised when a menu item is selected. Argument type: MenuEventArgs
+* OnClose – Raised before the popup closes. Argument type: BeforeOpenCloseMenuEventArgs
+* OnItemRender – Raised while rendering each menu item. Argument type: MenuEventArgs
+* Closed – Raised after the popup closes. Argument type: OpenCloseMenuEventArgs
 
 ## How to bind event to Split Button
 
-Above defined events bind the Split Button component. Here, we have explained about the sample code snippets of SplitButton.
+Bind the above events to the Split Button component using the SplitButtonEvents tag, as shown below.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
diff --git a/blazor/split-button/popup-items.md b/blazor/split-button/popup-items.md
index e4626e4810..54687bbaab 100644
--- a/blazor/split-button/popup-items.md
+++ b/blazor/split-button/popup-items.md
@@ -11,9 +11,9 @@ documentation: ug
 
 ## Icons
 
-The Popup action item have an icon or image to provide visual representation of the action. To place the icon on a popup item, set the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfSplitButton.html#Syncfusion_Blazor_SplitButtons_SfSplitButton_IconCss) property to `e-icons` with the required icon CSS. By default, the icon is positioned to the left side of the popup action item.
+A popup action item can display an icon or image to provide a clear visual cue for the action. To add an icon to a popup item, set the [DropDownMenuItem.IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.DropDownMenuItem.html#Syncfusion_Blazor_SplitButtons_DropDownMenuItem_IconCss) property to include `e-icons` and the required icon CSS class. By default, the icon is positioned on the left side of the popup action item. Ensure that the corresponding icon font or stylesheet is referenced in the application.
 
-In the following sample, the icons for Cut, Copy, Paste menu items are added using the IconCss property.
+In the following sample, the icons for Cut, Copy, and Paste menu items are added using the IconCss property.
 
 ```cshtml
 @using Syncfusion.Blazor.SplitButtons
@@ -42,6 +42,7 @@ In the following sample, the icons for Cut, Copy, Paste menu items are added usi
 </style>
 
 ```
+The following image shows Split Button popup items with icons.
 
 ![Blazor SplitButton Items with Icon](./images/blazor-splitbutton-item-with-icon.png)
 
diff --git a/blazor/split-button/style-and-appearance.md b/blazor/split-button/style-and-appearance.md
index 94c235372d..e4d9a8a0a4 100644
--- a/blazor/split-button/style-and-appearance.md
+++ b/blazor/split-button/style-and-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Styles and Appearances in Blazor SplitButton Component
 
-To modify the SplitButton appearance, override the default CSS of SplitButton component. Find the list of CSS classes and its corresponding section in SplitButton. Also, there is an option to create own custom theme for the controls using the [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=material).
+To modify the Split Button appearance, override the component’s default CSS. The following table lists key CSS classes and their purposes in the Split Button. To scope changes to a specific instance, add a custom class through the component’s CssClass property and target that class in styles. A custom theme can also be created using the [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material).
 
 | CSS Class | Purpose of Class |
 | ----- | ----- |
-| .e-dropdown-btn | To customize the button part in splitbutton. |
-| .e-split-btn | To customize the dropdown part in split button. |
+| .e-dropdown-btn | Customize the primary button part of the Split Button.|
+| .e-split-btn | Customize the dropdown part in split button. |
 | .e-dropdown-popup ul .e-item | To customize the progress button list items. |
-| .e-dropdown-popup ul .e-item .e-menu-icon | To customize the progress button list items icon. |
\ No newline at end of file
+| .e-dropdown-popup ul .e-item .e-menu-icon | Customize the icon displayed inside popup menu items. |
\ No newline at end of file
diff --git a/blazor/stock-chart/Legend.md b/blazor/stock-chart/Legend.md
index 797985f4c0..262dddc258 100644
--- a/blazor/stock-chart/Legend.md
+++ b/blazor/stock-chart/Legend.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Legend in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about Legend in Syncfusion Blazor Stock Chart component and much more details.
+description: Check out and learn how to configure and customize the Legends in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,22 +9,22 @@ documentation: ug
 
 # Legend in Blazor Stock Chart Component
 
-Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in the [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html).
+The legend describes the series rendered in the Stock Chart. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html).
 
 ## Enable Legend
 
-To display the legend for the Stock Chart, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**.
+To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true"></StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple  Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true"></StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple  Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -39,33 +39,32 @@ To display the legend for the Stock Chart, set the [Visible](https://help.syncfu
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.png)
 
-
 ## Legend Position
 
-By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property, legend can be placed at **Left**, **Right**, **Top**, **Bottom** or **Custom** of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default.
+Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property to place the legend at the **Left**, **Right**, **Top**, **Bottom**, or **Custom** position. By default, the legend appears at the **Bottom** of the Stock Chart.
 
 ```cshtml
 
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Position="LegendPosition.Top"></StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="LegendPosition.Top"></StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -80,33 +79,34 @@ By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.png)
 
-The **Custom** position helps to position the legend anywhere in the Stock Chart using x and y coordinates.
+The **Custom** position allows placing the legend anywhere within the Stock Chart using x and y coordinates.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Position="LegendPosition.Custom">
-                <StockChartLocation X="50" Y="50"></StockChartLocation>
-                <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="LegendPosition.Custom">
+        <StockChartLocation X="50" Y="50"></StockChartLocation>
+        <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -120,39 +120,40 @@ The **Custom** position helps to position the legend anywhere in the Stock Chart
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.png)
 
 ## Reverse Legend
 
-You can reverse the order of the legend items by using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, legend for the first series in the collection will be placed first.
+Reverse the order of legend items using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, the legend entry for the first series appears first.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Reversed="true">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Reversed="true">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline"XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline"XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
 
-            </StockChartSeriesCollection>
-        </SfStockChart>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -166,33 +167,34 @@ You can reverse the order of the legend items by using the [Reversed](https://he
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.png)
 
 ## Legend Alignment
 
-Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property, place the legend in **Centre**, **Far**, or **Near** alignment.
+Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property to align the legend to **Center**, **Far**, or **Near**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Alignment="Alignment.Near">
-            <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails"  XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Alignment="Alignment.Near">
+    <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails"  XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -207,13 +209,14 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.png)
@@ -222,21 +225,20 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ### Legend Shape
 
-The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) can be used to change the shape of the legend icon. The default icon shape for legends is **SeriesType**.
-
+The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) changes the legend icon shape. The default icon shape is based on **SeriesType**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" ShapeHeight="13" ShapeWidth="13">
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"  LegendShape="LegendShape.Diamond"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" ShapeHeight="13" ShapeWidth="13">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"  LegendShape="LegendShape.Diamond"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -250,34 +252,35 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.png)
 
 ### Legend Size
 
-When the legend is placed on the top or bottom of the Stock Chart, it takes up 20% - 25% of the Stock Chart's height, and 20% - 25% of the Stock Chart's width when it is positioned on the left or right side of the Stock Chart. So, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties can be used to adjust the default legend size.
+When placed at the top or bottom, the legend occupies approximately 20%–25% of the chart height; when positioned at the left or right, it occupies approximately 20%–25% of the chart width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties to adjust the legend size.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Height="50" Width="300">
-                <StockChartLegendBorder Color="blue" Width="1"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-               <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Height="50" Width="300">
+        <StockChartLegendBorder Color="blue" Width="1"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -292,32 +295,33 @@ When the legend is placed on the top or bottom of the Stock Chart, it takes up 2
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.png)
 
 ### Legend Shape Size
 
-The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape.
+Use the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties to control the legend icon dimensions.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Height="50" Width="300" ShapeHeight="15" ShapeWidth="15">
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Height="50" Width="300" ShapeHeight="15" ShapeWidth="15">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -332,34 +336,34 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.png)
 
-
 ### Legend Item Padding
 
-The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property can be used to adjust the space between the legend items.
+Use the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property to adjust spacing between legend items.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" ItemPadding="30">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" ItemPadding="30">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -374,35 +378,36 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.png)
 
 ### Legend Paging
 
-When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages.
+When legend items exceed the available bounds, paging is enabled automatically. End users can navigate between pages using the navigation buttons.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Width="100" Height="70" Padding="10" ShapePadding="10">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Width="100" Height="70" Padding="10" ShapePadding="10">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -416,35 +421,35 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.png)
 
-
 ### Legend Text Wrap
 
-When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. End user can also wrap the legend text based on the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property.
+When legend text exceeds the container, enable wrapping using the [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. Wrapping can also be controlled using the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Position="@LegendPosition.Right" TextWrap="@TextWrap.Wrap" MaxLabelWidth="70">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="@LegendPosition.Right" TextWrap="@TextWrap.Wrap" MaxLabelWidth="70">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -459,34 +464,35 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.png)
 
 ## Series selection based on legend
 
-By default, when you click on the legend item, the appropriate series visibility is collapsed. On the other hand, [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property is used to disable such functionality.
+By default, clicking a legend item collapses the visibility of the corresponding series. The [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property disables this behavior when set to false.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
-           <StockChartLegendSettings Visible="true"  ToggleVisibility="false">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
+    <StockChartLegendSettings Visible="true"  ToggleVisibility="false">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -501,34 +507,35 @@ By default, when you click on the legend item, the appropriate series visibility
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.png)
 
 ## Hiding legend item
 
-The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) will be displayed as the legend text by default. You can skip the legend for particular series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property.
+The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) is used as the legend text by default. Skip the legend for a specific series by providing an empty string for the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
-           <StockChartLegendSettings Visible="true"  ToggleVisibility="true">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
+    <StockChartLegendSettings Visible="true"  ToggleVisibility="true">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -543,13 +550,14 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
-![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
\ No newline at end of file
+![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
diff --git a/blazor/stock-chart/accessibility.md b/blazor/stock-chart/accessibility.md
index 4301b7edff..985199cea9 100644
--- a/blazor/stock-chart/accessibility.md
+++ b/blazor/stock-chart/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more.
 platform: Blazor
 control: Stock Chart
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor Stock Chart Component
 
-The Blazor Stock Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Stock Chart component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor Stock Chart component is outlined below.
 
@@ -30,16 +30,16 @@ The accessibility compliance for the Blazor Stock Chart component is outlined be
         margin: 0.5em 0;
     }
 </style>
+
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
-
 ## WAI-ARIA attributes
 
-The Blazor Stock Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Stock Chart component:
+The Blazor Stock Chart component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Stock Chart component:
 
 * img (role)
 * button (role)
@@ -50,27 +50,27 @@ The Blazor Stock Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/
 
 ## Keyboard interaction
 
-The Blazor Stock Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Stock Chart component.
+The Blazor Stock Chart component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, enabling effective use with assistive technologies (AT) and full keyboard navigation. The following keyboard shortcuts are supported by the Blazor Stock Chart component.
 
 | Windows | Mac | Description |
 | --- | --- | --- |
-| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Stock Chart element. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Stock Chart. |
-| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Stock Chart. |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point left side from the selected point. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. |
-| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend. |
-| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend. |
+| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Stock Chart element. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the stock chart. |
+| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the stock chart. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point to the left of the selected point. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point to the right of the selected point. |
+| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Moves focus to the legend item to the left of the selected legend. |
+| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Moves focus to the legend item to the right of the selected legend. |
 | <kbd>Enter/Space</kbd> | <kbd>Enter/Space</kbd> | Toggles the visibility of the corresponding series. |
-| <kbd>ESC</kbd> | <kbd>Esc</kbd> | Cancel the tooltip for the data point. |
-| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Stock Chart. |
+| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Cancels the tooltip for the data point. |
+| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the stock chart. |
 
 ## Ensuring accessibility
 
-The Blazor Stock Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Stock Chart component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
 The accessibility compliance of the Blazor Stock Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/stock-chart) in a new window to evaluate the accessibility of the Blazor Stock Chart component with accessibility tools.
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
diff --git a/blazor/stock-chart/appearance.md b/blazor/stock-chart/appearance.md
index c1d5c84886..973091d184 100644
--- a/blazor/stock-chart/appearance.md
+++ b/blazor/stock-chart/appearance.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Appearance in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about appearance in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn about configuring chart appearance in the Syncfusion Blazor Stock Chart component to refine visual presentation.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Stock Chart Title
 
-Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property, to show the information about the data plotted.
+Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property to provide context for the plotted data.
 
 ```cshtml
 
@@ -28,11 +28,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime XValue {get; set;}
-        public double YValue {get; set;}
+        public DateTime XValue { get; set; }
+        public double YValue { get; set; }
     }
 
     public List<ChartData> DataSource = new List<ChartData>
@@ -43,11 +42,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
         new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
         new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
         new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
-        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
+        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
     };
 }
 
-
 ```
 
 ![Blazor Stock Chart with Title](images/appearance/blazor-stock-chart-title.png)
@@ -56,7 +54,7 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
 
 ## Title Customizations
 
-The `TextStyle` property of chart title provides options to customize the `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment` and `TextOverflow`.
+The `TextStyle` property of the chart title provides options to customize `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment`, and `TextOverflow`.
 
 ```cshtml
 
@@ -74,11 +72,10 @@ The `TextStyle` property of chart title provides options to customize the `Size`
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime XValue {get; set;}
-        public double YValue {get; set;}
+        public DateTime XValue { get; set; }
+        public double YValue { get; set; }
     }
 
     public List<ChartData> DataSource = new List<ChartData>
@@ -89,7 +86,7 @@ The `TextStyle` property of chart title provides options to customize the `Size`
         new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
         new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
         new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
-        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
+        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
     };
 }
 
@@ -99,9 +96,9 @@ The `TextStyle` property of chart title provides options to customize the `Size`
 
 ## Stock Chart Theme
 
-Changing theme will affect background color, gridlines, tooltip colors and appearance.
+Changing the theme affects background color, gridlines, tooltip appearance, and overall styling.
 
-Stock chart is shipped with several built-in themes such as `Material`, `Fabric`, `Bootstrap` , `HighContrastLight`, `MaterialDark`, `FabricDark`, `FabricDark`, `HighContrast` and `BootstrapDark`.
+Stock Chart includes several built-in themes such as `Material`, `Fabric`, `Bootstrap`, `HighContrastLight`, `MaterialDark`, `FabricDark`, `HighContrast`, and `BootstrapDark`.
 
 ```cshtml
 
@@ -118,11 +115,10 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime XValue {get; set;}
-        public double YValue {get; set;}
+        public DateTime XValue { get; set; }
+        public double YValue { get; set; }
     }
 
     public List<ChartData> DataSource = new List<ChartData>
@@ -133,7 +129,7 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
         new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
         new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
         new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
-        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
+        new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
     };
 }
 
@@ -143,4 +139,4 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
 
 ## See Also
 
-* [Axis Customization](./axis-customization)
\ No newline at end of file
+* [Axis Customization](./axis-customization)
diff --git a/blazor/stock-chart/axis-customization.md b/blazor/stock-chart/axis-customization.md
index 2549f34a87..40076f1808 100644
--- a/blazor/stock-chart/axis-customization.md
+++ b/blazor/stock-chart/axis-customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Axis Customization in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about axis customization in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn here all about axis customization in the Syncfusion Blazor Stock Chart component and more.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -13,7 +13,7 @@ documentation: ug
 
 ## Title
 
-A title can be added to the axis using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property to provide quick information to the user about the data plotted in the axis. Title style can be customized using the [TitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTitleStyle.html) property of the axis.
+Add a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property to provide quick information about the plotted data. Customize the title style using the [TitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTitleStyle.html) property.
 
 ```cshtml
 
@@ -26,7 +26,6 @@ A title can be added to the axis using the [Title](https://help.syncfusion.com/c
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -35,26 +34,25 @@ A title can be added to the axis using the [Title](https://help.syncfusion.com/c
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-          new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-          new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-          new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-          new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-          new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-          new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-          new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-          new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-          new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+          new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+          new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+          new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+          new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+          new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+          new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+          new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+          new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+          new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
     };
 }
 
-
 ```
 
 ![Blazor Stock Chart with Title](images/common/blazor-stock-chart-title.png)
 
 ## Tick Lines Customization
 
-The `Width`, `Color` and `Size` of the minor and major tick lines can be customized using the [MajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MajorTickLines) and the [MinorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MinorTickLines) properties in the axis.
+Customize the `Width` and `Color` of minor and major tick lines using the [MajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MajorTickLines) and [MinorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_MinorTickLines) properties on the axis.
 
 ```cshtml
 
@@ -72,24 +70,23 @@ The `Width`, `Color` and `Size` of the minor and major tick lines can be cu
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date { get; set;}
-        public Double Y { get; set;}
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-        new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-        new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-        new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-        new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-        new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-        new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-        new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-        new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
     };
 }
 
@@ -99,7 +96,7 @@ The `Width`, `Color` and `Size` of the minor and major tick lines can be cu
 
 ## Grid Lines Customization
 
-The `Width`, `Color` and `DashArray` of the minor and major grid lines can be customized using the [MajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MajorGridLines) and the [MinorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MinorGridLines) properties in the axis.
+Customize the `Width`, `Color`, and `DashArray` of minor and major grid lines using the [MajorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MajorGridLines) and [MinorGridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_MinorGridLines) properties on the axis.
 
 ```cshtml
 
@@ -122,7 +119,6 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -131,15 +127,15 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-        new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-        new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-        new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-        new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-        new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-        new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-        new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-        new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90}
     };
 }
 
@@ -149,7 +145,7 @@ The `Width`, `Color` and `DashArray` of the minor and major grid lines can
 
 ## Multiple Axis
 
-In addition to primary X and Y axis, n number of axis can be added to the chart. Series can be associated with this [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html), by mapping with axis's unique name.
+In addition to the primary X and Y axes, multiple additional axes can be added to the chart. A series can be associated with an [axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html) by mapping the series to the axis using the axis's unique `Name`.
 
 ```cshtml
 
@@ -178,7 +174,6 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -191,15 +186,15 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -211,7 +206,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
 
 <!-- markdownlint-disable MD033 -->
 
-When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_IsInversed) to `true`.
+When an axis is inversed, the highest value of the axis is placed closer to the origin and the lowest value farther from it. To render an axis in an inversed manner, set [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_IsInversed) to `true`.
 
  ```cshtml
 
@@ -226,7 +221,6 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -239,15 +233,15 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -258,7 +252,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
 
 ## Opposed Position
 
-To place an axis opposite from its original position, set [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_OpposedPosition) to true.
+To place an axis opposite from its original position, set [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_OpposedPosition) to `true`.
 
  ```cshtml
 
@@ -273,7 +267,6 @@ To place an axis opposite from its original position, set [OpposedPosition](http
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -286,19 +279,18 @@ To place an axis opposite from its original position, set [OpposedPosition](http
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
-
 ```
 
-![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.png)
\ No newline at end of file
+![Blazor Stock Chart in Opposed Position](images/common/blazor-stock-chart-in-opposed-position.png)
diff --git a/blazor/stock-chart/axis-types.md b/blazor/stock-chart/axis-types.md
index 22e7d70f17..6c1bf431fa 100644
--- a/blazor/stock-chart/axis-types.md
+++ b/blazor/stock-chart/axis-types.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Axis Types in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about axis types in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn about all the available axis types in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -13,9 +13,10 @@ documentation: ug
 
 ## DateTime Axis
 
-Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of axis to DateTime.
+The DateTime axis uses a time-based scale and renders date-time values as axis labels in the specified format. Set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of the axis to DateTime.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfStockChart>
@@ -28,34 +29,37 @@ Date time axis uses date time scale and displays the date time values as axis la
     </StockChartSeriesCollection>
 </SfStockChart>
 
-@code{
+@code {
     public class ChartData
     {
         public DateTime Date { get; set; }
         public Double Y { get; set; }
     }
+
     public List<ChartData> StockDetails = new List<ChartData>
-{
-        new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-        new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-        new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-        new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-        new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-        new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-        new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-        new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-        new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90}
    };
 }
+
 ```
 
 ![Blazor Stock Chart with Datetime Axis](images/common/blazor-stock-chart-datetime-axis.png)
 
 ## DateTimeCategory Axis
 
-DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html) as [DateTimeCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_DateTimeCategory).
+The DateTimeCategory axis displays only business days by skipping non-trading dates. To enable it, set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html) to [DateTimeCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_DateTimeCategory).
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 @using System.Dynamic
 
@@ -74,16 +78,17 @@ DateTimeCategory axis in the stock chart is used to display only business days.
 
 @code {
     private List<DateTime> Dates = new List<DateTime> 
-    {   new DateTime(2021, 01, 11),new DateTime(2021, 01, 12),new DateTime(2021, 01, 13),new DateTime(2021, 01, 14),new DateTime(2021, 01, 15), 
-        new DateTime(2021, 01, 19),new DateTime(2021, 01, 20),new DateTime(2021, 01, 21),new DateTime(2021, 01, 22),new DateTime(2021, 03, 01),
-        new DateTime(2021, 03, 02),new DateTime(2021, 04, 01),new DateTime(2021, 04, 05),new DateTime(2021, 04, 06),new DateTime(2021, 04, 07),
-        new DateTime(2021, 04, 11),new DateTime(2021, 04, 13),new DateTime(2021, 04, 15),new DateTime(2021, 04, 16),new DateTime(2021, 04, 17),
-        new DateTime(2021, 04, 18),new DateTime(2021, 04, 20),new DateTime(2021, 04, 21),new DateTime(2021, 04, 23),new DateTime(2021, 04, 25),
-        new DateTime(2021, 05, 01),new DateTime(2021, 05, 02),new DateTime(2021, 05, 06),new DateTime(2021, 05, 07),new DateTime(2021, 05, 08),
-        new DateTime(2021, 05, 11),new DateTime(2021, 05, 15),new DateTime(2021, 05, 18),new DateTime(2021, 05, 20),new DateTime(2021, 05, 25),
-        new DateTime(2021, 06, 01),new DateTime(2021, 06, 02),new DateTime(2021, 06, 03),new DateTime(2021, 06, 04),new DateTime(2021, 06, 05),
-        new DateTime(2021, 06, 10),new DateTime(2021, 06, 11),new DateTime(2021, 06, 12),new DateTime(2021, 06, 13),new DateTime(2021, 06, 15),
-        new DateTime(2021, 06, 16),new DateTime(2021, 06, 17),new DateTime(2021, 06, 18),new DateTime(2021, 06, 19),new DateTime(2021, 06, 20)
+    {  
+        new DateTime(2021, 01, 11), new DateTime(2021, 01, 12), new DateTime(2021, 01, 13), new DateTime(2021, 01, 14), new DateTime(2021, 01, 15), 
+        new DateTime(2021, 01, 19), new DateTime(2021, 01, 20), new DateTime(2021, 01, 21), new DateTime(2021, 01, 22), new DateTime(2021, 03, 01), 
+        new DateTime(2021, 03, 02), new DateTime(2021, 04, 01),new DateTime(2021, 04, 05), new DateTime(2021, 04, 06),new DateTime(2021, 04, 07), 
+        new DateTime(2021, 04, 11), new DateTime(2021, 04, 13), new DateTime(2021, 04, 15), new DateTime(2021, 04, 16), new DateTime(2021, 04, 17), 
+        new DateTime(2021, 04, 18), new DateTime(2021, 04, 20), new DateTime(2021, 04, 21), new DateTime(2021, 04, 23), new DateTime(2021, 04, 25), 
+        new DateTime(2021, 05, 01), new DateTime(2021, 05, 02), new DateTime(2021, 05, 06), new DateTime(2021, 05, 07),new DateTime(2021, 05, 08), 
+        new DateTime(2021, 05, 11), new DateTime(2021, 05, 15), new DateTime(2021, 05, 18), new DateTime(2021, 05, 20), new DateTime(2021, 05, 25), 
+        new DateTime(2021, 06, 01), new DateTime(2021, 06, 02), new DateTime(2021, 06, 03), new DateTime(2021, 06, 04),new DateTime(2021, 06, 05), 
+        new DateTime(2021, 06, 10), new DateTime(2021, 06, 11), new DateTime(2021, 06, 12), new DateTime(2021, 06, 13), new DateTime(2021, 06, 15), 
+        new DateTime(2021, 06, 16), new DateTime(2021, 06, 17), new DateTime(2021, 06, 18), new DateTime(2021, 06, 19), new DateTime(2021, 06, 20)
     };
 
     public DateTime[] Value = new DateTime[] { new DateTime(2021, 01, 01), new DateTime(2022, 01, 01) };
@@ -114,6 +119,7 @@ DateTimeCategory axis in the stock chart is used to display only business days.
         }
     }
 }
+
 ```
 
 ![Blazor Stock Chart with DateTimeCategory Axis](images/common/blazor-stock-chart-datetimecategory-axis.png)
@@ -122,9 +128,10 @@ DateTimeCategory axis in the stock chart is used to display only business days.
 
 <!-- markdownlint-disable MD033 -->
 
-Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10<sup>-6</sup>) and higher order of magnitude (eg: 10<sup>6</sup>) and set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of axis to `Logarithmic`.
+The Logarithmic axis uses a logarithmic scale and is useful when data spans multiple orders of magnitude (e.g., 10<sup>-6</sup> to 10<sup>6</sup>). Set the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartAxis.html#Syncfusion_Blazor_Charts_StockChartAxis_ValueType) of the axis to `Logarithmic`.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfStockChart>
@@ -138,29 +145,30 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat
     </StockChartSeriesCollection>
 </SfStockChart>
 
-@code{
+@code {
     public class ChartData
     {
         public DateTime Date { get; set; }
         public Double Y { get; set; }
     }
     public List<ChartData> StockDetails = new List<ChartData>
-{
-        new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-        new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-        new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-        new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-        new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-        new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-        new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-        new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-        new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with Logarithmic Axis](images/common/blazor-stock-chart-logarithmic-axis.png)
 
 ## See Also
 
-* [Axis Customization](./axis-customization)
\ No newline at end of file
+* [Axis Customization](./axis-customization)
diff --git a/blazor/stock-chart/chart-dimensions.md b/blazor/stock-chart/chart-dimensions.md
index f669856a42..a108294305 100644
--- a/blazor/stock-chart/chart-dimensions.md
+++ b/blazor/stock-chart/chart-dimensions.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Stock Chart Dimensions in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about stock chart dimensions in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn how to configure chart dimensions in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
 
 ## Size for Container
 
-Stock Chart can render to its container size. You can set the size via inline or CSS as demonstrated below.
+The stock chart adapts to its container size. Set the container dimensions with inline styles or CSS, as shown below.
 
 ```cshtml
 
@@ -26,15 +26,14 @@ Stock Chart can render to its container size. You can set the size via inline o
 </div>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date { get; set}
-        public Double Open { get; set}
-        public Double Low { get; set}
-        public Double Close { get; set}
-        public Double High { get; set}
-        public Double Volume { get; set}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
@@ -57,10 +56,10 @@ Stock Chart can render to its container size. You can set the size via inline o
 
 ## Size for Stock Chart
 
-The size can be set for stock chart directly through [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Height) properties.
+Set the stock chart size directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Height) properties.
 
 <!-- markdownlint-disable MD036 -->
-**In Pixel**
+**In Pixels**
 <!-- markdownlint-disable MD036 -->
 
 ```cshtml
@@ -74,28 +73,27 @@ The size can be set for stock chart directly through [Width](https://help.syncfu
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date { get; set}
-        public Double Open { get; set}
-        public Double Low { get; set}
-        public Double Close { get; set}
-        public Double High { get; set}
-        public Double Volume { get; set}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
@@ -105,7 +103,7 @@ The size can be set for stock chart directly through [Width](https://help.syncfu
 
 **In Percentage**
 
-By setting value in percentage, stock chart gets its dimension with respect to its container. For example, when the height is ‘50%’, chart renders to half of the container height.
+When values are specified in percentages, the stock chart sizes relative to its container. For example, a height of '50%' renders at half the container height.
 
 ```cshtml
 
@@ -118,28 +116,27 @@ By setting value in percentage, stock chart gets its dimension with respect to
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date { get; set}
-        public Double Open { get; set}
-        public Double Low { get; set}
-        public Double Close { get; set}
-        public Double High { get; set}
-        public Double Volume { get; set}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
@@ -147,4 +144,4 @@ By setting value in percentage, stock chart gets its dimension with respect to
 
 ![Changing Blazor Stock Chart Size in Percentage](images/size/blazor-stock-chart-size-in-percentage.png)
 
-N> When you do not specify the size, it takes `450px` as the height and window size as its width.
\ No newline at end of file
+N> If no size is specified, a default height of 450px is used and the width matches the window size.
diff --git a/blazor/stock-chart/cross-hair.md b/blazor/stock-chart/cross-hair.md
index 2b48429f91..f6526b597e 100644
--- a/blazor/stock-chart/cross-hair.md
+++ b/blazor/stock-chart/cross-hair.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Crosshair in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about crosshair in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn how to configure crosshair in the Syncfusion Blazor Stock Chart component and much more.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
 
 # Crosshair in Blazor Stock Chart Component
 
-Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. Crosshair lines can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property in the `Crosshair`. Enabling the `SnapToData` property in the crosshair aligns it with the nearest data point instead of following the exact mouse position.
+The crosshair displays vertical and horizontal lines to show axis values at the mouse or touch position. Enable crosshair lines using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `Crosshair`. Enabling the `SnapToData` property aligns the crosshair with the nearest data point instead of the exact pointer position.
 
 ```cshtml
 
@@ -31,7 +31,6 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -44,15 +43,15 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-          new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-          new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-          new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-          new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-          new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-          new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-          new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-          new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-          new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -62,7 +61,7 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo
 
 ## Tooltip for axis
 
-Tooltip label for an axis can be enabled by using [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `CrosshairTooltip` in the corresponding axis.
+Axis tooltip labels can be enabled using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `CrosshairTooltip` on the corresponding axis.
 
 ```cshtml
 
@@ -88,7 +87,6 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -101,15 +99,15 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-          new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-          new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-          new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-          new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-          new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-          new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-          new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-          new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-          new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -119,7 +117,7 @@ Tooltip label for an axis can be enabled by using [Enable](https://help.syncfus
 
 ## Customization
 
-The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customize the background color and font style of the crosshair label respectively. Color and Width of the crosshair line can be customized by using the [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Line) property in the crosshair.
+Customize the crosshair tooltip background and font using the `Fill` and `TextStyle` properties of `CrosshairTooltip`. Customize the crosshair line color and width using the [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Line) property in `Crosshair`.
 
 ```cshtml
 
@@ -147,7 +145,6 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -160,15 +157,15 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -178,9 +175,7 @@ The `Fill` and `TextStyle` property of the `CrosshairTooltip` is used to customi
 
 ## Add Trackball
 
-Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point.
-
-Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of the crosshair to true and `Shared` property in `Tooltip` to true in chart.
+Trackball highlights the data point closest to the pointer and shows its details in the tooltip. Enable trackball behavior by setting the crosshair [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property to true and the `Shared` property in `Tooltip` to true.
 
 ```cshtml
 
@@ -197,7 +192,6 @@ Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -210,18 +204,18 @@ Trackball can be enabled by setting the [Enable](https://help.syncfusion.com/cr/
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
 ```
 
-![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.png)
\ No newline at end of file
+![Blazor Stock Chart with Trackball](images/common/blazor-stock-chart-trackball.png)
diff --git a/blazor/stock-chart/events.md b/blazor/stock-chart/events.md
index aec6391c23..da17d02d69 100644
--- a/blazor/stock-chart/events.md
+++ b/blazor/stock-chart/events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Events in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about events in Syncfusion Blazor Stock Chart component and much more details.
+description: Check out and learn here all about events in Syncfusion Blazor Stock Chart component and much more details.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor Stock Chart Component
 
-In this section, the list of events of Stock Chart component is provided which will be triggered for appropriate stock chart actions. The events should be provided to the Stock Chart using **StockChartEvents** component.
+This section lists the events of the Stock Chart component that are triggered for corresponding actions. Configure events using the **StockChartEvents** component.
 
-The following are the number of events supported for Stock Chart component.
+The Stock Chart supports the following events:
 
-* [OnLoaded](events#Onloaded)
+* [OnLoaded](events#onloaded)
 * [OnPointClick](events#onpointclick)
 * [PointMoved](events#pointmoved)
 * [RangeChange](events#rangechange)
@@ -25,9 +25,10 @@ The following are the number of events supported for Stock Chart component.
 
 ## OnLoaded
 
-[Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Loaded) event triggers after stock chart is rendered.
+[Loaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Loaded) event triggers after the stock chart is rendered.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfStockChart>
@@ -39,7 +40,6 @@ The following are the number of events supported for Stock Chart component.
 </SfStockChart>
 
 @code {
-
     public void StockChartLoaded(StockChartEventArgs args)
     {
         // Here you can customize your code
@@ -47,30 +47,32 @@ The following are the number of events supported for Stock Chart component.
 
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Y {get; set;}
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 },
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 },
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 },
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 }
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
+
 ```
 
 ## OnPointClick
 
-[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnPointClick) event triggers when data point is clicked.
+[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnPointClick) event triggers when a data point is clicked.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfStockChart>
@@ -82,7 +84,6 @@ The following are the number of events supported for Stock Chart component.
 </SfStockChart>
 
 @code {
-
     public void PointClick(StockChartPointEventArgs args)
     {
         // Here you can customize your code
@@ -90,30 +91,76 @@ The following are the number of events supported for Stock Chart component.
 
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Y {get; set;}
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
+
+## PointMoved
+
+[PointMoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_PointMoved) event triggers when the mouse moves over a data point.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents PointMoved="OnPointMoved"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void OnPointMoved(StockChartPointEventArgs args)
+    {
+        // Handle point move
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 },
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 },
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 },
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 }
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
+
 ```
 
 ## RangeChange
 
-[RangeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_RangeChange) event triggers when range is changed.
+[RangeChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_RangeChange) event triggers when the range is changed.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfStockChart>
@@ -125,7 +172,6 @@ The following are the number of events supported for Stock Chart component.
 </SfStockChart>
 
 @code {
-
     public void RangeChanged(StockChartRangeChangeEventArgs args)
     {
         // Here you can customize your code
@@ -133,21 +179,237 @@ The following are the number of events supported for Stock Chart component.
 
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Y {get; set;}
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10 },
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80 },
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50 },
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90 }
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
-```
\ No newline at end of file
+
+```
+
+## OnStockChartMouseClick
+
+[OnStockChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseClick) event triggers when a mouse click occurs on the chart surface.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents OnStockChartMouseClick="StockChartMouseClick"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void StockChartMouseClick(StockChartMouseEventArgs args)
+    {
+        // Handle chart click
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
+
+## OnStockChartMouseDown
+
+[OnStockChartMouseDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseDown) event triggers when a mouse button is pressed on the chart.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents OnStockChartMouseDown="StockChartMouseDown"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void StockChartMouseDown(StockChartMouseEventArgs args)
+    {
+        // Handle mouse down
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
+
+## OnStockChartMouseLeave
+
+[OnStockChartMouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseLeave) event triggers when the mouse pointer leaves the chart area.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents OnStockChartMouseLeave="StockChartMouseLeave"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void StockChartMouseLeave(StockChartMouseEventArgs args)
+    {
+        // Handle mouse leave
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
+
+## OnStockChartMouseMove
+
+[OnStockChartMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseMove) event triggers when the mouse moves over the chart.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents OnStockChartMouseMove="StockChartMouseMove"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void StockChartMouseMove(StockChartMouseEventArgs args)
+    {
+        // Handle mouse move
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
+
+## OnStockChartMouseUp
+
+[OnStockChartMouseUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_OnStockChartMouseUp) event triggers when a pressed mouse button is released over the chart.
+
+```cshtml
+@using Syncfusion.Blazor.Charts
+
+<SfStockChart>
+    <StockChartEvents OnStockChartMouseUp="StockChartMouseUp"></StockChartEvents>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Column" XName="Date" YName="Y">
+        </StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
+
+@code {
+    public void StockChartMouseUp(StockChartMouseEventArgs args)
+    {
+        // Handle mouse up
+    }
+
+    public class ChartData
+    {
+        public DateTime Date { get; set; }
+        public Double Y { get; set; }
+    }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
+   };
+}
+
+```
diff --git a/blazor/stock-chart/export-print.md b/blazor/stock-chart/export-print.md
index e42433f70a..8f8167f469 100644
--- a/blazor/stock-chart/export-print.md
+++ b/blazor/stock-chart/export-print.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Print and Export in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about print and export in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn how to configure and use print and export feature in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
 
 # Print and Export in Blazor Stock Chart Component
 
-The rendered stock chart can be exported to `JPEG`, `PNG`, `SVG`, `PDF`, `XLSX`, or `CSV` format using the export dropdown button in the period selector toolbar. The required format can be chosen using the export dropdown button in stock-chart.
+The rendered stock chart supports exporting to JPEG, PNG, SVG, PDF, XLSX, and CSV through the export dropdown in the period selector toolbar. The required format can be selected from the export dropdown in the stock chart toolbar.
 
-The rendered stock chart can be printed directly using print button in period selector toolbar.
+The rendered stock chart can be printed directly using the print button in the period selector toolbar.
 
 ```cshtml
 
@@ -31,28 +31,27 @@ The rendered stock chart can be printed directly using print button in period se
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Open {get; set;}
-        public Double Low {get; set;}
-        public Double Close {get; set;}
-        public Double High {get; set;}
-        public Double Volume {get; set;}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set;} 
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -60,9 +59,9 @@ The rendered stock chart can be printed directly using print button in period se
 
 ![Printing in Blazor Stock Chart](images/print/blazor-stock-chart-printing.png)
 
-## Disable Export and print
+## Disable export and print
 
-Empty the value of `ExportType` to disable the Export.
+Set the `ExportType` property to an empty list to disable export options.
 
 ```cshtml
 
@@ -75,28 +74,27 @@ Empty the value of `ExportType` to disable the Export.
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Open {get; set;}
-        public Double Low {get; set;}
-        public Double Close {get; set;}
-        public Double High {get; set;}
-        public Double Volume {get; set;}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set;} 
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -104,22 +102,23 @@ Empty the value of `ExportType` to disable the Export.
 
 ![Disabling Export and Print in Blazor Stock Chart](images/print/blazor-stock-chart-disable-print-export.png)
 
-## Customizing the exported chart using Exporting event
+## Customize the exported chart using the Exporting event
 
-The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event allows users to customize the exported stock chart before it is generated. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides the following options for customizing the exported stock chart:
+The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event enables customization of the exported stock chart before file generation. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides the following options:
 
-* `Cancel`: This property cancels the export process when set to **true**.
-* `Height`: This property specifies the height of the exported chart. When the value is changed, the chart's height is updated. It is not applicable for **XLSX** and **CSV** formats.
-* `Width`: This property specifies the width of the exported chart. Changing the value updates the chart's width. It is not applicable for **XLSX** and **CSV** formats.
-* `Workbook`: Represents the workbook generated during export, applicable only for **XLSX** and **CSV** formats.
+- `Cancel`: Cancels the export process when set to true.
+- `Height`: Specifies the height of the exported chart. Not applicable for XLSX and CSV formats.
+- `Width`: Specifies the width of the exported chart. Not applicable for XLSX and CSV formats.
+- `Workbook`: Represents the workbook generated during export. Applicable only for XLSX and CSV formats.
 
-### Customizing the exported Excel documents
+### Customize the exported Excel documents
 
-The [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the event argument of [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event allows the users to customize the exported Excel sheet by modifying the properties of rows, columns, and cells, such as changing the font color, font size, font name, making the text bold, setting a background color, and center-aligning the text within the cells, before the file is generated.
+The [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartEvents.html#Syncfusion_Blazor_Charts_StockChartEvents_Exporting) event arguments allows customization of the exported Excel sheet by modifying rows, columns, and cells. Examples include changing font color, font size, and font name; applying bold text; setting background color; and center‑aligning text before the file is generated.
 
-In the code below, when the stock chart is exported to Excel format, the exported Excel document is customized using the `Exporting` event. If export types other than **XLSX** or **CSV** are selected, the `Workbook` property will be **null**, and the chart's width will be set to **500px**.
+In the following example, when the stock chart is exported to Excel format, the exported Excel document is customized using the `Exporting` event. If a type other than XLSX or CSV is selected, the `Workbook` property is null, and the chart width is set to **500px**.
 
 ```cshtml
+
 @using Microsoft.AspNetCore.Components.Web;
 @using Syncfusion.PdfExport;
 @using Syncfusion.ExcelExport; 
@@ -140,28 +139,27 @@ In the code below, when the stock chart is exported to Excel format, the exporte
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Open {get; set;}
-        public Double Low {get; set;}
-        public Double Close {get; set;}
-        public Double High {get; set;}
-        public Double Volume {get; set;}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set;} 
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 
     public void BeforeExport(ChartExportEventArgs args)
diff --git a/blazor/stock-chart/last-data-label.md b/blazor/stock-chart/last-data-label.md
index 572d6f057c..56e61e868e 100644
--- a/blazor/stock-chart/last-data-label.md
+++ b/blazor/stock-chart/last-data-label.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Last Data Label in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about Last Data Label in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn how to enable and customize the Last Data Label in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Last Data Label in Blazor Stock Chart Component
 
-The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the stock chart. The label can be enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) property.
+The last data label highlights the most recent data point in a series by displaying a label with an indicator line. This improves readability and makes the latest value easy to identify in the stock chart. The label is enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) configuration.
 
 ## Enable last data label
 
-To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_ShowLabel) property of the `StockChartLastDataLabel` configuration to **true** within the series settings.
+To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_ShowLabel) property of `StockChartLastDataLabel` to **true** in the series settings.
 
 ```cshtml
 
@@ -29,7 +29,6 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -60,21 +59,21 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
 
 ## Customization
 
-The appearance of the last data label can be customized using various properties defined across different settings.
+The appearance of the last data label can be customized using properties available in the following settings.
 
-In the `StockChartLastDataLabel`:
-* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Background): Sets the background color of the last data label container.
+In `StockChartLastDataLabel`:
+* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Background): Sets the background color of the label container.
 * [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineColor): Sets the color of the indicator line.
 * [LineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineWidth): Sets the width of the indicator line.
 * [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_DashArray): Defines the dash pattern of the indicator line.
 * [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Rx): Sets the horizontal corner radius of the label container.
 * [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Ry): Sets the vertical corner radius of the label container.
 
-In the [StockChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html):
+In [StockChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html):
 * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Color): Sets the border color of the label container.
 * [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Width): Sets the border width of the label container.
 
-In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html):
+In [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html):
 * [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Size): Sets the font size of the label text.
 * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Color): Sets the font color of the label text.
 * [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_FontFamily): Specifies the font family of the label text.
@@ -98,7 +97,6 @@ In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncf
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -125,4 +123,4 @@ In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncf
 
 ```
 
-![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.png)
\ No newline at end of file
+![Last Data Label Customization in Blazor Stock Chart](images/last-value/blazor-stock-chart-last-value-label-customization.png)
diff --git a/blazor/stock-chart/legend.md b/blazor/stock-chart/legend.md
index 797985f4c0..262dddc258 100644
--- a/blazor/stock-chart/legend.md
+++ b/blazor/stock-chart/legend.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Legend in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about Legend in Syncfusion Blazor Stock Chart component and much more details.
+description: Check out and learn how to configure and customize the Legends in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,22 +9,22 @@ documentation: ug
 
 # Legend in Blazor Stock Chart Component
 
-Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in the [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html).
+The legend describes the series rendered in the Stock Chart. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html).
 
 ## Enable Legend
 
-To display the legend for the Stock Chart, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**.
+To display the legend, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) property in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html) to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true"></StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple  Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true"></StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple  Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -39,33 +39,32 @@ To display the legend for the Stock Chart, set the [Visible](https://help.syncfu
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend](images/blazor-stock-chart-legend.png)
 
-
 ## Legend Position
 
-By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property, legend can be placed at **Left**, **Right**, **Top**, **Bottom** or **Custom** of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default.
+Use the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Position) property to place the legend at the **Left**, **Right**, **Top**, **Bottom**, or **Custom** position. By default, the legend appears at the **Bottom** of the Stock Chart.
 
 ```cshtml
 
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Position="LegendPosition.Top"></StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="LegendPosition.Top"></StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -80,33 +79,34 @@ By using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend position](images/blazor-stock-chart-legend-position.png)
 
-The **Custom** position helps to position the legend anywhere in the Stock Chart using x and y coordinates.
+The **Custom** position allows placing the legend anywhere within the Stock Chart using x and y coordinates.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Position="LegendPosition.Custom">
-                <StockChartLocation X="50" Y="50"></StockChartLocation>
-                <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="LegendPosition.Custom">
+        <StockChartLocation X="50" Y="50"></StockChartLocation>
+        <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -120,39 +120,40 @@ The **Custom** position helps to position the legend anywhere in the Stock Chart
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with custom legend position](images/blazor-stock-chart-legend-location.png)
 
 ## Reverse Legend
 
-You can reverse the order of the legend items by using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, legend for the first series in the collection will be placed first.
+Reverse the order of legend items using the [Reversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Reversed) property. By default, the legend entry for the first series appears first.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Reversed="true">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Reversed="true">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
 
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline"XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline"XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
 
-            </StockChartSeriesCollection>
-        </SfStockChart>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -166,33 +167,34 @@ You can reverse the order of the legend items by using the [Reversed](https://he
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend reversed](images/blazor-stock-chart-legend-reversed.png)
 
 ## Legend Alignment
 
-Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property, place the legend in **Centre**, **Far**, or **Near** alignment.
+Use the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Alignment) property to align the legend to **Center**, **Far**, or **Near**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" Alignment="Alignment.Near">
-            <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails"  XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Alignment="Alignment.Near">
+    <StockChartLegendBorder Color="Black" Width="2"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails"  XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -207,13 +209,14 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend alignment](images/blazor-stock-chart-legend-alignment.png)
@@ -222,21 +225,20 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ### Legend Shape
 
-The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) can be used to change the shape of the legend icon. The default icon shape for legends is **SeriesType**.
-
+The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#properties) changes the legend icon shape. The default icon shape is based on **SeriesType**.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-            <StockChartLegendSettings Visible="true" ShapeHeight="13" ShapeWidth="13">
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"  LegendShape="LegendShape.Diamond"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" ShapeHeight="13" ShapeWidth="13">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"  LegendShape="LegendShape.Diamond"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -250,34 +252,35 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend shape](images/blazor-stock-chart-legend-shape.png)
 
 ### Legend Size
 
-When the legend is placed on the top or bottom of the Stock Chart, it takes up 20% - 25% of the Stock Chart's height, and 20% - 25% of the Stock Chart's width when it is positioned on the left or right side of the Stock Chart. So, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties can be used to adjust the default legend size.
+When placed at the top or bottom, the legend occupies approximately 20%–25% of the chart height; when positioned at the left or right, it occupies approximately 20%–25% of the chart width. Use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Height) properties to adjust the legend size.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Height="50" Width="300">
-                <StockChartLegendBorder Color="blue" Width="1"></StockChartLegendBorder>
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-               <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Height="50" Width="300">
+        <StockChartLegendBorder Color="blue" Width="1"></StockChartLegendBorder>
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -292,32 +295,33 @@ When the legend is placed on the top or bottom of the Stock Chart, it takes up 2
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend size](images/blazor-stock-chart-legend-size.png)
 
 ### Legend Shape Size
 
-The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape.
+Use the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ShapeWidth) properties to control the legend icon dimensions.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Height="50" Width="300" ShapeHeight="15" ShapeWidth="15">
-            </StockChartLegendSettings>
-            <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Height="50" Width="300" ShapeHeight="15" ShapeWidth="15">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Inc" Type="ChartSeriesType.Candle"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -332,34 +336,34 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend shape size](images/blazor-stock-chart-legend-size-shape.png)
 
-
 ### Legend Item Padding
 
-The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property can be used to adjust the space between the legend items.
+Use the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ItemPadding) property to adjust spacing between legend items.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" ItemPadding="30">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" ItemPadding="30">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -374,35 +378,36 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend item padding](images/Blazor-stock-chart-legend-itemPadding.png)
 
 ### Legend Paging
 
-When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages.
+When legend items exceed the available bounds, paging is enabled automatically. End users can navigate between pages using the navigation buttons.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Width="100" Height="70" Padding="10" ShapePadding="10">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Width="100" Height="70" Padding="10" ShapePadding="10">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
   
-
 @code {
     public class ChartData
     {
@@ -416,35 +421,35 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend paging](images/blazor-stock-chart-legend-paging.png)
 
-
 ### Legend Text Wrap
 
-When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. End user can also wrap the legend text based on the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property.
+When legend text exceeds the container, enable wrapping using the [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_TextWrap) property. Wrapping can also be controlled using the [MaxLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_MaxLabelWidth) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price">
-           <StockChartLegendSettings Visible="true" Position="@LegendPosition.Right" TextWrap="@TextWrap.Wrap" MaxLabelWidth="70">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price">
+    <StockChartLegendSettings Visible="true" Position="@LegendPosition.Right" TextWrap="@TextWrap.Wrap" MaxLabelWidth="70">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -459,34 +464,35 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with legend text wrap](images/blazor-stock-chart-legend-text-wrap.png)
 
 ## Series selection based on legend
 
-By default, when you click on the legend item, the appropriate series visibility is collapsed. On the other hand, [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property is used to disable such functionality.
+By default, clicking a legend item collapses the visibility of the corresponding series. The [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_ToggleVisibility) property disables this behavior when set to false.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
-           <StockChartLegendSettings Visible="true"  ToggleVisibility="false">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
+    <StockChartLegendSettings Visible="true"  ToggleVisibility="false">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -501,34 +507,35 @@ By default, when you click on the legend item, the appropriate series visibility
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
 ![Blazor Stock Chart with selection mode](images/blazor-stock-chart-selection-mode.png)
 
 ## Hiding legend item
 
-The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) will be displayed as the legend text by default. You can skip the legend for particular series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property.
+The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) is used as the legend text by default. Skip the legend for a specific series by providing an empty string for the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Name) property.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
-        <SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
-           <StockChartLegendSettings Visible="true"  ToggleVisibility="true">
-            </StockChartLegendSettings>
-           <StockChartSeriesCollection>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
-                <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
-            </StockChartSeriesCollection>
-        </SfStockChart>
-  
+<SfStockChart Title="AAPL Stock Price" SelectionMode="SelectionMode.Series">
+    <StockChartLegendSettings Visible="true"  ToggleVisibility="true">
+    </StockChartLegendSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Apple Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Line" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Google Stock Price"></StockChartSeries>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.Spline" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Name="Tesla Stock Price"></StockChartSeries>
+    </StockChartSeriesCollection>
+</SfStockChart>
 
 @code {
     public class ChartData
@@ -543,13 +550,14 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 }
    };
 }
+
 ```
 
-![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
\ No newline at end of file
+![Blazor Stock Chart hiding legend item](images/blazor-stock-chart-hidding-legend.png)
diff --git a/blazor/stock-chart/panning.md b/blazor/stock-chart/panning.md
index 011bee8756..c061109ede 100644
--- a/blazor/stock-chart/panning.md
+++ b/blazor/stock-chart/panning.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Panning in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about panning functionality in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn here all about panning functionality in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart
 documentation: ug
@@ -9,9 +9,10 @@ documentation: ug
 
 # Panning in Blazor Stock Chart Component 
 
-By default, panning is enabled in the Stock Chart, ensuring that users can immediately start interacting with the chart upon rendering. This default behavior is controlled by the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property, which is set to **true** by default in the [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html).
+Panning is enabled by default in the Stock Chart. This behavior is controlled by the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property of [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), which defaults to **true**.
 
 ```cshtml
+
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Charts
 @inject NavigationManager NavigationManager
@@ -32,7 +33,7 @@ else
             <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
             <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
         </StockChartPrimaryYAxis>
-        <StockChartZoomSettings EnablePan=true></StockChartZoomSettings>
+        <StockChartZoomSettings EnablePan="true"></StockChartZoomSettings>
         <StockChartSeriesCollection>
             <StockChartSeries DataSource="@dataSource" Type="ChartSeriesType.HiloOpenClose" XName="x"></StockChartSeries>
         </StockChartSeriesCollection>
@@ -40,8 +41,8 @@ else
             <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
         </StockChartChartArea>
     </SfStockChart>
-
 }
+
 @code {
     private ChartData[] dataSource;
 
@@ -65,4 +66,4 @@ else
 
 ![Blazor Stock Chart with Panning](images/panning.gif)
 
-N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals.
\ No newline at end of file
+N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature representations and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to see various stock chart types and time-dependent data rendered at equal intervals.
diff --git a/blazor/stock-chart/period-selector.md b/blazor/stock-chart/period-selector.md
index 68ea5b1bfb..e9aa28f309 100644
--- a/blazor/stock-chart/period-selector.md
+++ b/blazor/stock-chart/period-selector.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Period Selector in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about period selector in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn here all about period selector in the Syncfusion Blazor Stock Chart component and more.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,13 +11,13 @@ documentation: ug
 
 # Period Selector in Blazor Stock Chart Component
 
-The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart.
+The period selector enables selecting a range with specified periods. The period selector is enabled by default in the stock chart.
 
 ## Periods
 
 <!-- markdownlint-disable MD034 -->
 
-Periods is an array of objects that allows users to specify the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Periods). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text to be displayed on button. The `IntervalType` property allows users to customize the intervals of the buttons. The `IntervalType` property supports the following interval types:
+Periods is an array of objects that defines the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Periods). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text displayed on the button. The `IntervalType` property customizes the intervals of the buttons and supports the following types:
 
 * Auto
 * Years
@@ -55,7 +55,6 @@ Periods is an array of objects that allows users to specify the range of [Period
 </SfStockChart>
 
 @code {
-
     public List<TechnicalIndicators> IndicatorType = new List<TechnicalIndicators>() { };
     public List<TrendlineTypes> TrendlineType = new List<TrendlineTypes>() { };
     public List<ExportType> ExportType = new List<ExportType>() { };
@@ -73,15 +72,15 @@ Periods is an array of objects that allows users to specify the range of [Period
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
@@ -92,7 +91,7 @@ Periods is an array of objects that allows users to specify the range of [Period
 
 ## Visibility of period selector
 
-The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_EnablePeriodSelector) property allows users to toggle the visibility of period selector.
+The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_EnablePeriodSelector) property toggles the visibility of the period selector.
 
 ```cshtml
 
@@ -105,7 +104,6 @@ The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -118,18 +116,18 @@ The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
 ```
 
-![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.png)
\ No newline at end of file
+![Visibility of Period Selector in Blazor Stock Chart](images/common/blazor-stock-chart-visibility-period-selector.png)
diff --git a/blazor/stock-chart/range-selector.md b/blazor/stock-chart/range-selector.md
index a6581b592c..fd89d228fb 100644
--- a/blazor/stock-chart/range-selector.md
+++ b/blazor/stock-chart/range-selector.md
@@ -1,9 +1,9 @@
 ---
 layout: post
 title: Range Selector in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about range selector in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn how to configure and customize range selector in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
-control: Stock Chart 
+control: Stock Chart
 documentation: ug
 ---
 
@@ -11,17 +11,17 @@ documentation: ug
 
 # Range Selector in Blazor Stock Chart Component
 
-The range selector allows to select a range with specified periods. By default, the range selector is enabled in stock chart.
+The range selector enables selection of a date range using specified periods. By default, the range selector is enabled in the stock chart.
 
 ## Selecting Range
 
-The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways to select a range.
+The left and right thumbs of the RangeNavigator indicate the selected range across large datasets. The range can be selected in the following ways.
 
 * By dragging the thumbs.
-* By tapping on the labels.
-* By setting the start and end through Date Range button.
+* By tapping the labels.
+* By choosing a start and end date using the Date Range button.
 
-Following code example shows the [EnableSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_EnableSelector) property that allows users to toggle the visibility of enable selector.
+The following code example shows the [EnableSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_EnableSelector) property used to toggle the visibility of the range selector.
 
 ```cshtml
 
@@ -34,7 +34,6 @@ Following code example shows the [EnableSelector](https://help.syncfusion.com/cr
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date {get; set;}
@@ -46,19 +45,19 @@ Following code example shows the [EnableSelector](https://help.syncfusion.com/cr
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
-{
-        new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-        new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-        new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-        new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-        new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-        new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-        new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-        new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-        new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
 ```
 
-![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.png)
\ No newline at end of file
+![Range Selection in Blazor Stock Chart](images/common/blazor-stock-chart-range-selection.png)
diff --git a/blazor/stock-chart/series-types.md b/blazor/stock-chart/series-types.md
index 430dc6ab69..3d0cdb56d3 100644
--- a/blazor/stock-chart/series-types.md
+++ b/blazor/stock-chart/series-types.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Series Types in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about series types in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn about the supported series types in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,13 +9,13 @@ documentation: ug
 
 # Series Types in Blazor Stock Chart Component
 
-Stock Chart supports 6 major types of series namely `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle` and `Candle`. By using the series dropdown button you can navigate between the above listed series types.
+The Stock Chart supports six series types: `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle`, and `Candle`. Use the series selector to switch between these types during interaction.
 
 <!-- markdownlint-disable MD036 -->
 
 **Line**
 
-To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Line`.
+To render a line series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Line`.
 
 ```cshtml
 
@@ -29,7 +29,6 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -38,15 +37,15 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-         new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-         new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-         new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-         new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-         new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-         new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-         new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-         new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+        new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Y = 700},
+        new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
 
@@ -56,7 +55,7 @@ To render a line series, use series [Type](https://help.syncfusion.com/cr/blazor
 
 **Spline**
 
-To render a spline series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Spline`.
+To render a spline series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Spline`.
 
 ```cshtml
 
@@ -70,7 +69,6 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -79,15 +77,15 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-        new ChartData { Date = new DateTime(2012, 04, 02), Y= 100},
-        new ChartData { Date = new DateTime(2012, 04, 09), Y= 10},
-        new ChartData { Date = new DateTime(2012, 04, 16), Y= 500},
-        new ChartData { Date = new DateTime(2012, 04, 23), Y= 80},
-        new ChartData { Date = new DateTime(2012, 04, 30), Y= 200},
-        new ChartData { Date = new DateTime(2012, 05, 07), Y= 600},
-        new ChartData { Date = new DateTime(2012, 05, 14), Y= 50},
-        new ChartData { Date = new DateTime(2012, 05, 21), Y= 700},
-        new ChartData { Date = new DateTime(2012, 05, 28), Y= 90}
+         new ChartData { Date = new DateTime(2012, 04, 02), Y = 100 },
+         new ChartData { Date = new DateTime(2012, 04, 09), Y = 10 },
+         new ChartData { Date = new DateTime(2012, 04, 16), Y = 500 },
+         new ChartData { Date = new DateTime(2012, 04, 23), Y = 80 },
+         new ChartData { Date = new DateTime(2012, 04, 30), Y = 200 },
+         new ChartData { Date = new DateTime(2012, 05, 07), Y = 600 },
+         new ChartData { Date = new DateTime(2012, 05, 14), Y = 50 },
+         new ChartData { Date = new DateTime(2012, 05, 21), Y = 700},
+         new ChartData { Date = new DateTime(2012, 05, 28), Y = 90 }
    };
 }
 
@@ -97,11 +95,11 @@ To render a spline series, use series [Type](https://help.syncfusion.com/cr/blaz
 
 **HollowCandle**
 
-To render a hollow candle series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Candle` and set `EnableSolidCandle` as false.
+To render a hollow candle series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Candle` and set `EnableSolidCandle` to `false`.
 
 **Hilo**
 
-To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Hilo`.
+To render a hilo series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Hilo`.
 
 ```cshtml
 
@@ -115,7 +113,6 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor
 </SfStockChart>
 
 @code {
-
     public class StockChartData
     {
         public DateTime Date { get; set; }
@@ -128,16 +125,16 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-         new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-         new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-         new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-         new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-         new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-         new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-         new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-         new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-         new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
-     };
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+    };
 }
 
 ```
@@ -146,7 +143,7 @@ To render a hilo series, use series [Type](https://help.syncfusion.com/cr/blazor
 
 **HiloOpenClose**
 
-To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `HiloOpenClose`.
+To render a HiloOpenClose series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `HiloOpenClose`.
 
 ```cshtml
 
@@ -160,7 +157,6 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/
 </SfStockChart>
 
 @code {
-
     public class StockChartData
     {
         public DateTime Date { get; set; }
@@ -173,15 +169,15 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -191,7 +187,7 @@ To render a HiLoOpenClose series, use series [Type](https://help.syncfusion.com/
 
 **Candle**
 
-To render a candle series, use series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) as `Candle`.
+To render a candle series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Type) to `Candle`.
 
 ```cshtml
 
@@ -204,8 +200,7 @@ To render a candle series, use series [Type](https://help.syncfusion.com/cr/blaz
 </SfStockChart>
 
 @code {
-
-     public class StockChartData
+    public class StockChartData
     {
         public DateTime Date { get; set; }
         public Double Y { get; set; }
@@ -218,18 +213,18 @@ To render a candle series, use series [Type](https://help.syncfusion.com/cr/blaz
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
 ```
 
-![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.png)
\ No newline at end of file
+![Blazor Candle Stock Chart](images/common/blazor-candle-stock-chart.png)
diff --git a/blazor/stock-chart/stock-events.md b/blazor/stock-chart/stock-events.md
index 89356139e8..e245e578f5 100644
--- a/blazor/stock-chart/stock-events.md
+++ b/blazor/stock-chart/stock-events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Stock Events in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about stock events in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn how to configure and customize stock events in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,27 +9,27 @@ documentation: ug
 
 # Stock Events in Blazor Stock Chart Component
 
-The stock events are used to mark specific events such as market open and close, highest or lowest price reached, year/quarter start and end on a Chart for a specific date. In this section, **SplineSeries** is used to represent selected data value. One can customize the specific data value using `StockEvents`.
+Stock events mark notable occurrences such as market open and close, highest or lowest price, and quarter or year boundaries on specific dates. In this section, **SplineSeries** is used to represent selected data values. Specific data values can be customized using `StockEvents`.
 
 ## Date
 
-The [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Date) property is used to display the stock event in the Chart at the specified time. For example, Quarter 1 ends on March 31, 2021, and the stock event date must be set to March 31, 2021. More customization options are available in the immediate sections such as **Text**, **Type**, **Description**, and so on.
+The [Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Date) property displays the stock event on the chart at the specified time. For example, when Quarter 1 ends on March 31, 2021, set the stock event date to March 31, 2021. Additional customization options are available in the following sections, including **Text**, **Type**, and **Description**.
 
 ## Text
 
-The text acts as a quick and short representation of the stock event, such as **Q1** for Quarter 1 and **High** for highest price over a period; it can be customized separately for each stock event using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) property.
+Text provides a concise label for a stock event, such as **Q1** for Quarter 1 or **High** for the highest price over a period. Configure this per event using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) property.
 
 ## Type
 
-The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FlagType.html) property can be used to set the background shape of a stock event, with options such as **Circle**, **Square**, **Flag**, **Text**, **Sign**, **Triangle**, **InvertedTriangle**, **ArrowUp**, **ArrowDown**, **ArrowLeft**, and **ArrowRight**.
+The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FlagType.html) property sets the background shape of a stock event. Available options include **Circle**, **Square**, **Flag**, **Text**, **Sign**, **Triangle**, **InvertedTriangle**, **ArrowUp**, **ArrowDown**, **ArrowLeft**, and **ArrowRight**.
 
 ## Background
 
-The [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Background) property of the stock event is used to customize the color of the background shape, which accepts values in hex and rgba as a valid CSS color string.
+The [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Background) property customizes the color of the background shape. It accepts valid CSS color strings such as hex or rgba values.
 
 ## Description
 
-The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) property specifies the content of the stock event tooltip that appears on the Chart when the mouse is moved over the stock event. The description will be displayed as the text of the tooltip. For instance, if [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) **Q1** contains a [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) as **Quarter 1**, the tooltip will show **Quarter 1**.
+The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) property specifies the tooltip content that appears when hovering over a stock event. For example, when [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Text) is **Q1** and the [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartStockEvent.html#Syncfusion_Blazor_Charts_StockChartStockEvent_Description) is **Quarter 1**, the tooltip displays **Quarter 1**.
 
 ```cshtml
 
@@ -40,6 +40,7 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price" SeriesType="@SeriesValue">
@@ -70,9 +71,7 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
     </SfStockChart>
 }
 
-
-@code{
-
+@code {
     public class ChartData
     {
         public DateTime date { get; set; }
@@ -112,26 +111,25 @@ The [Description](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
     {
         StockEvents = new List<StockEventDetails>()
         {
-            new StockEventDetails(){ Date = new DateTime(2011, 03, 01), Text ="Q2", Description = "2012 Quarter2", Type = FlagType.Flag, Background = "#6C6D6D", BorderColor = "#6C6D6D"},
-            new StockEventDetails(){ Date = new DateTime(2012, 03, 20), Text ="Open", Description = "Markets opened", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"},
-            new StockEventDetails(){ Date = new DateTime(2012, 06, 01), Text ="Q3", Description = "2013 Quarter3", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D"},
-            new StockEventDetails(){ Date = new DateTime(2012, 09, 01), Text ="Q4", Description = "2013 Quarter4", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D"},
-            new StockEventDetails(){ Date = new DateTime(2013, 07, 30), Text ="G", Description = "Google Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"},
-            new StockEventDetails(){ Date = new DateTime(2013, 10, 01), Text ="Y", Description = "Yahoo Stock", Background = "#841391", Type = FlagType.Square, BorderColor = "#841391"},
-            new StockEventDetails(){ Date = new DateTime(2013, 12, 04), Text ="Y2", Description = "Year 2013", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries = false},
-            new StockEventDetails(){ Date = new DateTime(2016, 03, 01), Text ="Q2", Description = "2014 Quarter2", Background = "#6C6D6D", Type = FlagType.Circle, BorderColor = "#6C6D6D"},
-            new StockEventDetails(){ Date = new DateTime(2016, 06, 01), Text ="Q3", Description = "2014 Quarter3", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"},
-            new StockEventDetails(){ Date = new DateTime(2016, 09, 01), Text ="Q4", Description = "2014 Quarter4", Background = "#f48a21", Type = FlagType.Flag, BorderColor = "#f48a21"},
-            new StockEventDetails(){ Date = new DateTime(2016, 12, 01), Text ="Y4", Description = "Year 2015", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries= false},
-            new StockEventDetails(){ Date = new DateTime(2016, 02, 02), Text ="End", Description = "Markets closed", Background = "#3ab0f9", Type = FlagType.ArrowDown, BorderColor = "#3ab0f9"},
-            new StockEventDetails(){ Date = new DateTime(2017, 01, 07), Text ="A", Description = "Amazon Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"},
-            new StockEventDetails(){ Date = new DateTime(2017, 01, 02), Text ="Q1", Description = "AAPL Stock", Background = "#dd3c9f", Type = FlagType.Text, BorderColor = "#dd3c9f"},
-            new StockEventDetails(){ Date = new DateTime(2017, 02, 12), Text ="Close", Description = "Markets closed", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21"}
+            new StockEventDetails() { Date = new DateTime(2011, 03, 01), Text ="Q2", Description = "2012 Quarter2", Type = FlagType.Flag, Background = "#6C6D6D", BorderColor = "#6C6D6D" },
+            new StockEventDetails() { Date = new DateTime(2012, 03, 20), Text ="Open", Description = "Markets opened", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" },
+            new StockEventDetails() { Date = new DateTime(2012, 06, 01), Text ="Q3", Description = "2013 Quarter3", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D" },
+            new StockEventDetails() { Date = new DateTime(2012, 09, 01), Text ="Q4", Description = "2013 Quarter4", Background = "#6C6D6D", Type = FlagType.Flag, BorderColor = "#6C6D6D" },
+            new StockEventDetails() { Date = new DateTime(2013, 07, 30), Text ="G", Description = "Google Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" },
+            new StockEventDetails() { Date = new DateTime(2013, 10, 01), Text ="Y", Description = "Yahoo Stock", Background = "#841391", Type = FlagType.Square, BorderColor = "#841391" },
+            new StockEventDetails() { Date = new DateTime(2013, 12, 04), Text ="Y2", Description = "Year 2013", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries = false },
+            new StockEventDetails() { Date = new DateTime(2016, 03, 01), Text ="Q2", Description = "2014 Quarter2", Background = "#6C6D6D", Type = FlagType.Circle, BorderColor = "#6C6D6D" },
+            new StockEventDetails() { Date = new DateTime(2016, 06, 01), Text ="Q3", Description = "2014 Quarter3", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" },
+            new StockEventDetails() { Date = new DateTime(2016, 09, 01), Text ="Q4", Description = "2014 Quarter4", Background = "#f48a21", Type = FlagType.Flag, BorderColor = "#f48a21" },
+            new StockEventDetails() { Date = new DateTime(2016, 12, 01), Text ="Y4", Description = "Year 2015", Background = "#6322e0", Type = FlagType.Pin, BorderColor = "#6322e0", ShowOnSeries= false },
+            new StockEventDetails() { Date = new DateTime(2016, 02, 02), Text ="End", Description = "Markets closed", Background = "#3ab0f9", Type = FlagType.ArrowDown, BorderColor = "#3ab0f9" },
+            new StockEventDetails() { Date = new DateTime(2017, 01, 07), Text ="A", Description = "Amazon Stock", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" },
+            new StockEventDetails() { Date = new DateTime(2017, 01, 02), Text ="Q1", Description = "AAPL Stock", Background = "#dd3c9f", Type = FlagType.Text, BorderColor = "#dd3c9f" },
+            new StockEventDetails() { Date = new DateTime(2017, 02, 12), Text ="Close", Description = "Markets closed", Background = "#f48a21", Type = FlagType.Circle, BorderColor = "#f48a21" }
         };
     }
-
 }
 
 ```
 
-![Events in Blazor Stock Chart](images/blazor-stock-chart-events.png)
\ No newline at end of file
+![Events in Blazor Stock Chart](images/blazor-stock-chart-events.png)
diff --git a/blazor/stock-chart/technical-indicators.md b/blazor/stock-chart/technical-indicators.md
index b28c509225..c604f8126c 100644
--- a/blazor/stock-chart/technical-indicators.md
+++ b/blazor/stock-chart/technical-indicators.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Technical Indicators in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about technical indicators in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn about technical indicators available in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,49 +11,48 @@ documentation: ug
 
 # Technical Indicators in Blazor Stock Chart Component
 
-A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction.
+A technical indicator is a mathematical calculation based on historical price, volume, or open interest information that aims to forecast financial market direction.
 
-Stock Chart supports 10 types of technical indicators namely `Accumulation Distribution`, `ATR`, `EMA`, `SMA`, `TMA`, `Momentum`, `MACD`, `RSI`, `Stochastic`, `Bollinger Band`. By using indicator dropdown box, add and remove the required indicators types.
+Stock Chart supports 10 types of technical indicators: `Accumulation Distribution`, `ATR`, `EMA`, `SMA`, `TMA`, `Momentum`, `MACD`, `RSI`, `Stochastic`, and `Bollinger Band`. Use the indicator dropdown to add or remove the required indicator types.
 
 ## Accumulation Distribution
 
-Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `AccumulationDistribution`. To calculate the signal line [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Volume) field is additionally added with `DataSource`.
+Accumulation Distribution combines price and volume to show potential money flow into or out of a stock. To render an Accumulation Distribution indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `AccumulationDistribution`. To calculate the signal line, the [Volume](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Volume) field must be included in the `DataSource`.
 
 ## Average True Range (ATR)
 
-ATR measures the stock volatility by comparing the current value with the previous value. To render a Average True Range (ATR) Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Atr` .
+ATR measures stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Atr`.
 
 ## Exponential Moving Average (EMA)
 
-Moving average indicators are used to define the direction of the trend. To render a EMA indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Ema` .
+Moving average indicators are used to define the direction of the trend. To render an EMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Ema`.
 
 ## Momentum
 
-Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.ChartIndicator~Type.html) as `Momentum`. Momentum indicator will be represented by two lines (upperLine, signalLine). In momentum indicator the upperBand value is always rendered at the value 100.
+Momentum shows the speed at which the stock price is changing. To render a Momentum indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Momentum`. The Momentum indicator is represented by two lines (`upperLine`, `signalLine`). In the Momentum indicator, the `upperBand` value is always rendered at 100.
 
 ## Moving Average Convergence Divergence (MACD)
 
-MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Macd`. MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line.
+MACD is based on the difference between two EMAs. To render a MACD indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Macd`. The MACD indicator is represented by the MACD line, signal line, and MACD histogram. The histogram highlights the difference between the MACD line and the signal line.
 
 ## Relative Strength Index (RSI)
 
-RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Rsi`.RSI indicator will be represented by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties of indicator and the signalLine is calculated by RSI formula.
+RSI shows how strongly a stock is moving in its current direction. To render an RSI indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Rsi`. The RSI indicator is represented by three lines (`upperBand`, `lowerBand`, `signalLine`). The `upperBand` and `lowerBand` values are customized by the [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties, and the `signalLine` is calculated using the RSI formula.
 
 ## Simple Moving Average (SMA)
 
-Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Sma` .
+Moving average indicators are used to define the direction of the trend. To render an SMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Sma`.
 
 ## Stochastic
 
-It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `Stochastic`. Stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties of indicators and the periodLine and signalLine is render based on stochastic formula.
+Stochastic indicates how a stock compares to its previous state. To render a Stochastic indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Stochastic`. The Stochastic indicator is represented by four lines (`upperLine`, `lowerLine`, `periodLine`, `signalLine`). The `upperBand` and `lowerBand` values are customized by the [OverBought](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverBought) and [OverSold](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_OverSold) properties, and the `periodLine` and `signalLine` are rendered based on the stochastic formula.
 
 ## Triangular Moving Average (TMA)
 
-Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as
-`Tma` .
+Moving average indicators are used to define the direction of the trend. To render a TMA indicator, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `Tma`.
 
 ## Bollinger Band
 
 <!-- markdownlint-disable MD034 -->
 
-A Stock Chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) as `BollingerBand`.Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine) and [StandardDeviations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_StandardDeviation) is 2.
+A Stock Chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, set the indicator [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_Type) to `BollingerBand`. The Bollinger Band is represented by three lines (`upperLine`, `lowerLine`, `signalLine`), and the default [StandardDeviations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartIndicator.html#Syncfusion_Blazor_Charts_StockChartIndicator_StandardDeviation) value is 2.
diff --git a/blazor/stock-chart/tool-tip.md b/blazor/stock-chart/tool-tip.md
index e1f8b7f1fc..dedecc8d67 100644
--- a/blazor/stock-chart/tool-tip.md
+++ b/blazor/stock-chart/tool-tip.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Tooltip in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about tooltip in Syncfusion Blazor Stock Chart component and much more details.
+description: Check out and learn how to configure and customize tooltip in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,11 +11,11 @@ documentation: ug
 
 <!-- markdownlint-disable MD036 -->
 
-Stock Chart will display details about the points through tooltip, when the mouse is moved over the point.
+The Stock Chart displays data point details using a tooltip when the pointer hovers over a point.
 
 ## Default tooltip
 
-By default, tooltip is not visible. Enable the tooltip by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property to true .
+By default, the tooltip is disabled. Enable it by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Enable) property to true.
 
 ```cshtml
 
@@ -31,7 +31,6 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -44,19 +43,18 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
-
 ```
 
 ![Blazor Stock Chart with Tooltip](images/common/blazor-stock-chart-tooltip.png)
@@ -67,7 +65,7 @@ By default, tooltip is not visible. Enable the tooltip by setting [Enable](https
 
 <!-- markdownlint-disable MD013 -->
 
-By default, tooltip shows information of x and y value in points. In addition to that, more information can be shown in tooltip. For example the format `${point.x} : ${point.high}` shows point x and high value.
+By default, the tooltip shows the x and y values of a point. Additional information can be displayed using a format template. For example, the format `${point.x} : ${point.high}` shows the x-value and the high value.
 
 ```cshtml
 
@@ -83,7 +81,6 @@ By default, tooltip shows information of x and y value in points. In addition to
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -96,24 +93,23 @@ By default, tooltip shows information of x and y value in points. In addition to
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
-
 ```
 
 ## Customize the appearance of tooltip
 
-The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Fill) and [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Border) properties are used to customize the background color and border of the tooltip respectively. The [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_TextStyle) property in the tooltip is used to customize the font of the tooltip text.
+The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Fill) and [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_Border) properties customize the tooltip background and border. The [TextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings_TextStyle) property customizes the tooltip text font.
 
 ```cshtml
 
@@ -129,7 +125,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -142,81 +137,76 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
-
 ```
 
 ![Blazor Stock Chart with Custom Tooltip](images/common/blazor-stock-chart-custom-tooltip.png)
 
 ## Tooltip position
 
-By default, the tooltip appears on the left side of the stock chart. When moving the mouse pointer across data points, you can move the tooltip along with the mouse by setting `Nearest` to the `TooltipPosition` property in the [StockChartTooltipSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings__ctor).
+By default, the tooltip aligns to the left side of the Stock Chart. To move the tooltip with the pointer across data points, set `Nearest` to the `TooltipPosition` property in the [StockChartTooltipSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTooltipSettings.html#Syncfusion_Blazor_Charts_StockChartTooltipSettings__ctor).
 
 ```cshtml
-@using Syncfusion.Blazor
+
 @using Syncfusion.Blazor.Charts
-@inject NavigationManager NavigationManager
-@using System.Net.Http.Json
-@inject HttpClient Http
-
-@if (dataSource == null)
-{
-    <div>Loading...
-    </div>
-}
-else
-{ 
-    <SfStockChart>         
-        <StockChartPrimaryXAxis>
-            <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
-            <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
-        </StockChartPrimaryXAxis>
-        <StockChartPrimaryYAxis LabelFormat="n0">
-            <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
-            <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
-        </StockChartPrimaryYAxis>
-        <StockChartTooltipSettings Enable="true" TooltipPosition="TooltipPosition.Nearest"></StockChartTooltipSettings>
-        <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
-        <StockChartSeriesCollection>
-            <StockChartSeries DataSource="@dataSource" Type="ChartSeriesType.HiloOpenClose" XName="x"></StockChartSeries>
-        </StockChartSeriesCollection>
-        <StockChartChartArea>
-            <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
-        </StockChartChartArea>
-    </SfStockChart>    
-}
-@code{
-    private ChartData[] dataSource;
 
-    protected override async Task OnInitializedAsync()
-    {      
-        dataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri + "./googl.json");
-    }
+<SfStockChart>
+    <StockChartPrimaryXAxis>
+        <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
+        <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
+    </StockChartPrimaryXAxis>
+    <StockChartPrimaryYAxis LabelFormat="n0">
+        <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
+        <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
+    </StockChartPrimaryYAxis>
+    <StockChartTooltipSettings Enable="true" TooltipPosition="TooltipPosition.Nearest"></StockChartTooltipSettings>
+    <StockChartCrosshairSettings Enable="true"></StockChartCrosshairSettings>
+    <StockChartSeriesCollection>
+        <StockChartSeries DataSource="@StockDetails" Type="ChartSeriesType.HiloOpenClose" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
+    </StockChartSeriesCollection>
+    <StockChartChartArea>
+        <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
+    </StockChartChartArea>
+</SfStockChart>
 
+@code {
     public class ChartData
     {
-        public DateTime x { get; set; }
-        public double open { get; set; }
-        public double low { get; set; }
-        public double close { get; set; }
-        public double high { get; set; }
-        public double volume { get; set; }
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume { get; set; }
     }
+
+    public List<ChartData> StockDetails = new List<ChartData>
+    {
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
+   };
 }
 
 ```
 
 ![Blazor Stock Chart with moving tooltip](images/common/blazor-stock-chart-moving-tooltip.gif)
 
-N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals.
+N> Refer to the [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for a summary of key features and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to learn about chart types and time based data visualization at equal intervals.
diff --git a/blazor/stock-chart/trend-lines.md b/blazor/stock-chart/trend-lines.md
index e320658d34..e81ba31713 100644
--- a/blazor/stock-chart/trend-lines.md
+++ b/blazor/stock-chart/trend-lines.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Trendlines in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about trendlines in Syncfusion Blazor Stock Chart component and much more.
+description: Check out and learn how to configure and customize trendlines in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
 
 # Trendlines in Blazor Stock Chart Component
 
-Trendlines are used to show the direction and speed of price. Stock Chart supports 6 types of trendlines namely `Linear`, `Exponential`, `Logarithmic`, `Polynomial`, `Power`, `Moving Average`. By using trendline dropdown button, the required trendline type can be added or removed.
+Trendlines illustrate the direction and speed of price movement. The Stock Chart supports six trendline types: `Linear`, `Exponential`, `Logarithmic`, `Polynomial`, `Power`, and `Moving Average`. Using the trendline dropdown button, the required trendline type can be added or removed.
 
 ## Linear
 
-A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Linear`.
+A linear trendline is a best‑fit straight line used with simpler data sets. To render a linear trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Linear`.
 
 ```cshtml
 
@@ -37,7 +37,6 @@ A linear trendline is a best fit straight line that is used with simpler data se
 </SfStockChart>
 
 @code {
-
     public List<TechnicalIndicators> Indicator = new List<TechnicalIndicators>();
     public List<ChartSeriesType> SeriesType = new List<ChartSeriesType>();
     public List<ExportType> ExportType = new List<ExportType>();
@@ -54,15 +53,15 @@ A linear trendline is a best fit straight line that is used with simpler data se
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-         new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-         new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-         new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-         new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-         new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-         new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-         new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-         new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-         new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
      };
 }
 
@@ -72,9 +71,9 @@ A linear trendline is a best fit straight line that is used with simpler data se
 
 ## Logarithmic
 
-A logarithmic trendline is a best-fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use negative and/or positive values.
+A logarithmic trendline is a best fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use negative and positive values.
 
-To render a logarithmic trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Logarithmic`.
+To render a logarithmic trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Logarithmic`.
 
 ```cshtml
 
@@ -96,8 +95,8 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion.
         </StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
-@code {
 
+@code {
     public List<TechnicalIndicators> Indicator = new List<TechnicalIndicators>();
     public List<ChartSeriesType> SeriesType = new List<ChartSeriesType>();
     public List<ExportType> ExportType = new List<ExportType>();
@@ -114,15 +113,15 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion.
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-         new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-         new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-         new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-         new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-         new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-         new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-         new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-         new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-         new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
      };
 }
 
@@ -132,9 +131,9 @@ To render a logarithmic trendline, use trendline [Type](https://help.syncfusion.
 
 ## Exponential
 
-An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. You cannot create an exponential trendline, if your data contains zero or negative values.
+An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. An exponential trendline cannot be created if the data contains zero or negative values.
 
-To render a exponential trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Exponential`.
+To render an exponential trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Exponential`.
 
 ```cshtml
 
@@ -156,8 +155,8 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion.
         </StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
-@code {
 
+@code {
     public List<TechnicalIndicators> Indicator = new List<TechnicalIndicators>();
     public List<ChartSeriesType> SeriesType = new List<ChartSeriesType>();
     public List<ExportType> ExportType = new List<ExportType>();
@@ -174,15 +173,15 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion.
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
     };
 }
 
@@ -192,7 +191,7 @@ To render a exponential trendline, use trendline [Type](https://help.syncfusion.
 
 ## Polynomial
 
-A polynomial trendline is a curved line that is used when data fluctuates. To render a polynomial trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Polynomial`. `PolynomialOrder` used to define the polynomial value.
+A polynomial trendline is a curved line used when data fluctuates. To render a polynomial trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Polynomial`. The `PolynomialOrder` property defines the polynomial value.
 
 ```cshtml
 
@@ -214,6 +213,7 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re
         </StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
+
 @code {
 
     public List<TechnicalIndicators> Indicator = new List<TechnicalIndicators>();
@@ -232,15 +232,15 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re
 
     public List<StockChartData> StockDetails = new List<StockChartData>
     {
-         new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
-         new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
-         new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
-         new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
-         new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
-         new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
-         new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
-         new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
-         new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
      };
 }
 
@@ -250,13 +250,13 @@ A polynomial trendline is a curved line that is used when data fluctuates. To re
 
 ## Power
 
-A power trendline is a curved line that is best used with data sets that compare measurements that increase at a specific rate. To render a power trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `Power`.
+A power trendline is a curved line best used with data sets that compare measurements increasing at a specific rate. To render a power trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `Power`.
 
 ## Moving Average
 
-A moving average trendline smoothen out fluctuations in data to show a pattern or trend more clearly. To render a moving average trendline, use trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) as `MovingAverage`. 
+A moving average trendline smooths fluctuations in data to show a pattern or trend more clearly. To render a moving average trendline, set the trendline [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Type) to `MovingAverage`.
 
-`Period` property defines the period to find the moving average.
+The `Period` property defines the period used to calculate the moving average.
 
 ```cshtml
 
@@ -280,7 +280,6 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o
 </SfStockChart>
 
 @code {
-
     public List<TechnicalIndicators> Indicator = new List<TechnicalIndicators>();
     public List<ChartSeriesType> SeriesType = new List<ChartSeriesType>();
     public List<ExportType> ExportType = new List<ExportType>();
@@ -297,15 +296,15 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
@@ -315,7 +314,7 @@ A moving average trendline smoothen out fluctuations in data to show a pattern o
 
 ## Customization of Trendline
 
-The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Fill) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Width) properties are used to customize the appearance of the trendline.
+The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Fill) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartTrendline.html#Syncfusion_Blazor_Charts_StockChartTrendline_Width) properties customize the appearance of the trendline.
 
 ```cshtml
 
@@ -330,8 +329,8 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
         </StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
-@code {
 
+@code {
     public class ChartData
     {
         public DateTime Date { get; set; }
@@ -344,19 +343,19 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+        new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+        new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+        new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+        new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+        new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High = 85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+        new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+        new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+        new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+        new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
 
 ```
 
-![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.png)
\ No newline at end of file
+![Blazor Stock Chart with Custom Trendline](images/common/blazor-stock-chart-custom-trendline.png)
diff --git a/blazor/stock-chart/working-with-data.md b/blazor/stock-chart/working-with-data.md
index 12e4a18c30..9e662414b9 100644
--- a/blazor/stock-chart/working-with-data.md
+++ b/blazor/stock-chart/working-with-data.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Working with Data in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about working with data in Syncfusion Blazor Stock Chart component and more.
+description: Learn how to bind data to the Syncfusion Blazor Stock Chart using lists, Dynamic Objects, and much more.
 platform: Blazor
 control: Stock Chart 
 documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
 
 # Working with Data in Blazor Stock Chart Component
 
-The Stock Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property value or a list of business objects.
+The Stock Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports RESTful JSON services and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) can be set using either the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component or a list of business objects.
 
 It supports the following data binding methods:
 * List binding
@@ -19,7 +19,7 @@ It supports the following data binding methods:
 
 ## List binding
 
-To do list binding to the stock chart, an IEnumerable object can be assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The list data source can also be provided as an instance of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) or by using SfDataManager component. Now map the fields in list to
+To perform list binding, assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The list data source can also be provided using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by adding the SfDataManager component. Map the fields in the list to the
 [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_XName), [High](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_High), [Low](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Low), [Open](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Open) and [Close](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartSeries.html#Syncfusion_Blazor_Charts_StockChartSeries_Close)
 properties.
 
@@ -34,28 +34,27 @@ properties.
 </SfStockChart>
 
 @code {
-
     public class ChartData
     {
-        public DateTime Date {get; set;}
-        public Double Open {get; set;}
-        public Double Low {get; set;}
-        public Double Close {get; set;}
-        public Double High {get; set;}
-        public Double Volume{get; set;}
+        public DateTime Date { get; set; }
+        public Double Open { get; set; }
+        public Double Low { get; set; }
+        public Double Close { get; set; }
+        public Double High { get; set; }
+        public Double Volume{ get; set; }
     }
 
     public List<ChartData> StockDetails = new List<ChartData>
     {
-         new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-         new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-         new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-         new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-         new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-         new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-         new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-         new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-         new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+         new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068 },
+         new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864 },
+         new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+         new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749 },
+         new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365 },
+         new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692 },
+         new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233 },
+         new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215 },
+         new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584 }
    };
 }
 
@@ -63,11 +62,11 @@ properties.
 
 ![Binding Local Data in Blazor Stock Chart](images/common/blazor-stock-chart-bind-local-data.png)
 
-N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
+N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data binding.
 
 ### ExpandoObject binding
 
-Stock Chart is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the Stock chart as a list of **ExpandoObject**. The **ExpandoObject** can be bound to Stock chart by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property.
+Stock Chart is a generic component strongly bound to a model type. When the model type is unknown at compile time, data can be supplied as a list of **ExpandoObject** and assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -79,7 +78,7 @@ Stock Chart is a generic component which is strongly bound to a model type. Ther
     </StockChartSeriesCollection>
 </SfStockChart>
 
-@code{
+@code {
     private List<DateTime> Dates = new List<DateTime> { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), 
         new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) };
     public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
@@ -100,13 +99,14 @@ Stock Chart is a generic component which is strongly bound to a model type. Ther
         }).Cast<ExpandoObject>().ToList<ExpandoObject>();
     }
 }
+
 ```
 
 ![Blazor Stock Chart with ExpandoObject](images/common/blazor-stock-chart-expando.png)
 
 ### DynamicObject binding
 
-Stock Chart supports **DynamicObject** data source when the model type is unknown. The **DynamicObject** can be bound to Stock chart by assigning to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property.
+Stock Chart supports **DynamicObject** as a data source when the model type is unknown. Assign the **DynamicObject** list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property.
 
 ```cshtml
 
@@ -119,12 +119,14 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
     </StockChartSeriesCollection>
 </SfStockChart>
 
-@code{
+@code {
     private List<DateTime> Dates = new List<DateTime> { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), 
         new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) };
     public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };
+
     private Random randomNum = new Random();
     public List<DynamicDictionary> MedalDetails = new List<DynamicDictionary>() { };
+
     protected override void OnInitialized()
     {
         MedalDetails = Enumerable.Range(0, 5).Select((x) =>
@@ -139,6 +141,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
             return d;
         }).Cast<DynamicDictionary>().ToList<DynamicDictionary>();
     }
+
     public class DynamicDictionary : DynamicObject
     {
         Dictionary<string, object> dictionary = new Dictionary<string, object>();
@@ -148,6 +151,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
             string name = binder.Name;
             return dictionary.TryGetValue(name, out result);
         }
+
         public override bool TrySetMember(SetMemberBinder binder, object value)
         {
             dictionary[binder.Name] = value;
@@ -160,6 +164,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
         }
     }
 }
+
 ```
 
 ![Blazor Stock Chart with Dynamic Object](images/common/blazor-stock-chart-dynamic.png)
@@ -168,7 +173,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
 
 ### Binding with OData services
 
-[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). Refer to the following code example for remote data binding using OData service.
+[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for creating and consuming data. Data can be retrieved from an OData service using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The following example demonstrates remote data binding using an OData service.
 
 ```cshtml
 
@@ -198,7 +203,7 @@ Stock Chart supports **DynamicObject** data source when the model type is unknow
 
 ### Binding with OData v4 services
 
-The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the  [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**.
+The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, an upgraded version of the OData protocol. Refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information. To bind an OData v4 service, use **ODataV4Adaptor**.
 
 ```cshtml
 
@@ -231,6 +236,7 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) can be used to bind a Stock chart to a Web API created using an [OData](https://www.odata.org/documentation/odata-version-3-0/) endpoint.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 @using Syncfusion.Blazor.Data
 
@@ -257,7 +263,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
 
 ## Observable collection
 
-The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) provides notification when the dynamic changes of adding, removing, moving, and clearing the collection occur.
+The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1?view=net-6.0) (dynamic data collection) provides notifications when items are added, removed, or moved. The implemented [INotifyCollectionChanged](https://learn.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged?view=net-6.0) interface raises notifications for dynamic changes such as add, remove, move, and clear operations.
 
 ```cshtml
 
@@ -283,19 +289,20 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
         public double Volume { get; set; }
         public double Close { get; set; }
         public double Open { get; set; }
+
         public static ObservableCollection<ChartData> GetData()
         {
             ObservableCollection<ChartData> ChartPoints = new ObservableCollection<ChartData>()
             {
-                new ChartData { Date = new DateTime(2012, 04, 02), Open= 85.9757, High = 90.6657,Low = 85.7685, Close = 90.5257,Volume = 660187068},
-                new ChartData { Date = new DateTime(2012, 04, 09), Open= 89.4471, High = 92,Low = 86.2157, Close = 86.4614,Volume = 912634864},
-                new ChartData { Date = new DateTime(2012, 04, 16), Open= 87.1514, High = 88.6071,Low = 81.4885, Close = 81.8543,Volume = 1221746066},
-                new ChartData { Date = new DateTime(2012, 04, 23), Open= 81.5157, High = 88.2857,Low = 79.2857, Close = 86.1428,Volume = 965935749},
-                new ChartData { Date = new DateTime(2012, 04, 30), Open= 85.4, High =  85.4857,Low = 80.7385, Close = 80.75,Volume = 615249365},
-                new ChartData { Date = new DateTime(2012, 05, 07), Open= 80.2143, High = 82.2685,Low = 79.8185, Close = 80.9585,Volume = 541742692},
-                new ChartData { Date = new DateTime(2012, 05, 14), Open= 80.3671, High = 81.0728,Low = 74.5971, Close = 75.7685,Volume = 708126233},
-                new ChartData { Date = new DateTime(2012, 05, 21), Open= 76.3571, High = 82.3571,Low = 76.2928, Close = 80.3271,Volume = 682076215},
-                new ChartData { Date = new DateTime(2012, 05, 28), Open= 81.5571, High = 83.0714,Low = 80.0743, Close = 80.1414,Volume = 480059584}
+                new ChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume =  660187068 },
+                new ChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92.0000, Low = 86.2157, Close = 86.4614, Volume =  912634864 },
+                new ChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066 },
+                new ChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume =  965935749 },
+                new ChartData { Date = new DateTime(2012, 04, 30), Open = 85.4000, High = 85.4857, Low = 80.7385, Close = 80.7500, Volume =  615249365 },
+                new ChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume =  541742692 },
+                new ChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume =  708126233 },
+                new ChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume =  682076215 },
+                new ChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume =  480059584 }
             };
             return ChartPoints;
         }
@@ -306,19 +313,21 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
         this.ChartPoints = ChartData.GetData();
     }
 }
+
 ```
 
 ![Blazor Chart with Web API Binding](images/common/blazor-stock-chart-observable-collection.png)
 
 ## Entity Framework
 
-Entity Framework acts as a modern object-database mapper for .NET. This section explains how to consume data from the **Microsoft SQL Server** database and bind it to the chart component.
+Entity Framework acts as a modern object-database mapper for .NET. This section explains how to consume data from Microsoft SQL Server and bind it to the chart component.
 
 ### Create DBContext class
 
-The first step is to create a DBContext class called **OrderContext** for establishing connection to a Microsoft SQL Server database.
+Create a DBContext class named **OrderContext** to establish a connection to Microsoft SQL Server.
 
 ```csharp
+
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -358,9 +367,10 @@ namespace EFChart.Data
 
 ### Create data access layer to perform data operation
 
-Now, create a class called **OrderDataAccessLayer**, which acts as a data access layer to retrieve the records from the database table.
+Create a class named **OrderDataAccessLayer** to act as a data access layer and retrieve records from the database table.
 
 ```csharp
+
 using Microsoft.EntityFrameworkCore;
 using System;
 using System.Collections.Generic;
@@ -394,9 +404,10 @@ namespace EFChart.Data
 
 ### Creating Web API Controller
 
-A Web API Controller must be created which allows the chart to directly consume data from the Entity Framework.
+Create a Web API Controller that allows the chart to consume data from Entity Framework.
 
 ```csharp
+
 using System;
 using System.Collections;
 using System.Collections.Generic;
@@ -441,9 +452,10 @@ namespace EFChart.Controller
 
 ### Add Web API Controller services in Startup.cs
 
-Open the **Startup.cs** file and add services and endpoints required for Web API Controller as follows.
+Open **Startup.cs** and add services and endpoints required for the Web API Controller as follows.
 
 ```csharp
+
 using EFChart.Data;
 using Newtonsoft.Json.Serialization;
 
@@ -480,13 +492,14 @@ namespace BlazorApplication
         }
     }
 }
+
 ```
 
 ### Configure chart component
 
-Configure the chart to bind data using either [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html).
+Configure the chart to bind data using either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
 
-For instance, to bind data directly from the data access layer class **OrderDataAccessLayer**, assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property to be **OrderData.GetAllOrders()**.
+For example, to bind data directly from the data access layer class **OrderDataAccessLayer**, assign the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_DataSource) property to **OrderData.GetAllOrders()**.
 
 ```cshtml
 
@@ -501,14 +514,17 @@ For instance, to bind data directly from the data access layer class **OrderData
         <StockChartSeries Type="ChartSeriesType.Column" XName="CustomerID" YName="OrderID"></StockChartSeries>
     </StockChartSeriesCollection>
 </SfStockChart>
-@code{
+
+@code {
 
 }
+
 ```
 
-On the other hand, to configure the chart using Web API, provide the appropriate endpoint Url within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Here, use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) in-order to interact with the Web API to consume data from the Entity Framework appropriately.
+To configure the chart using a Web API, provide the appropriate endpoint URL within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) along with an [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) to interact with a Web API and consume data from Entity Framework.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 @using Syncfusion.Blazor.Data
 
@@ -524,16 +540,19 @@ On the other hand, to configure the chart using Web API, provide the appropriate
     </SfStockChart>
     </div>
 </div>
-@code{
+
+@code {
 
 }
+
 ```
 
 ## Handling No Data
 
-When no data is available to render in the stock chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+When no data is available to render in the stock chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 @using Syncfusion.Blazor.Buttons
 
@@ -608,4 +627,4 @@ When no data is available to render in the stock chart, the [NoDataTemplate](htt
 ## See Also
 
 * [Series Types](./series-types)
-* [Integrate a Stock Chart Inside Accordion Component](https://support.syncfusion.com/kb/article/21362/how-to-integrate-a-stock-chart-inside-a-blazor-accordion-component)
\ No newline at end of file
+* [Integrate a Stock Chart Inside Accordion Component](https://support.syncfusion.com/kb/article/21362/how-to-integrate-a-stock-chart-inside-a-blazor-accordion-component)
diff --git a/blazor/stock-chart/zooming.md b/blazor/stock-chart/zooming.md
index 4cc1fca5e1..65d70c745b 100644
--- a/blazor/stock-chart/zooming.md
+++ b/blazor/stock-chart/zooming.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Zooming in Blazor Stock Chart Component | Syncfusion
-description: Checkout and learn here all about Zooming functionality in Syncfusion Blazor Stock Chart component and more.
+description: Check out and learn here all about Zooming functionality in the Syncfusion Blazor Stock Chart component.
 platform: Blazor
 control: Stock Chart
 documentation: ug
@@ -11,13 +11,13 @@ documentation: ug
 
 ## Enable zooming
 
-The stock chart can be zoomed in three different ways.
+The stock chart supports three zooming interactions:
 
-* Selection - By setting [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableSelectionZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed using the rubber band selection.
-* Mouse Wheel - By setting [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableMouseWheelZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed-in and zoomed-out by scrolling the mouse wheel.
-* Pinch - By setting [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePinchZooming) property to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), the stock chart can be zoomed through pinch gesture in touch enabled devices.
+* Selection – Set [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableSelectionZooming) to **true** in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) to enable rubber-band selection zooming.
+* Mouse wheel – Set [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableMouseWheelZooming) to **true** to zoom in and out using the mouse wheel.
+* Pinch – Set [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePinchZooming) to **true** to zoom using pinch gestures on touch-enabled devices.
 
- N> Pinch zooming is only usable in browsers that support multi-touch gestures.
+ N> Pinch zooming is supported only in browsers that enable multi-touch gestures.
 
 ```cshtml
 
@@ -26,6 +26,7 @@ The stock chart can be zoomed in three different ways.
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -49,7 +50,7 @@ The stock chart can be zoomed in three different ways.
 @code {
     public ChartData[] DataSource{ get; set; }
 
-     public class ChartData
+    public class ChartData
     {
         public DateTime date { get; set; }
         public double open { get; set; }
@@ -57,28 +58,29 @@ The stock chart can be zoomed in three different ways.
         public double close { get; set; }
         public double high { get; set; }
         public double volume { get; set; }
-    }   
+    }
+
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
 
 ![Zooming in Blazor Stock Chart](images/zooming/stock-chart-zoom.PNG)
 
-A zooming toolbar will show after zooming the stock chart, featuring options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. The **Pan** option allows you to pan the stock chart, while the **Reset** option allows you to reset the zoomed stock chart.
+After zooming, the toolbar appears with options for **Zoom**, **Zoom In**, **Zoom Out**, **Pan**, and **Reset**. Pan enables panning of the chart, and Reset restores the original view.
 
 ## Modes
 
-The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_Mode) property in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) determines whether the stock chart can scale along the horizontal or vertical axes. The default value of the mode is XY (both axis).
+The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_Mode) property in [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html) determines whether scaling occurs along the horizontal axis, vertical axis, or both. The default value is XY (both axes).
 
-There are three types of modes.
+There are three modes:
 
-* X - Allows us to zoom the chart horizontally.
-* Y - Allows us to zoom the chart vertically.
-* XY - Allows us to zoom the chart both vertically and horizontally.
+* X – Enables horizontal zooming.
+* Y – Enables vertical zooming.
+* XY – Enables both horizontal and vertical zooming.
 
 ```cshtml
 
@@ -87,6 +89,7 @@ There are three types of modes.
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -122,9 +125,9 @@ There are three types of modes.
     }  
 
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
@@ -133,7 +136,7 @@ There are three types of modes.
 
 ## Toolbar
 
-By default, zoom in, zoom out, pan, and reset buttons are available in the toolbar for zoomed stock chart. The [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_ToolbarItems) property specifies which tools should be displayed in the toolbar.
+By default, Zoom In, Zoom Out, Pan, and Reset buttons appear in the toolbar after zooming. Use the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_ToolbarItems) property to specify which tools to display.
 
 ```cshtml
 
@@ -142,6 +145,7 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -179,9 +183,9 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb
     }   
 
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
@@ -190,7 +194,7 @@ By default, zoom in, zoom out, pan, and reset buttons are available in the toolb
 
 ## Enable pan
 
-By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property, one can pan the zoomed stock chart without the help of toolbar items.
+Use the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property to allow panning on a zoomed stock chart without relying on toolbar items.
 
 ```cshtml
 
@@ -199,6 +203,7 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -221,7 +226,6 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 }    
 
 @code {
-    
     public ChartData[] DataSource{ get; set; }
 
      public class ChartData
@@ -235,9 +239,9 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
     }   
 
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
@@ -246,7 +250,7 @@ By using the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ## Enable scrollbar
 
-The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableScrollbar) property can be used to add a scrollbar to a zoomed stock chart. The stock chart can be panned or zoomed using this scrollbar.
+Use the [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnableScrollbar) property to add a scrollbar to a zoomed stock chart. The scrollbar allows panning and further zooming.
 
 ```cshtml
 
@@ -255,6 +259,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -278,7 +283,6 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 }
 
 @code {
-    
     public ChartData[] DataSource{ get; set; }
 
      public class ChartData
@@ -292,9 +296,9 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
     }   
 
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
@@ -303,7 +307,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ## Auto interval on zooming
 
-The axis interval will be calculated automatically with respect to the zoomed range, if the [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_EnableAutoIntervalOnZooming) property is set to **true**.
+Set [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_EnableAutoIntervalOnZooming) to **true** to calculate axis intervals automatically based on the zoomed range.
 
 ```cshtml
 
@@ -312,6 +316,7 @@ The axis interval will be calculated automatically with respect to the zoomed ra
 @using System.Runtime.Serialization
 @inject NavigationManager NavigationManager
 @inject HttpClient Http
+
 @if (DataSource != null)
 {
     <SfStockChart Title="AAPL Stock Price">
@@ -335,7 +340,6 @@ The axis interval will be calculated automatically with respect to the zoomed ra
 }
 
 @code {
-    
     public ChartData[] DataSource{ get; set; }
 
      public class ChartData
@@ -349,13 +353,13 @@ The axis interval will be calculated automatically with respect to the zoomed ra
     }   
 
     protected override async Task OnInitializedAsync()
-      {
-          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
-      }
+    {
+        DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
+    }
 }
 
 ```
 
 ![Auto Interval on Zooming in Blazor Area Chart](images/zooming/stock-chart-autointerval.PNG)
 
-N> Refer to our [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for its groundbreaking feature representations and also explore our [Blazor Stock Chart Example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals.
\ No newline at end of file
+N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature overviews and the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to explore chart types and time based data representation.
diff --git a/blazor/textbox/accessibility.md b/blazor/textbox/accessibility.md
index a6f8edb62d..263daf0861 100644
--- a/blazor/textbox/accessibility.md
+++ b/blazor/textbox/accessibility.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor TextBox Component
 
-The [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) follows accessibility guidelines and standards commonly used to evaluate UI accessibility, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI‑ARIA](https://www.w3.org/TR/wai-aria/).
 
 The accessibility compliance for the Blazor TextBox component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
 
 <style>
     .post .post-content img {
@@ -30,11 +30,9 @@ The accessibility compliance for the Blazor TextBox component is outlined below.
         margin: 0.5em 0;
     }
 </style>
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
-
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
-
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="Not supported"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
@@ -49,10 +47,10 @@ The TextBox uses the `textbox` role and following ARIA properties for its elemen
 
 ## Ensuring accessibility
 
-The Blazor TextBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor TextBox component’s accessibility is validated with the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
-The accessibility compliance of the TextBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/textbox) in a new window to evaluate the accessibility of the Textbox component with accessibility tools.
+The accessibility compliance of the TextBox component is demonstrated in the following sample. Open the [accessibility sample for TextBox](https://blazor.syncfusion.com/accessibility/textbox) in a new window to evaluate accessibility with your preferred tools. The component also supports right-to-left (RTL) rendering and high-contrast themes for improved readability and usability.
 
 ## See also
 
-* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)
\ No newline at end of file
+- [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)
\ No newline at end of file
diff --git a/blazor/textbox/data-binding.md b/blazor/textbox/data-binding.md
index 374fd859df..a2391a681a 100644
--- a/blazor/textbox/data-binding.md
+++ b/blazor/textbox/data-binding.md
@@ -9,16 +9,16 @@ documentation: ug
 
 # Data Binding in Blazor TextBox Component
 
-This section briefly explains how to bind the value to the TextBox component in the following different ways.
+This section describes how to bind values to the TextBox component using the following approaches:
 
-* One-way data binding
-* Two-way data binding
-* Dynamic value binding
-* Complex data binding
+- One-way data binding
+- Two-way data binding
+- Dynamic value binding
+- Complex data binding
 
 ## One-way binding
 
-The value can be bound to the TextBox component directly for `Value` property as mentioned in the following code example. In one-way binding, pass the property or variable name along with `@` (For Ex: "@Name").
+Bind a value to the TextBox by assigning a property to the `Value` parameter. In one-way binding, pass the property or variable name with `@` (for example, `@Name`). UI updates occur when the bound property changes during a render (for example, inside an event handler).
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -40,7 +40,7 @@ public string Name { get; set; } = "Hello, World!";
 
 ## Two-way data binding
 
-Two-way binding can be achieved by using `bind-Value` attribute and its support string, int, Enum, DateTime, and bool types. If the component value has been changed, it will affect all places where you bind the variable for the **bind-value** attribute.
+Use the `@bind-Value` attribute for two-way binding. Supported types include `string`, `int`, `enum`, `DateTime`, and `bool`. When the component value changes, the bound variable is updated, and vice versa.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -58,9 +58,8 @@ public string Name { get; set; } = "Syncfusion";
 
 ## Dynamic value binding
 
-The property value can be changed dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor TextBox component** only. This method notifies the component that its state has changed and queues a re-render.
+The component can update styles or other parameters dynamically in response to events. Calling `StateHasChanged()` notifies the component to re-render; event callbacks typically trigger re-render automatically, so this call may be optional depending on the scenario.
 
-There is no need to call this method for native events since it’s called after any life cycle method and can also be invoked manually to trigger a re-render.
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
@@ -85,7 +84,7 @@ There is no need to call this method for native events since it’s called after
 
 ## Complex data binding
 
-The complex data values can be bound to the TextBox component.The following code demonstrates how to bind complex data values to the TextBox component.
+Bind nested (complex) data by referencing the property path in the `Value` parameter.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs; 
diff --git a/blazor/textbox/events.md b/blazor/textbox/events.md
index 3238249a04..af02a1e692 100644
--- a/blazor/textbox/events.md
+++ b/blazor/textbox/events.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor TextBox Component
 
-This section explains the list of events of the TextBox component which will be triggered for appropriate TextBox actions.
+This section lists the TextBox events and when they are triggered during user interactions.
 
 ## Blur
 
-`Blur` event triggers when the TextBox has focus-out.
+The `Blur` event triggers when the TextBox loses focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -30,7 +30,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## Created
 
-`Created` event triggers when the TextBox component is created.
+The `Created` event triggers after the TextBox component is initialized and rendered.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -47,7 +47,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## Destroyed
 
-`Destroyed` event triggers when the TextBox component is destroyed.
+The `Destroyed` event triggers when the TextBox component is disposed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -64,7 +64,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## Focus
 
-`Focus` event triggers when the TextBox gets focus.
+The `Focus` event triggers when the TextBox receives focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -81,7 +81,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## Input
 
-`Input` event triggers each time when the value of TextBox has changed.
+The `Input` event triggers every time the TextBox value changes (on each keystroke or input).
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -98,7 +98,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## ValueChange
 
-`ValueChange` event triggers when the content of TextBox has changed and gets focus-out.
+The `ValueChange` event triggers when the TextBox value is committed (typically on focus out) and has changed since it received focus.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -115,7 +115,7 @@ This section explains the list of events of the TextBox component which will be
 
 ## ValueChanged
 
-`ValueChanged` event specifies the callback to trigger when the value changes.
+The `ValueChanged` event is the parameter callback that fires when the `Value` parameter changes. It is commonly used with `@bind-Value` for two-way binding or to react to value updates programmatically.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -130,4 +130,4 @@ This section explains the list of events of the TextBox component which will be
 }
 ```
 
-N> TexTBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
+N> TextBox is limited with these events and new events will be added in the future based on the user requests. If the event you are looking for is not on the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
\ No newline at end of file
diff --git a/blazor/textbox/getting-started-webapp.md b/blazor/textbox/getting-started-webapp.md
index 7b75b89104..cc65f95203 100644
--- a/blazor/textbox/getting-started-webapp.md
+++ b/blazor/textbox/getting-started-webapp.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextBox in Blazor Web App
 
-This section briefly explains about how to include [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI.
+This section explains how to include the [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, and the .NET CLI.
 
 {% tabcontents %}
 
@@ -21,19 +21,19 @@ This section briefly explains about how to include [Blazor TextBox](https://www.
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
+Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation.
 
-You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
+Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the app.
 
-![Create Blazor Web App](images/blazor-create-web-app.png)
+![Create Blazor Web App dialog in Visual Studio](images/blazor-create-web-app.png)
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-To add **Blazor TextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the TextBox component, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using the WebAssembly or Auto interactive render mode, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
 
-Alternatively, you can utilize the following package manager command to achieve the same.
+Alternatively, use the following Package Manager commands:
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -44,7 +44,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on nuget.org. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) article for the package list and component details.
 
 {% endtabcontent %}
 
@@ -56,11 +56,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor Web App in Visual Studio Code
 
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation.
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the interactive render mode and interactivity location during project setup. For details, see [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, with the Auto interactive render mode:
 
 {% tabs %}
 {% highlight c# tabtitle="Blazor Web App" %}
@@ -74,11 +74,11 @@ cd BlazorWebApp.Client
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+When using WebAssembly or Auto interactive render modes, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure the terminal is in the project root directory that contains the `.csproj` file.
+* Run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and restore dependencies.
 
 {% tabs %}
 
@@ -92,7 +92,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on nuget.org. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) article for the package list and component details.
 
 {% endtabcontent %}
 
@@ -100,7 +100,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest [.NET SDK](https://dotnet.microsoft.com/en-us/download). To verify the installed version, run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -112,9 +112,9 @@ dotnet --version
 
 ## Create a Blazor Web App using .NET CLI
 
-Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation.
+Run the following command to create a new Blazor Web App. For step-by-step guidance, see the [Blazor Web App getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) article.
 
-Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
+Configure the interactive render mode and interactivity location during project setup. For details, see [interactive render mode](https://blazor.syncfusion.com/documentation/common/interactive-render-mode).
 
 For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands:
 
@@ -128,13 +128,13 @@ cd BlazorApp.Client
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details.
+This command creates a new Blazor Web App in a directory named `BlazorApp` in the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) for more information.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-Here's an example of how to add **Blazor TextBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+To add the TextBox component, run the following commands to install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
 
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components NuGet packages within the client project.
+If using WebAssembly or Auto interactive render modes, install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor NuGet packages in the Client project.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -146,7 +146,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on nuget.org. See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) article for the package list and component details.
 
 {% endtabcontent %}
 
@@ -154,7 +154,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace .
+Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight C# tabtitle="~/_Imports.razor" %}
@@ -205,7 +205,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
+The theme stylesheet and script are provided via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the <head> and the script at the end of the <body> in Components/App.razor as shown below. Use a single theme file (for example, bootstrap5, material, or tailwind).
 
 ```html
 <head>
@@ -222,11 +222,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 </body>
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor themes](https://blazor.syncfusion.com/documentation/appearance/themes) for theme options and delivery methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For adding scripts, see [Adding script references](https://blazor.syncfusion.com/documentation/common/adding-script-references). If styles or scripts do not appear, build/restore the solution and verify static web assets are available.
 
 ## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows:
+Add the TextBox component to a Razor page under the Pages folder (for example, Pages/Home.razor) in either the Server or Client project. If the interactivity location is Per page/component, define a render mode at the top of the component as shown:
 
 | Interactivity location | RenderMode | Code |
 | --- | --- | --- |
@@ -234,7 +234,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox componen
 |  | WebAssembly | @rendermode InteractiveWebAssembly |
 |  | None | --- |
 
-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
+N> If the interactivity location is set to Global and the render mode is Auto or WebAssembly, the render mode is configured in App.razor by default.
 
 {% tabs %}
 {% highlight razor %}
@@ -253,7 +253,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox renders in the default web browser.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox Component](./images/blazor-textbox.png)" %}
 
@@ -261,7 +261,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 ## Adding icons to the Blazor TextBox
 
-You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
+Add an icon to the TextBox using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. The following example shows how to append an icon.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -293,7 +293,7 @@ You can add an icon to the TextBox component using the [AddIconAsync](https://he
 
 ## Floating label
 
-The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. The floating label TextBox can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
+The floating label moves the label above the TextBox when the control is focused or contains a value. Enable the floating label by setting the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) property.
 
 {% tabs %}
 {% highlight razor %}
diff --git a/blazor/textbox/getting-started-with-maui-app.md b/blazor/textbox/getting-started-with-maui-app.md
index 6769f7ed69..d93e5f72c4 100644
--- a/blazor/textbox/getting-started-with-maui-app.md
+++ b/blazor/textbox/getting-started-with-maui-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor TextBox component
 
-This section explains you through the step-by-step process of integrating the Syncfusion® Blazor TextBox component to your Blazor Maui app using both Visual Studio and Visual Studio Code.
+This guide walks through integrating the Syncfusion® Blazor TextBox component into a .NET MAUI Blazor app using both Visual Studio and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -17,15 +17,19 @@ This section explains you through the step-by-step process of integrating the Sy
 
 ## Prerequisites
 
-To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+To use the .NET MAUI project templates, install the Mobile development with .NET workload in Visual Studio. For details, see the Microsoft installation guide and the Syncfusion® Blazor Extension resources:
+- Microsoft: Get started with .NET MAUI on Visual Studio
+- Syncfusion: Visual Studio integration and Template Studio
+
+For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
 
 ## Create a new Blazor MAUI App in Visual Studio
 
-You can create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
 
-To add **Blazor TextBox**  component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add the Blazor TextBox component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -36,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the NuGet packages topic for the list of available packages and component details: [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor) and [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -66,7 +70,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on NuGet. Refer to the NuGet packages topic for the list of available packages and component details: [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor) and [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages).
 
 {% endtabcontent %}
 
@@ -74,7 +78,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -85,9 +89,9 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the ~/MauiProgram.cs file. Ensure that Syncfusion licensing is registered in the app startup before using any Syncfusion components. For licensing details, see the Syncfusion Blazor licensing documentation.
 
 {% tabs %}
 {% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
@@ -159,17 +163,17 @@ Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
 
 ### How to Run the Sample on Android
 
-To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps:
+To run the Blazor TextBox in an Android .NET MAUI Blazor app using the Android emulator, follow the Microsoft guidance to set up and launch an Android virtual device.
 
 Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
 
-N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
+N> If any errors occur while using the Android Emulator, see Troubleshooting Android Emulator for common resolutions: [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
 
 ![Blazor TextBox Component](./images/blazor-textbox.png)
 
 ## Adding icons to the Blazor TextBox
 
-You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
+Add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -197,7 +201,7 @@ You can add an icon to the TextBox component using the [AddIconAsync](https://he
 }
 ```
 
-![Blazor TextBox with Icon](./images/blazor-textbox-icons.png)
+![Blazor TextBox with icon in .NET MAUI Blazor](./images/blazor-textbox-icons.png)
 
 ## Floating label
 
@@ -211,9 +215,9 @@ The floating label TextBox floats the label above the TextBox after focusing, or
 {% endhighlight %}
 {% endtabs %}
 
-![Blazor TextBox with Floating Label](./images/blazor-textbox-float-label.png)
+![Blazor TextBox with floating label in .NET MAUI Blazor](./images/blazor-textbox-float-label.png)
 
 ## See Also
 
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app)
-* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app)
\ No newline at end of file
+* Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor WebAssembly app in Visual Studio or .NET CLI: [../getting-started/blazor-webassembly-app](../getting-started/blazor-webassembly-app)
+* Getting started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI: [../getting-started/blazor-web-app](../getting-started/blazor-web-app)
\ No newline at end of file
diff --git a/blazor/textbox/getting-started-with-server-app.md b/blazor/textbox/getting-started-with-server-app.md
index b7ef924551..1479064eb8 100644
--- a/blazor/textbox/getting-started-with-server-app.md
+++ b/blazor/textbox/getting-started-with-server-app.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Getting Started with Blazor TextBox Component
 
-This section briefly explains about how to include [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI.
+This section explains how to include the [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor Server app using Visual Studio, Visual Studio Code, and the .NET CLI.
 
-To get start quickly with Blazor TextBox, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox) sample:
+To get started quickly with the Blazor TextBox, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox).
 
 {% tabcontents %}
 
@@ -23,7 +23,7 @@ To get start quickly with Blazor TextBox, you can check on this [GitHub](https:/
 
 ## Create a new Blazor App in Visual Studio
 
-You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
+Create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -50,9 +50,9 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Create a new Blazor App in Visual Studio Code
 
-You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
+Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation.
 
-Alternatively, you can create a server application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a server app using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -68,8 +68,8 @@ cd BlazorApp
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure in the project root directory where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the version by executing the following command in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -103,7 +103,7 @@ dotnet --version
 
 ## Create a Blazor Server App using .NET CLI
 
-Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the following command to create a new Blazor Server app in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,11 +114,11 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor Server app in a directory named `BlazorApp` within the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
 
-Here's an example of how to add **Blazor TextBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
+To add the Blazor TextBox component to the app, run the following commands in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -130,7 +130,7 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -138,7 +138,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Add Import Namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 ```cshtml
 
@@ -149,7 +149,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Server App. 
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor Server app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %}
@@ -172,7 +172,7 @@ builder.Services.AddSyncfusionBlazor();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `<head>` and the script reference at the end of the `<body>` in the **App.razor** file as shown below:
+The theme stylesheet and script are provided via Static Web Assets from the NuGet packages. In Blazor Server apps, reference the stylesheet in the head and the script at the end of the body in the host page (for example, Pages/_Host.cshtml in ASP.NET Core-hosted apps) or the appropriate layout file. The following example shows the required references:
 
 ```html
 <head>
@@ -190,13 +190,13 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
 </body>
 ```
 
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for various methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). The core Syncfusion script is sufficient for the TextBox; a separate per-component script is not required.
 
 ## Add Blazor TextBox component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page.
 
-N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
+N> If the interactivity location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
 
 ```
 @* desired render mode define here *@
@@ -211,13 +211,13 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox Component](./images/blazor-textbox.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox component in Blazor Server](./images/blazor-textbox.png)" %}
 
 ## Adding icons to the Blazor TextBox
 
-You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
+Add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. The following example shows how to add an icon when the component is created.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -245,11 +245,11 @@ You can add an icon to the TextBox component using the [AddIconAsync](https://he
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXaVqqmBfrsXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXaVqqmBfrsXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with icon in Blazor Server](./images/blazor-textbox-icons.png)" %}
 
 ## Floating label
 
-The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. The floating label TextBox can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
+The floating label moves above the input when the TextBox is focused or contains a value. Create a floating label TextBox by setting the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
 
 {% tabs %}
 {% highlight razor %}
@@ -259,7 +259,7 @@ The floating label TextBox floats the label above the TextBox after focusing, or
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTZWUjzeHZgdPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Floating Label](./images/blazor-textbox-float-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTZWUjzeHZgdPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with floating label in Blazor Server](./images/blazor-textbox-float-label.png)" %}
 
 ## See Also
 
diff --git a/blazor/textbox/getting-started.md b/blazor/textbox/getting-started.md
index ff005639e3..d01a3d5f7d 100644
--- a/blazor/textbox/getting-started.md
+++ b/blazor/textbox/getting-started.md
@@ -7,11 +7,11 @@ control: TextBox
 documentation: ug
 ---
 
-# Getting Started with Blazor TextBox Component
+# Getting started with the Blazor TextBox component
 
-This section briefly explains about how to include [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI.
+This guide explains how to include the [Blazor TextBox](https://www.syncfusion.com/blazor-components/blazor-textbox) component in a Blazor WebAssembly app using Visual Studio, Visual Studio Code, and the .NET CLI.
 
-To get start quickly with Blazor TextBox component, check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox) sample.
+To get started quickly with the Blazor TextBox component, review this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TextBox).
 
 {% tabcontents %}
 
@@ -21,11 +21,11 @@ To get start quickly with Blazor TextBox component, check on this [GitHub](https
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor App in Visual Studio
+## Create a new Blazor app in Visual Studio
 
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
+Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app).
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
 
 To add **Blazor TextBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
 
@@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -48,11 +48,11 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
 
-## Create a new Blazor App in Visual Studio Code
+## Create a new Blazor app in Visual Studio Code
 
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
+Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code).
 
-Alternatively, you can create a WebAssembly application using the following command in the terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
+Alternatively, create a WebAssembly app using the following command in the terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
 
 {% tabs %}
 
@@ -65,11 +65,11 @@ cd BlazorApp
 
 {% endtabs %}
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
 
 * Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
-* Ensure you’re in the project root directory where your `.csproj` file is located.
-* Run the following command to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
+* Ensure in the project root directory where the `.csproj` file is located.
+* Run the following commands to install the [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages and restore dependencies.
 
 {% tabs %}
 
@@ -83,7 +83,7 @@ dotnet restore
 
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
@@ -91,7 +91,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Prerequisites
 
-Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK is already installed, determine the version by running the following command in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -101,9 +101,9 @@ dotnet --version
 {% endhighlight %}
 {% endtabs %}
 
-## Create a Blazor WebAssembly App using .NET CLI
+## Create a Blazor WebAssembly app using .NET CLI
 
-Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
+Run the `dotnet new blazorwasm` command to create a Blazor WebAssembly app in a command prompt (Windows), terminal (macOS), or shell (Linux).
 
 {% tabs %}
 {% highlight c# tabtitle=".NET CLI" %}
@@ -114,9 +114,9 @@ cd BlazorApp
 {% endhighlight %}
 {% endtabs %}
 
-This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details.
+This command creates a new Blazor WebAssembly app in a directory named `BlazorApp` inside the current location. See [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details.
 
-## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the App
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Inputs and Themes NuGet in the app
 
 Here's an example of how to add **Blazor TextBox** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
 
@@ -130,15 +130,15 @@ dotnet restore
 {% endhighlight %}
 {% endtabs %}
 
-N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details.
 
 {% endtabcontent %}
 
 {% endtabcontents %}
 
-## Add Import Namespaces
+## Add import namespaces
 
-Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespace.
+Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Inputs` namespaces.
 
 {% tabs %}
 {% highlight razor tabtitle="~/_Imports.razor" %}
@@ -149,9 +149,10 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
 {% endhighlight %}
 {% endtabs %}
 
-## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **~/Program.cs** file of the Blazor WebAssembly app.
 
 {% tabs %}
 {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -175,7 +176,7 @@ await builder.Build().RunAsync();
 
 ## Add stylesheet and script resources
 
-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `<head>` section of the **~/index.html** file.
+The theme stylesheet and script are available from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include these references in the `<head>` section of **~/wwwroot/index.html**.
 
 ```html
 <head>
@@ -187,7 +188,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
     <!-- <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script> -->
 </head>
 ```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+N> Refer to [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) to explore referencing themes via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). See [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) for script options. The Syncfusion core script loaded above covers the TextBox component; no additional component script is necessary.
 
 ## Add Blazor TextBox component
 
@@ -201,13 +202,13 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox componen
 {% endhighlight %}
 {% endtabs %}
 
-* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in your default web browser.
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. This renders the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TextBox component in the default web browser. If build issues occur, restore packages and verify the installed .NET SDK version.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox Component](./images/blazor-textbox.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJZMAtTozPjvlK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox component in Blazor WebAssembly](./images/blazor-textbox.png)" %}
 
 ## Adding icons to the Blazor TextBox
 
-You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:
+Add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. The following example shows how to implement this in a Blazor WebAssembly app.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -235,11 +236,11 @@ You can add an icon to the TextBox component using the [AddIconAsync](https://he
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXaVqqmBfrsXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXaVqqmBfrsXR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with icon in Blazor WebAssembly](./images/blazor-textbox-icons.png)" %}
 
 ## Floating label
 
-The floating label TextBox floats the label above the TextBox after focusing, or filled with value in the TextBox. The floating label TextBox can be created by using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
+The floating label lifts above the input when the TextBox is focused or contains a value. Configure it by setting the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
 
 {% tabs %}
 {% highlight razor %}
@@ -249,9 +250,9 @@ The floating label TextBox floats the label above the TextBox after focusing, or
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTZWUjzeHZgdPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Floating Label](./images/blazor-textbox-float-label.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTZWUjzeHZgdPK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with floating label in Blazor WebAssembly](./images/blazor-textbox-float-label.png)" %}
 
-## See Also
+## See also
 
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app)
 * [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)
diff --git a/blazor/textbox/groups.md b/blazor/textbox/groups.md
index 47e54d6858..08357ac1c9 100644
--- a/blazor/textbox/groups.md
+++ b/blazor/textbox/groups.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Groups in Blazor TextBox Component
 
-The following section explains the steps required to create TextBox with `icon` and `floating label`.
+The following section describes how to configure the TextBox component with icons, floating labels, clear buttons, and multiline input by combining the relevant APIs.
 
-**TextBox:**
+**TextBox**
 
-Create a TextBox component.
+Create a basic TextBox component.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -21,9 +21,9 @@ Create a TextBox component.
 <SfTextBox Placeholder="Enter your name"></SfTextBox>
 ```
 
-**Floating label:**
+**Floating label**
 
-Create a Floating label TextBox using [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
+Create a floating label TextBox by enabling the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) API.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -33,9 +33,9 @@ Create a Floating label TextBox using [FloatLabelType](https://help.syncfusion.c
 
 Refer to the following sections to add the icons to the TextBox.
 
-## With icon and floating label
+## TextBox with icon and floating label
 
-Create a TextBox with icon and the users can place the icon in either side of the TextBox by using `AddIcon` method append the icon before or after the input. Based on the argument prepend or append, it will act as prefix or suffix icon.
+Create a TextBox with icons so users can display the icon on either side of the input. Use the AddIconAsync method to append or prepend the icon. The argument value (`append` or `prepend`) determines whether the icon appears as a suffix or prefix. When invoking AddIconAsync inside lifecycle events, await the method within an asynchronous handler.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -83,13 +83,11 @@ Create a TextBox with icon and the users can place the icon in either side of th
 </style>
 ```
 
-![Blazor TextBox with Icon and Floating Label](./images/blazor-textbox-float-label-and-icons.png)
+![Blazor TextBox with icon and floating label](./images/blazor-textbox-float-label-and-icons.png)
 
 ### Binding events to icons
 
-You can bind the event to the icons by passing events as a parameter to the `AddIcon` method. You can bind the single or multiple events to the icons.
-
-The following sample demonstrates binding events to the icons.
+Bind events to icons by passing event attributes as a parameter to the AddIconAsync method. Multiple event handlers can be associated with the icon by providing a dictionary of event names and callbacks. Ensure the callbacks are created with EventCallback to maintain component lifecycle integrity.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -149,11 +147,9 @@ The following sample demonstrates binding events to the icons.
 </style>
 ```
 
-## With clear button and floating label
-
-The clear button is added to the input for clearing the value given in the TextBox. It is shown only when the input field has a value, otherwise not shown.
+## TextBox with clear button and floating label
 
-The clear button can be added to the TextBox by enabling the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_ShowClearButton) API.
+Add a clear button to remove the current value from the TextBox. The button is visible only when the input contains text. Enable the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_ShowClearButton) API to display the clear icon, and combine it with FloatLabelType for floating label support.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -164,11 +160,11 @@ The clear button can be added to the TextBox by enabling the [ShowClearButton](h
 <SfTextBox Placeholder="FirstName" ShowClearButton=true FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
 ```
 
-![Blazor TextBox with Clear Icon](./images/blazor-textbox-clear-icon.png)
+![Blazor TextBox with clear button and floating label](./images/blazor-textbox-clear-icon.png)
 
-## Multi-line input with floating label
+## Multiline input with floating label
 
-The following example demonstrates how to set [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Multiline) in the `TextBox` component with the float label structure.
+Enable [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Multiline) to transform the TextBox into a multi-line editor. Combine Multiline with FloatLabelType to keep the floating label behavior for longer text input.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -176,4 +172,4 @@ The following example demonstrates how to set [Multiline](https://help.syncfusio
 <SfTextBox Placeholder="Enter text" Multiline=true FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
 ```
 
-![Blazor Multiline TextBox with Floating Label](./images/blazor-multiline-textbox-with-floating-label.png)
\ No newline at end of file
+![Blazor multiline TextBox with floating label](./images/blazor-multiline-textbox-with-floating-label.png)
\ No newline at end of file
diff --git a/blazor/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value.md b/blazor/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value.md
index 9049a30b3e..6843f4525e 100644
--- a/blazor/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value.md
+++ b/blazor/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Change the Color of the Text Based on its Value in Blazor TextBox
 
-The color of the TextBox can be changed by validating its value using regular expression in the `Input` event for predicting the numeric values as demonstrated in the following code sample.
+Change the TextBox’s visual state by validating its value on every `Input` event and toggling the component’s `CssClass`. The example below uses a regular expression to check for numeric input: when the value contains only digits, the `e-success` class is applied; otherwise, the `e-error` class is applied. These utility classes are theme-dependent and typically style the input’s border/outline; add custom CSS if you also want to change text color.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/textbox/how-to/change-the-floating-label-color-of-the-textbox.md b/blazor/textbox/how-to/change-the-floating-label-color-of-the-textbox.md
index fdbb0b1b10..f69f296556 100644
--- a/blazor/textbox/how-to/change-the-floating-label-color-of-the-textbox.md
+++ b/blazor/textbox/how-to/change-the-floating-label-color-of-the-textbox.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Change the Floating Label Color of the Blazor TextBox Component
 
-The floating label color of the TextBox can be changed for both `success` and `warning` validation states by applying the following CSS styles.
+Change the floating label color for the Blazor TextBox in specific validation states by applying custom CSS. The following example demonstrates styling the floating label for both success and warning states using the built-in `e-success` and `e-warning` classes. The sample also toggles focus classes to reflect the focused state of the input.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/textbox/how-to/create-components-dynamically.md b/blazor/textbox/how-to/create-components-dynamically.md
index 8affedcbe7..59f72bffe4 100644
--- a/blazor/textbox/how-to/create-components-dynamically.md
+++ b/blazor/textbox/how-to/create-components-dynamically.md
@@ -9,15 +9,13 @@ documentation: ug
 
 # Create TextBox component dynamically in Blazor TextBox Component
 
-The TextBox component can be rendered at runtime in the following ways:
-
-1. Using RenderTreeBuilder
-
-2. Using RenderFragment
+The Blazor TextBox can be rendered at runtime in two common ways:
+1. Using RenderTreeBuilder (imperative component construction)
+2. Using RenderFragment (declarative fragment reuse)
 
 ## Dynamic rendering using RenderTreeBuilder
 
-The RenderTreeBuilder class will let to create required content or component in dynamic manner at runtime. In the following code example, the TextBox Component has been created at runtime through button click.
+Use `RenderTreeBuilder` to construct a component tree programmatically. In the following example, a TextBox component is created at runtime when a button is clicked and rendered into a placeholder fragment.
 
 ```cshtml
 
@@ -53,7 +51,7 @@ The RenderTreeBuilder class will let to create required content or component in
 
 ## Dynamic rendering using RenderFragment
 
-By using RenderFragment, the templated component can be reused in more than one place. The specific fragment value alone can be changed without re-rendering the entire component. In the following example, a single text box has been created and updated the placeholder value at runtime.
+Use a `RenderFragment` when you want to reuse a templated block and update parameters without reconstructing the component tree. In the next example, a single TextBox is created and its placeholder is updated at runtime.
 
 ```csharp
 
@@ -90,4 +88,5 @@ By using RenderFragment, the templated component can be reused in more than one
 
 ```
 
-![Blazor TextBox with Render Fragment](../images/blazor-textbox-render-fragment.png)
\ No newline at end of file
+
+![Blazor TextBox updated with RenderFragment](../images/blazor-textbox-render-fragment.png)
\ No newline at end of file
diff --git a/blazor/textbox/how-to/create-custom-component-with-validation.md b/blazor/textbox/how-to/create-custom-component-with-validation.md
index e47f605e94..ad2b1949df 100644
--- a/blazor/textbox/how-to/create-custom-component-with-validation.md
+++ b/blazor/textbox/how-to/create-custom-component-with-validation.md
@@ -13,7 +13,7 @@ Custom component allows to reuse the defined components in a razor page anywhere
 
 ## Defining Blazor TextBox component
 
-The TextBox component is defined in the razor page along with the required properties and event binding. The following code snippets are added in a razor file with name as CustomTextBox.
+The TextBox is defined in a Razor component along with the required parameters and event bindings. The following code is placed in a Razor file named CustomTextBox.
 
 {% tabs %}
 {% highlight razor tabtitle="CustomTextBox.razor" %}
@@ -21,13 +21,13 @@ The TextBox component is defined in the razor page along with the required prope
 {% endhighlight %}
 {% endtabs %}
 
-T> In the above code, the properties and events are added to the razor page, and the definition for the respective properties can be done on the same page using the `@code` block or on a partial class page. 
+T> In the above component, parameters and events can be implemented in the same file using the `@code` block or in a partial class. 
 
-N> It is necessary to bind `Value`, `ValueExpression`, and native `ValueChanged` event for accessing the value changes and triggering validation. To retrieve the validation message from the custom component, it is required to add the `ValidationMessage` tag in the textbox component.
+N> For full EditForm integration, a custom input component must expose `Value`, `ValueChanged` (EventCallback<T>), and `ValueExpression` parameters. This allows the form to track value changes and perform validation. To surface the validation message inside the component, include a `ValidationMessage` element targeting the same field expression used for `ValueExpression`.
 
 ## Adding the custom TextBox component in the EditForm
 
-The EditForm with the bound model is declared on the main razor page. Inside the EditForm, the `DataAnnotationsValidator` and `CustomTextBox` with wrapped `SfTooltip` component are added. The DataAnnotationsValidator is added to enable form validation based on validation attributes declared in the model. The CustomTextBox component is then bound with the "Text" property from the model and the "Text" property contains DataAnnotations attributes used for validation. To learn more about `SfTooltip` component refer [here](https://blazor.syncfusion.com/documentation/tooltip/getting-started) 
+An `EditForm` with a bound model is declared in the main Razor page. Inside the form, add `DataAnnotationsValidator` to enable attribute-based validation and use the `CustomTextBox` wrapped with an `SfTooltip` to show error text in a tooltip. The `CustomTextBox` binds to the model’s `Text` property, which contains data annotation attributes. For details on the tooltip component, see the getting started guide for Syncfusion Blazor Tooltip.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -35,8 +35,8 @@ The EditForm with the bound model is declared on the main razor page. Inside the
 {% endhighlight %}
 {% endtabs %}
 
-The SfTooltip component is wrapped around the CustomTextBox and the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property is set to the ID attribute of the CustomTextBox to display tooltip for that particular component. The `ValidationMessage` tag is placed inside the [`TooltipTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.TooltipTemplates.html) to display the validation error messages inside the tooltip. 
+The `SfTooltip` wraps the `CustomTextBox`, and the [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) is set to the `id` of an element within the custom component so that the tooltip anchors to that input. Place `ValidationMessage` inside the [`TooltipTemplates`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.TooltipTemplates.html) to display validation errors within the tooltip for the same bound property.
 
 ![Custom Component with Tooltip Validation Using Blazor TextBox](../images/blazor-textBox-custom-component-with-validation.png)
 
-T> To avoid empty tooltips, tooltips can be restricted based on the presence of text content in the `OnOpen` event callback.
\ No newline at end of file
+T> To avoid empty tooltips, conditionally show the tooltip only when there is validation content (for example, by checking text content in the `OnOpen` event). Also ensure errors are conveyed to all users: do not rely on color or tooltip alone; consider setting `aria-invalid="true"` on the input and keeping a `ValidationMessage` visible for screen readers.
\ No newline at end of file
diff --git a/blazor/textbox/how-to/customize-the-textbox-background-color-and-text-color.md b/blazor/textbox/how-to/customize-the-textbox-background-color-and-text-color.md
index e50b147cb2..639f977593 100644
--- a/blazor/textbox/how-to/customize-the-textbox-background-color-and-text-color.md
+++ b/blazor/textbox/how-to/customize-the-textbox-background-color-and-text-color.md
@@ -7,9 +7,9 @@ control: TextBox
 documentation: ug
 ---
 
-# Customize Background and Text Color in Blazor TextBox Component
+# Customize background and text color in Blazor TextBox component
 
-The text box styles can be customized such as background-color, text-color and border-color by overriding its default styles.
+Customize the TextBox appearance (background color, text color, and borders) by overriding its default CSS classes. The following example uses the `e-input-group` container to apply a custom background and text color. It also toggles the focus state class to reflect focus styling.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/textbox/how-to/set-the-disabled-state.md b/blazor/textbox/how-to/set-the-disabled-state.md
index 36eb6c8270..a0879ec852 100644
--- a/blazor/textbox/how-to/set-the-disabled-state.md
+++ b/blazor/textbox/how-to/set-the-disabled-state.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Set the Disabled State in Blazor TextBox Component
 
-To disable the TextBox, use its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Enabled) property.
+Disable the TextBox by setting its [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Enabled) property to `false`. A disabled TextBox is non-interactive, excluded from keyboard focus (tab order), and does not raise input events.
 
 The following example demonstrates the TextBox in a disabled state.
 
diff --git a/blazor/textbox/how-to/set-the-read-only-textbox.md b/blazor/textbox/how-to/set-the-read-only-textbox.md
index e0f6b53209..ad5bac9517 100644
--- a/blazor/textbox/how-to/set-the-read-only-textbox.md
+++ b/blazor/textbox/how-to/set-the-read-only-textbox.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Set the Read-only TextBox in Blazor TextBox Component
 
-The following example demonstrates how to set `Readonly` in TextBox Component. This can be achieved by using [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property.
+Set the TextBox to read-only to prevent editing while still allowing focus and selection. This can be achieved using the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Readonly) property.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/textbox/how-to/set-the-rounded-corner.md b/blazor/textbox/how-to/set-the-rounded-corner.md
index e3c6670e54..d12ca5b4b8 100644
--- a/blazor/textbox/how-to/set-the-rounded-corner.md
+++ b/blazor/textbox/how-to/set-the-rounded-corner.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Set the Rounded Corner in Blazor TextBox Component
 
-Render the TextBox with `rounded corner` by adding the `e-corner` class to the input parent element.
+Render the TextBox with rounded corners by applying a custom CSS class via the component’s [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_CssClass) property and styling the input wrapper.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
diff --git a/blazor/textbox/how-to/troubleshoot.md b/blazor/textbox/how-to/troubleshoot.md
index 427646357e..09d17c8fa6 100644
--- a/blazor/textbox/how-to/troubleshoot.md
+++ b/blazor/textbox/how-to/troubleshoot.md
@@ -15,23 +15,22 @@ documentation: ug
 
 * **InvalidOperationException: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Inputs.SfTextBox'**
 
-    You may see the below runtime exception while running the application for the first time.
+  Encounter the following runtime exception when running the application:
 
-    E> **InvalidOperationException:** Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Inputs.SfTextBox'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.
+  E> InvalidOperationException: Cannot provide a value for property 'SyncfusionService' on type 'Syncfusion.Blazor.Inputs.SfTextBox'. There is no registered service of type 'Syncfusion.Blazor.SyncfusionBlazorService'.
 
-    **Cause:**
+**Cause:**
+  This exception occurs when the Syncfusion Blazor service is not registered in Program.cs.
 
-    This exception thrown because you missed registering the `SyncfusionBlazorService` in `Program.cs`.
+**Solution:**
 
-    **Solution:**
+  Register the Syncfusion Blazor service in the Program.cs file to resolve the exception.
 
-    You can register the `SyncfusionBlazorService` in `Program.cs` file to resolve the exception.
-
-    ```c#
-    using Syncfusion.Blazor;
-    ....
-    builder.Services.AddSyncfusionBlazor();
-    ```
+  ```c#
+  using Syncfusion.Blazor;
+  ....
+  builder.Services.AddSyncfusionBlazor();
+  ```
 
 ## See also
 
diff --git a/blazor/textbox/multiline.md b/blazor/textbox/multiline.md
index a2ba597e23..21a40998dd 100644
--- a/blazor/textbox/multiline.md
+++ b/blazor/textbox/multiline.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Multiline in Blazor TextBox Component
 
-This feature allows the textbox to accept one or more lines of text like address, description, comments, and more.
+This feature enables the TextBox to accept multiple lines of text for scenarios such as addresses, descriptions, and comments. When Multiline is enabled, the component renders an HTML textarea element under the hood and supports vertical resizing by default.
 
 ## Create multiline textbox
 
-The default textbox can be converted into the multiline textbox by setting the [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Multiline) API value as true or pass HTML5 textarea as element to the textbox.
+The default TextBox can be converted into a multiline TextBox by setting the [Multiline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Multiline) property to true or by passing an HTML5 textarea element to the TextBox.
 
-N> The multiline text box allows to resize it in vertical direction alone.
+N> The multiline TextBox allows resizing in the vertical direction only by default.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -35,7 +35,7 @@ N> The multiline text box allows to resize it in vertical direction alone.
 
 ## Implementing floating label
 
-The floating label behavior can be achieved in the multiline text box by setting [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) to 'Auto'. The Placeholder text act as floating label to the multiline textbox. The Placeholder text can be provided to the multiline textbox either by using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Placeholder) property or Placeholder attribute.
+Floating label behavior can be applied to a multiline TextBox by setting [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_FloatLabelType) to Auto. In this mode, the Placeholder text acts as the floating label for the multiline TextBox. The placeholder can be specified using the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Placeholder) property or the Placeholder attribute. Use descriptive placeholder text or an associated label to improve accessibility.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -67,7 +67,7 @@ The floating label behavior can be achieved in the multiline text box by setting
 
 ## Disable resizing
 
-By default, the multiline text box is rendered with resizable. The resize of the multiline text box can be disabled by applying the following CSS styles.
+By default, the multiline TextBox is resizable vertically. Resizing can be disabled by applying the following CSS styles (using the CSS resize property set to none).
 
 ```CSS
 textarea.e-input,
diff --git a/blazor/textbox/native-events.md b/blazor/textbox/native-events.md
index 214fae6ea1..d1cb753fa6 100644
--- a/blazor/textbox/native-events.md
+++ b/blazor/textbox/native-events.md
@@ -9,13 +9,13 @@ documentation: ug
 
 # Native Events in Blazor TextBox Component
 
-The following section explains the steps to include native events and pass data to event handler in textbox component.
+The following section explains how to bind native DOM events and pass event data to an event handler in the TextBox component.
 
 ## Bind native events to textbox
 
-Any native event can be accessed by using on `<event>` attribute with a component. The attribute's value is treated as an event handler.
+Native browser events can be handled by adding the @on<event> attribute to the component. The attribute value is an event handler that runs when the corresponding DOM event occurs.
 
-In the following example, the KeyPressed method is called every time the key is pressed on textbox.
+In the following example, the KeyPressed method is called every time a key is pressed in the TextBox.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -29,7 +29,7 @@ In the following example, the KeyPressed method is called every time the key is
 }
 ```
 
-Also, the above example code can be rewritten as follows using Lambda expressions.
+The same behavior can be expressed with a lambda expression.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -40,16 +40,16 @@ Also, the above example code can be rewritten as follows using Lambda expression
 
 ## Pass event data to event handler
 
-Blazor provides set of argument types for map to native events. The list of event types and event arguments are:
+Blazor provides strongly typed event argument classes that map to native events. Common event categories and their corresponding argument types include:
 
-* Focus Events - FocusEventArgs
-* Mouse Events - MouseEventArgs
-* Keyboard Events - KeyboardEventArgs
-* Input Events - ChangeEventArgs/EventArgs
-* Touch Events – TouchEventArgs
-* Pointer Events – PointerEventArgs
+* Focus events – FocusEventArgs
+* Mouse events – MouseEventArgs
+* Keyboard events – KeyboardEventArgs
+* Input/change events – ChangeEventArgs/EventArgs
+* Touch events – TouchEventArgs
+* Pointer events – PointerEventArgs
 
-In the following example, the KeyPressed method is called every time any key is pressed inside textbox. But the message will be printed when the "s" key is pressed.
+In the following example, the KeyPressed method is invoked on every key press in the TextBox, and a message is written only when the "s" key is pressed.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -65,13 +65,13 @@ In the following example, the KeyPressed method is called every time any key is
 }
 ```
 
-Using Lambda expression also, the event data can be passed to the event handler.
+Event argument types are defined in the Microsoft.AspNetCore.Components.Web namespace. Event handlers can also be async (returning Task) when asynchronous work is required.
 
 ## List of Native events supported
 
 | List of Native events |  |  | |
 | --- | --- | --- | --- |
 | onclick | onblur | onfocus | onfocusout |
-| onmousemove | onmouseover | onmouseout | onmousedown | onmouseup |
-| ondblclick | onkeydown | onkeyup | onkeypress |
-| ontouchend | onfocusin | onmouseup | ontouchstart |
\ No newline at end of file
+| onmousemove | onmouseover | onmouseout | onmousedown |
+| onmouseup | ondblclick | onkeydown | onkeyup |
+| onkeypress | onfocusin | oninput | onchange |
\ No newline at end of file
diff --git a/blazor/textbox/sizing.md b/blazor/textbox/sizing.md
index cd6b170730..345f214cce 100644
--- a/blazor/textbox/sizing.md
+++ b/blazor/textbox/sizing.md
@@ -9,12 +9,12 @@ documentation: ug
 
 # Sizing in Blazor TextBox Component
 
-The TextBox can be rendered in two different sizes:
+The TextBox supports two visual sizes for different layout needs. Use the default size for standard forms and the small size to fit dense layouts while maintaining readability and accessibility.
 
 Property   | Description
 ------------ | -------------
-  Normal     | By default, the TextBox is rendered with normal size.
-  Small      | Add `e-small` class to the input element, or else add to the input container.
+Normal | The default rendering of the TextBox with standard height and padding.
+Small | Apply the e-small CSS class to the component using the CssClass property or to the input container (including the floating label wrapper) to reduce height and padding.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -32,4 +32,4 @@ Property   | Description
 <SfTextBox Placeholder="Focus the input" CssClass="e-small" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>
 ```
 
-![Changin Blazor TextBox Size](./images/blazor-textbox-change-size.png)
\ No newline at end of file
+![Changing Blazor TextBox size](./images/blazor-textbox-change-size.png)
\ No newline at end of file
diff --git a/blazor/textbox/style-appearance.md b/blazor/textbox/style-appearance.md
index dfbc3e1305..b8b64a7b54 100644
--- a/blazor/textbox/style-appearance.md
+++ b/blazor/textbox/style-appearance.md
@@ -9,11 +9,11 @@ documentation: ug
 
 # Style and appearance in Blazor TextBox Component
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The following guidance outlines CSS selectors and examples that can be used to modify the control’s appearance according to user preferences and design requirements.
 
 ## Customizing the appearance of TextBox container element
 
-Use the following CSS to customize the appearance of TextBox container element.
+Use the following CSS to customize the appearance of the TextBox container element, including input height and font size. These selectors target the input/textarea elements within the floating label and input group wrappers, which may be required to override theme defaults.
 
 ```css
 /* To specify height and font size */
@@ -25,7 +25,7 @@ Use the following CSS to customize the appearance of TextBox container element.
 
 ## Customizing the TextBox placeholder
 
-Use the following CSS to customize the TextBox placeholder
+Use the following CSS to customize the TextBox placeholder.
 
 ```css
 /* To specify font size and color */
@@ -37,7 +37,7 @@ Use the following CSS to customize the TextBox placeholder
 
 ## Align text in TextBox
 
-You can change alignment of text in textbox by setting `text-align` attribute using `.e-textbox`.
+Text alignment can be changed by applying the text-align CSS property to the input. Use a selector such as .e-textbox for global alignment, or apply a custom class for a specific instance.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -54,7 +54,7 @@ text-align: right;
 
 ![Blazor TextBox Text Alignment](./images/blazor-textbox-align-right.png)
 
-You can change alignment of text in particular textbox by setting `text-align` attribute directly using `CssClass` property.
+To align text in a specific TextBox only, set text-align via a custom class using the CssClass property.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -68,7 +68,7 @@ text-align: right;
 </style>
 ```
 
-![Blazor TextBox Text Alignment](./images/blazor-textbox-align-individual.png)
+![Blazor TextBox text alignment](./images/blazor-textbox-align-individual.png)
 
 ## See also
 
diff --git a/blazor/textbox/validation.md b/blazor/textbox/validation.md
index abf865fea9..4e8e89394f 100644
--- a/blazor/textbox/validation.md
+++ b/blazor/textbox/validation.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Validation in Blazor TextBox Component
 
-The TextBox supports three types of validation styles namely `error`, `warning`, and `success`. These states are enabled by adding corresponding classes `.e-error`, `.e-warning`, or `.e-success` to the input parent element.
+The TextBox supports three types of validation styles, namely `error`, `warning`, and `success`. These are visual states only and do not implement validation logic. Apply the corresponding classes—`.e-error`, `.e-warning`, or `.e-success`—to the component’s wrapper (added via the CssClass property) to change the appearance based on validation outcome. For more information, see the CssClass API reference.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
@@ -28,7 +28,7 @@ The TextBox supports three types of validation styles namely `error`, `warning`,
 
 ## Limit no of character count
 
-You can limit the number of characters by setting `maxlength` attribute using `HtmlAttributes` property.
+Limit the number of characters by setting the `maxlength` attribute using the HtmlAttributes property. This enforces a client-side input limit and complements (but does not replace) server-side or model validation.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs