diff --git a/docs/en/framework/ui/blazor/toolbars.md b/docs/en/framework/ui/blazor/toolbars.md
index 7b9992a15a..8ed30f1364 100644
--- a/docs/en/framework/ui/blazor/toolbars.md
+++ b/docs/en/framework/ui/blazor/toolbars.md
@@ -8,13 +8,25 @@ There is only one **standard toolbar** named "Main" (defined as a constant: `Sta
 
 In the screenshot above, there are two items added to the main toolbar: Language switch component & user menu. You can add your own items here.
 
-Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) and [LeptonX Theme](../../../ui-themes/lepton-x/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants.
+
+**LeptonX Lite Theme**
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
 
 | LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
 | :---: | :---: |
 | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) |
 
-Also, [LeptonX Theme](../../../ui-themes/lepton-x/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXToolbars.Main`,  `LeptonXToolbars.MainMobile`.
+**LeptonX Theme**
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+| LeptonXToolbars.Main | LeptonXToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../../images/leptonx-toolbar-main-example.png) | ![leptonx](../../../images/leptonx-toolbar-mainmobile-example.png) |
 
 ## Example: Add a Notification Icon
 
diff --git a/docs/en/framework/ui/mvc-razor-pages/toolbars.md b/docs/en/framework/ui/mvc-razor-pages/toolbars.md
index 8c7660e596..04860b9adb 100644
--- a/docs/en/framework/ui/mvc-razor-pages/toolbars.md
+++ b/docs/en/framework/ui/mvc-razor-pages/toolbars.md
@@ -8,12 +8,26 @@ There is only one **standard toolbar** named "Main" (defined as a constant: `Sta
 
 In the screenshot above, there are two items added to the main toolbar: Language switch component & user menu. You can add your own items here.
 
-Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/asp-net-core.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXLiteToolbars.Main`, `LeptonXLiteToolbars.MainMobile`.
+Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/asp-net-core.md) and [LeptonX Theme](../../../ui-themes/lepton-x/mvc.md) has 2 different toolbars for desktop and mobile views which defined as constants.
+
+**LeptonX Lite Theme**
+
+- `LeptonXLiteToolbars.Main`
+- `LeptonXLiteToolbars.MainMobile`
 
 | LeptonXLiteToolbars.Main | LeptonXLiteToolbars.MainMobile |
 | :---: | :---: |
 | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) |
 
+**LeptonX Theme**
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+| LeptonXToolbars.Main | LeptonXToolbars.MainMobile |
+| :---: | :---: |
+| ![leptonx](../../../images/leptonx-toolbar-main-example.png) | ![leptonx](../../../images/leptonx-toolbar-mainmobile-example.png) |
+
 ## Example: Add a Notification Icon
 
 In this example, we will add a **notification (bell) icon** to the left of the language switch item. A item in the toolbar should be a **view component**. So, first, create a new view component in your project:
diff --git a/docs/en/images/leptonx-toolbar-main-example.png b/docs/en/images/leptonx-toolbar-main-example.png
new file mode 100644
index 0000000000..104d3763ee
Binary files /dev/null and b/docs/en/images/leptonx-toolbar-main-example.png differ
diff --git a/docs/en/images/leptonx-toolbar-mainmobile-example.png b/docs/en/images/leptonx-toolbar-mainmobile-example.png
new file mode 100644
index 0000000000..f872dab8d7
Binary files /dev/null and b/docs/en/images/leptonx-toolbar-mainmobile-example.png differ
diff --git a/docs/en/ui-themes/lepton-x/mvc.md b/docs/en/ui-themes/lepton-x/mvc.md
index a317e8b9ed..ce12a0ea95 100644
--- a/docs/en/ui-themes/lepton-x/mvc.md
+++ b/docs/en/ui-themes/lepton-x/mvc.md
@@ -81,8 +81,32 @@ Configure<LeptonXThemeOptions>(options =>
 >
 > If your layout is **TopMenu**, then you have to add them under the **wwwroot/Themes/LeptonX/Global/top-menu/css/** folder.
 
+### Toolbars
+
+LeptonX includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXToolbars** class.
+
+- `LeptonXToolbars.Main`
+- `LeptonXToolbars.MainMobile`
+
+```csharp
+public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
+{
+    if (context.Toolbar.Name == LeptonXToolbars.Main)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
+    }
+
+    if (context.Toolbar.Name == LeptonXToolbars.MainMobile)
+    {
+        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
+    }
+
+    return Task.CompletedTask;
+}
+```
+
+> _You can visit the [Toolbars Documentation](../../framework/ui/mvc-razor-pages/toolbars.md) for better understanding._
 
-#### Handling Style Changes
 
 You can add extra logic by using javascript API when style is changed with the following event.
 ```js