diff --git a/docs/en/Customizing-Application-Modules-Guide.md b/docs/en/Customizing-Application-Modules-Guide.md
index 56b94ae4fc..438c087e0c 100644
--- a/docs/en/Customizing-Application-Modules-Guide.md
+++ b/docs/en/Customizing-Application-Modules-Guide.md
@@ -75,6 +75,7 @@ There are some low level systems that you can control entity actions, table colu
 Entity action extension system allows you to add a new action to the action menu for an entity on the user interface;
 
 * [Entity Action Extensions for ASP.NET Core UI](UI/AspNetCore/Entity-Action-Extensions.md)
+* [Entity Action Extensions for Blazor UI](UI/Blazor/Entity-Action-Extensions.md)
 * [Entity Action Extensions for Angular](UI/Angular/Entity-Action-Extensions.md)
 
 #### Data Table Column Extensions
@@ -82,6 +83,7 @@ Entity action extension system allows you to add a new action to the action menu
 Data table column extension system allows you to add a new column in the data table on the user interface;
 
 * [Data Table Column Extensions for ASP.NET Core UI](UI/AspNetCore/Data-Table-Column-Extensions.md)
+* [Data Table Column Extensions for Blazor UI](UI/Blazor/Data-Table-Column-Extensions.md)
 * [Data Table Column Extensions for Angular](UI/Angular/Data-Table-Column-Extensions.md)
 
 #### Page Toolbar
@@ -89,6 +91,7 @@ Data table column extension system allows you to add a new column in the data ta
 Page toolbar system allows you to add components to the toolbar of a page;
 
 * [Page Toolbar Extensions for ASP.NET Core UI](UI/AspNetCore/Page-Toolbar-Extensions.md)
+* [Page Toolbar Extensions for Blazor UI](UI/Blazor/Page-Toolbar-Extensions.md)
 * [Page Toolbar Extensions for Angular](UI/Angular/Page-Toolbar-Extensions.md)
 
 #### Others
diff --git a/docs/en/Getting-Started-Create-Solution.md b/docs/en/Getting-Started-Create-Solution.md
index f2f41e29ce..8c62246010 100644
--- a/docs/en/Getting-Started-Create-Solution.md
+++ b/docs/en/Getting-Started-Create-Solution.md
@@ -15,7 +15,7 @@
 
 We will use the ABP CLI to create a new ABP project.
 
-> Alternatively, you can **create and download** projects from [ABP Framework website](https://abp.io/get-started) by easily selecting the all the options from the page.
+> Alternatively, you can **create and download** projects from the [ABP Framework website](https://abp.io/get-started) by easily selecting all options from the page.
 
 Use the `new` command of the ABP CLI to create a new project:
 
@@ -41,6 +41,12 @@ abp new Acme.BookStore{{if UI == "NG"}} -u angular{{else if UI == "Blazor"}} -u
 
 > [ABP CLI document](./CLI.md) covers all of the available commands and options.
 
+## Mobile Development
+
+If you want to include a [React Native](https://reactnative.dev/) project in your solution, add `-m react-native` (or `--mobile react-native`) argument to project creation command. This is a basic React Native startup template to develop mobile applications integrated to your ABP based backends.
+
+See the [Getting Started with the React Native](Getting-Started-React-Native.md) document to learn how to configure and run the React Native application.
+
 ### The Solution Structure
 
 The solution has a layered structure (based on the [Domain Driven Design](Domain-Driven-Design.md)) and contains unit & integration test projects. See the [application template document](Startup-Templates/Application.md) to understand the solution structure in details. 
@@ -49,7 +55,7 @@ The solution has a layered structure (based on the [Domain Driven Design](Domain
 
 #### MongoDB Transactions
 
-The [startup template](Startup-templates/Index.md) **disables** transactions in the `.MongoDB` project by default. If your MongoDB server supports transactions, you can enable the it in the *YourProjectMongoDbModule* class's `ConfigureServices` method:
+The [startup template](Startup-templates/Index.md) **disables** transactions in the `.MongoDB` project by default. If your MongoDB server supports transactions, you can enable it in the *YourProjectMongoDbModule* class's `ConfigureServices` method:
 
   ```csharp
 Configure<AbpUnitOfWorkDefaultOptions>(options =>
diff --git a/docs/en/Getting-Started-Running-Solution.md b/docs/en/Getting-Started-Running-Solution.md
index e871ec882f..3f508589a3 100644
--- a/docs/en/Getting-Started-Running-Solution.md
+++ b/docs/en/Getting-Started-Running-Solution.md
@@ -193,12 +193,6 @@ It may take a longer time for the first build. Once it finishes, it opens the An
 
 Enter **admin** as the username and **1q2w3E*** as the password to login to the application. The application is up and running. You can start developing your application based on this startup template.
 
-## Mobile Development
-
-If you want to include a [React Native](https://reactnative.dev/) project in your solution, add `-m react-native` (or `--mobile react-native`) argument to project creation command. This is a basic React Native startup template to develop mobile applications integrated to your ABP based backends.
-
-See the [Getting Started with the React Native](Getting-Started-React-Native.md) document to learn how to configure and run the React Native application.
-
 ## See Also
 
 * [Web Application Development Tutorial](Tutorials/Part-1.md)
diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md
index 17bc98c538..5df5dae343 100644
--- a/docs/en/Tutorials/Part-2.md
+++ b/docs/en/Tutorials/Part-2.md
@@ -447,7 +447,11 @@ For more information, see the [RoutesService document](../UI/Angular/Modifying-t
 
 [ABP CLI](../CLI.md) provides `generate-proxy` command that generates client proxies for your HTTP APIs to make easy to consume your HTTP APIs from the client side. Before running `generate-proxy` command, your host must be up and running.
 
-Run the following command in the `angular` folder:
+> **Warning**: There is a problem with IIS Express; it doesn't allow to connect to the application from another process. If you are using Visual Studio, select the `Acme.BookStore.HttpApi.Host` instead of IIS Express in the run button drop-down list, as shown in the figure below:
+
+![vs-run-without-iisexpress](images/vs-run-without-iisexpress.png)
+
+Once the host application is running, execute the following command in the `angular` folder:
 
 ```bash
 abp generate-proxy
diff --git a/docs/en/Tutorials/Todo/Index.md b/docs/en/Tutorials/Todo/Index.md
index c927d5c925..5bbf4c8eaf 100644
--- a/docs/en/Tutorials/Todo/Index.md
+++ b/docs/en/Tutorials/Todo/Index.md
@@ -667,7 +667,9 @@ If you run the `TodoApp.HttpApi.Host` application, you can see the Todo API:
 
 ABP provides a handy feature to automatically create client-side services to easily consume HTTP APIs provided by the server.
 
-You first need to run the `TodoApp.HttpApi.Host` project since the proxy generator reads API definitions from the server application. However, there is a problem with IIS Express; it doesn't allow to connect to the application from another process. If you are using Visual Studio, select the `TodoApp.HttpApi.Host` instead of IIS Express in the run button drop down menu, as shown in the figure below:
+You first need to run the `TodoApp.HttpApi.Host` project since the proxy generator reads API definitions from the server application. 
+
+> **Warning**: There is a problem with IIS Express; it doesn't allow to connect to the application from another process. If you are using Visual Studio, select the `TodoApp.HttpApi.Host` instead of IIS Express in the run button drop-down list, as shown in the figure below:
 
 ![run-without-iisexpress](run-without-iisexpress.png)
 
@@ -701,7 +703,7 @@ import { TodoItemDto, TodoService } from '@proxy';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
 
@@ -772,9 +774,9 @@ Open the `/angular/src/app/home/home.component.html` file and replace its conten
 </div>
 ````
 
-### home.component.css
+### home.component.scss
 
-As the final touch, open the `/angular/src/app/home/home.component.css` file in the `Pages` and replace with the following content:
+As the final touch, open the `/angular/src/app/home/home.component.scss` file and replace its content with the following code block:
 
 ````css
 #TodoList{
diff --git a/docs/en/Tutorials/images/vs-run-without-iisexpress.png b/docs/en/Tutorials/images/vs-run-without-iisexpress.png
new file mode 100644
index 0000000000..03c30e2b48
Binary files /dev/null and b/docs/en/Tutorials/images/vs-run-without-iisexpress.png differ
diff --git a/docs/en/UI/Blazor/Data-Table-Column-Extensions.md b/docs/en/UI/Blazor/Data-Table-Column-Extensions.md
new file mode 100644
index 0000000000..ebb2f27cbf
--- /dev/null
+++ b/docs/en/UI/Blazor/Data-Table-Column-Extensions.md
@@ -0,0 +1,128 @@
+# Data Table Column Extensions for Blazor UI
+
+Data table column extension system allows you to add a **new table column** on the user interface. The example below adds a new column with the "Email Confirmed" title:
+
+![datatable-column-extension-](../../images/table-column-extension-example-blazor.png)
+
+You can use the standard column options to fine control the table column.
+
+> Note that this is a low level API to find control the table column. If you want to show an extension property on the table, see the [module entity extension](../../Module-Entity-Extensions.md) document.
+
+## How to Set Up
+
+### Create a C# File
+
+First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project:
+
+![user-action-extension-on-solution](../../images/user-action-extension-on-blazor-project.png)
+
+We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetTableColumnsAsync` method and add the table column programmatically.
+
+Here, the content of the overridden `SetTableColumnsAsync` method.
+
+```csharp
+protected override async ValueTask SetTableColumnsAsync()
+{
+    await base.SetTableColumnsAsync();
+    var confirmedColumn = new TableColumn
+    {
+        Title = "Email Confirmed",
+        Data = nameof(IdentityUserDto.EmailConfirmed)
+    };
+    TableColumns.Get<UserManagement>().Add(confirmedColumn);
+}
+```
+Here, the entire content of the file.
+
+```csharp
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Components.Web.Extensibility.TableColumns;
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Identity;
+using Volo.Abp.Identity.Blazor.Pages.Identity;
+
+namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity
+{
+    [ExposeServices(typeof(UserManagement))]
+    [Dependency(ReplaceServices = true)]
+    public class CustomizedUserManagement : UserManagement
+    {
+        protected override async ValueTask SetTableColumnsAsync()
+        {
+            await base.SetTableColumnsAsync();
+            var confirmedColumn = new TableColumn
+            {
+                Title = "Email Confirmed",
+                Data = nameof(IdentityUserDto.EmailConfirmed)
+            };
+            TableColumns.Get<UserManagement>().Add(confirmedColumn);
+        }
+    }
+}
+```
+
+## Customizing Data Table Columns
+
+This section explains how to customize data table columns using the properties in the `TableColumn` type.
+
+* `Title`: Title of the column.
+* `Data`: Name of the field in the supplied model.
+* `Component`: Type of the component that you want to render. See the "Rendering Custom Components In The Data Table Columns" section for details.
+* `Actions`: Action lists for the column. You can render additional action columns by adding actions to this collection.
+* `ValueConverter`: Simple converter function that is being called before rendering the content.
+* `Sortable`: A boolean field indicating whether the column is sortable or not.
+* `DisplayFormat`: You can specify a custom format for the column.
+* `DisplayFormatProvider` : You can provide a custom `IFormatProvider` for the column. Default value is `CultureInfo.CurrentCulture`.
+
+## Rendering Custom Components In The Data Table Columns
+
+This section explains how to render custom blazor components in data table columns. In this example, we're going to display custom icons instead of text representations of the property.
+
+First of all, create a blazor component. We will name it `CustomTableColumn`.
+
+![data-table-colum-extension-blazor-component-render-solution](../../images/data-table-colum-extension-blazor-component-render-solution.png)
+
+Add an object parameter named `Data`.
+
+```csharp
+public class CustomTableColumn
+{
+    [Parameter]
+    public object Data { get; set; }
+}
+```
+
+Navigate to the razor file and paste the following code.
+
+```csharp
+@using System
+@using Volo.Abp.Identity
+
+@if (Data.As<IdentityUserDto>().EmailConfirmed)
+{
+    <Icon class="text-success" Name="IconName.Check" />
+}
+else
+{
+    <Icon class="text-danger" Name="IconName.Times" />
+}
+```
+
+Navigate back to the `CustomizedUserManagement` class, and use `Component` property to specify the custom blazor component.
+
+```csharp
+protected override async ValueTask SetTableColumnsAsync()
+{
+    await base.SetTableColumnsAsync();
+    var confirmedColumn = new TableColumn
+    {
+        Title = "Email Confirmed",
+        Component = typeof(CustomTableColumn)
+    };
+    TableColumns.Get<UserManagement>().Add(confirmedColumn);
+}
+```
+
+Run the project and you will see the icons instead of text fields.
+
+![data-table-colum-extension-blazor-component-render](../../images/data-table-colum-extension-blazor-component-render.png)
\ No newline at end of file
diff --git a/docs/en/UI/Blazor/Entity-Action-Extensions.md b/docs/en/UI/Blazor/Entity-Action-Extensions.md
new file mode 100644
index 0000000000..57666e5362
--- /dev/null
+++ b/docs/en/UI/Blazor/Entity-Action-Extensions.md
@@ -0,0 +1,109 @@
+# Entity Action Extensions for Blazor UI
+
+Entity action extension system allows you to add a **new action** to the action menu for an entity. A **Click Me** action was added to the *User Management* page below:
+
+![user-action-extension-click-me](../../images/user-action-blazor-extension-click-me.png)
+
+You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can access to the current entity in your code.
+
+## How to Set Up
+
+In this example, we will add a "Click Me!" action and execute a C# code for the user management page of the [Identity Module](../../Modules/Identity.md).
+
+### Create a C# File
+
+First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project:
+
+![user-action-extension-on-solution](../../images/user-action-extension-on-blazor-project.png)
+
+We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetToolbarItemsAsync` method and add the entity action programmatically.
+
+Here, the content of the overridden `SetToolbarItemsAsync` method.
+
+```csharp
+protected override async ValueTask SetToolbarItemsAsync()
+{
+    await base.SetToolbarItemsAsync();
+    var clickMeAction = new EntityAction()
+    {
+        Text = "Click Me!",
+        Clicked = (data) =>
+        {
+            //TODO: Write your custom code
+
+            return Task.CompletedTask;
+        }
+    };
+    
+    EntityActions.Get<UserManagement>().Add(clickMeAction);
+}
+```
+
+In the `Clicked` property, you can do anything you need.
+
+Here, the entire content of the file. 
+```csharp
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Components.Web.Extensibility.EntityActions;
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Identity.Blazor.Pages.Identity;
+
+namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity
+{
+    [ExposeServices(typeof(UserManagement))]
+    [Dependency(ReplaceServices = true)]
+    public class CustomizedUserManagement : UserManagement
+    {
+        protected override async ValueTask SetToolbarItemsAsync()
+        {
+            await base.SetToolbarItemsAsync();
+            var clickMeAction = new EntityAction()
+            {
+                Text = "Click Me!",
+                Clicked = (data) =>
+                {
+                    //TODO: Write your custom code
+
+                    return Task.CompletedTask;
+                }
+            };
+            EntityActions.Get<UserManagement>().Add(clickMeAction);
+        }
+    }
+}
+```
+
+## Customizing Entity Actions
+
+This section explains how to customize entity actions using the properties in the `EntityAction` type. 
+
+Here, the list of the properties that you use in the `EntityAction`.
+* `Text` : Entity action text.
+* `Clicked` : Click event handler for the action. You can use the `data` parameter to access the selected item in the `DataGrid`.
+* `Icon` : Icon for the action.
+* `Color` : Color for the action.
+* `Visible`: Visible function to determine the actions' visibility based on the data grid items individually. You can make the action invisible for some data grid items. You can also use the `data` parameter to access the selected item in the `DataGrid`.
+* `Confirmation`: Confirmation message for the action. You can use the `data` parameter to access the selected item in the `DataGrid`.
+
+#### Example
+
+```csharp
+var clickMeAction = new EntityAction()
+{
+    Text = "Click Me!",
+    Clicked = (data) =>
+    {
+        //TODO: Write your custom code
+
+        return Task.CompletedTask;
+    },
+    Color = Blazorise.Color.Danger,
+    Icon = "fas fa-hand-point-right",
+    ConfirmationMessage = (data) => "Are you sure you want to click to the action?",
+    Visible = (data) =>
+    {
+        //TODO: Write your custom visibility action
+        //var selectedUser = data.As<IdentityUserDto>();
+    }
+};
+```
diff --git a/docs/en/UI/Blazor/Page-Header.md b/docs/en/UI/Blazor/Page-Header.md
index 2c7921bbd2..59748b717a 100644
--- a/docs/en/UI/Blazor/Page-Header.md
+++ b/docs/en/UI/Blazor/Page-Header.md
@@ -1,3 +1,90 @@
 # Blazor UI: Page Header
 
-TODO
\ No newline at end of file
+You can use the`PageHeader` component to set the page title, the breadcrumb items and the toolbar items for a page. Before using the `PageHeader` component, you need to add a using statement for the `Volo.Abp.AspNetCore.Components.Web.Theming.Layout` namespace.
+
+Once you add the `PageHeader` component to your page, you can control the related values using the parameters. 
+
+## Page Title
+
+ You can use the `Title` parameter to control the page header.
+
+```csharp
+<PageHeader Title="Book List">
+</PageHeader>
+```
+
+## Breadcrumb
+
+> **The [Basic Theme](Basic-Theme.md) currently doesn't implement the breadcrumbs.**
+
+Breadcrumbs can be added using the `BreadcrumbItems` property.
+
+**Example: Add Language Management to the breadcrumb items.**
+
+Create a collection of `Volo.Abp.BlazoriseUI.BreadcrumbItem` objects and set the collection to the `BreadcrumbItems` parameter.
+
+```csharp
+public partial class Index
+{
+    protected List<BreadcrumbItem> BreadcrumbItems { get; } = new();
+
+    protected override void OnInitialized()
+    {
+        BreadcrumbItems.Add(new BreadcrumbItem("Language Management"));
+    }
+}
+```
+
+Navigate back to the razor page.
+
+```csharp
+<PageHeader BreadcrumbItems="@BreadcrumbItems" /> 
+```
+
+The theme then renders the breadcrumb. An example render result can be:
+
+![breadcrumbs-example](../../images/breadcrumbs-example.png)
+
+* The Home icon is rendered by default. Set `BreadcrumbShowHome` to `false` to hide it.
+* Breadcrumb items will be activated based on current navigation. Set `BreadcrumbShowCurrent` to `false` to disable it.
+
+You can add as many items as you need. `BreadcrumbItem` constructor gets three parameters:
+
+* `text`: The text to show for the breadcrumb item.
+* `url` (optional): A URL to navigate to, if the user clicks to the breadcrumb item.
+* `icon` (optional): An icon class (like `fas fa-user-tie` for Font-Awesome) to show with the `text`.
+
+## Page Toolbar
+
+Page toolbar can be set using the `Toolbar` property.
+
+**Example: Add  a "New Item" toolbar item to the page toolbar.**
+
+Create a `PageToolbar` object and define toolbar items using the `AddButton` extension method. 
+
+```csharp
+public partial class Index
+{
+    protected PageToolbar Toolbar { get; } = new();
+    
+    protected override void OnInitialized()
+    {
+        Toolbar.AddButton("New Item", () =>
+        {
+            //Write your click action here
+            return Task.CompletedTask;
+        }, icon:IconName.Add);
+    }
+}
+```
+
+Navigate back to the razor page and set the `Toolbar` parameter.
+
+```csharp
+<PageHeader Toolbar="@Toolbar"  /> 
+```
+
+An example render result can be:
+
+![breadcrumbs-example](../../images/page-header-toolbar-blazor.png)
+
diff --git a/docs/en/UI/Blazor/Page-Toolbar-Extensions.md b/docs/en/UI/Blazor/Page-Toolbar-Extensions.md
new file mode 100644
index 0000000000..34e7c5b1b1
--- /dev/null
+++ b/docs/en/UI/Blazor/Page-Toolbar-Extensions.md
@@ -0,0 +1,126 @@
+# Page Toolbar Extensions for Blazor UI
+
+Page toolbar system allows you to add components to the toolbar of any page. The page toolbar is the area right to the header of a page. A button ("Import users from excel") was added to the user management page below:
+
+![page-toolbar-button](../../images/page-toolbar-button-blazor.png)
+
+You can add any type of view component item to the page toolbar or modify existing items.
+
+## How to Set Up
+
+In this example, we will add an "Import users from excel" button and execute a C# code for the user management page of the [Identity Module](../../Modules/Identity.md). 
+
+### Create a C# File
+
+First, add a new C# file to your solution. We added inside the `/Pages/Identity/` folder of the `.Blazor` project:
+
+![user-action-extension-on-solution](../../images/user-action-extension-on-blazor-project.png)
+
+We will use the [component override system](Customization-Overriding-Components.md) in the Blazor. After creating a class inherits from the `UserManagement` component, we will override the `SetToolbarItemsAsync` method and add the toolbar item programmatically.
+
+Here, the content of the overridden `SetToolbarItemsAsync` method.
+
+```csharp
+protected override async ValueTask SetToolbarItemsAsync()
+{
+    await base.SetToolbarItemsAsync();
+    Toolbar.AddButton("Import users from excel", () =>
+    {
+        //TODO: Write your custom code
+        return Task.CompletedTask;
+    }, "file-import", Blazorise.Color.Secondary);
+}
+```
+> In order to use the `AddButton` extension method, you need to add a using statement for the `Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars` namespace.
+
+Here, the entire content of the file.
+
+```csharp
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Components.Web.Theming.PageToolbars;
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Identity.Blazor.Pages.Identity;
+
+namespace MyCompanyName.MyProjectName.Blazor.Pages.Identity
+{
+    [ExposeServices(typeof(UserManagement))]
+    [Dependency(ReplaceServices = true)]
+    public class CustomizedUserManagement : UserManagement
+    {
+        protected override async ValueTask SetToolbarItemsAsync()
+        {
+            await base.SetToolbarItemsAsync();
+            Toolbar.AddButton("Import users from excel", () =>
+            {
+                //TODO: Write your custom code
+                return Task.CompletedTask;
+            }, "file-import", Blazorise.Color.Secondary);
+        }
+    }
+}
+```
+
+When you run the application, you will see the button added next to the current button list. There are some other parameters of the `AddButton` method (for example, use `Order` to set the order of the button component relative to the other components).
+
+## Advanced Use Cases
+
+While you typically want to add a button action to the page toolbar, it is possible to add any type of blazor component.
+
+### Add A Blazor Component to a Page Toolbar
+
+First, create a new blazor component in your project:
+
+![page-toolbar-custom-component-blazor](../../images/page-toolbar-custom-component-blazor.png)
+
+For this example, we've created a `MyToolbarComponent` component under the `/Pages/Identity/` folder.
+
+`MyToolbarComponent.razor` content:
+
+````csharp
+<Button Color="Color.Dark">CLICK ME</Button>
+````
+We will leave the `MyToolbarComponent.razor.cs` file empty.
+
+Then you can add the `MyToolbarComponent` to the user management page toolbar:
+
+````csharp
+protected override async ValueTask SetToolbarItemsAsync()
+{
+    await base.SetToolbarItemsAsync();
+    Toolbar.AddComponent<MyToolbarComponent>();
+}
+````
+
+* If your component accepts parameters, you can pass them as key/value pairs using the `arguments` parameter.
+
+#### Permissions
+
+If your button/component should be available based on a [permission/policy](../../Authorization.md), you can pass the permission/policy name as the `RequiredPolicyName` parameter to the `AddButton` and `AddComponent` methods.
+
+### Add a Page Toolbar Contributor
+
+If you perform advanced custom logic while adding an item to a page toolbar, you can create a class that implements the `IPageToolbarContributor` interface or inherits from the `PageToolbarContributor` class:
+
+````csharp
+public class MyToolbarContributor : PageToolbarContributor
+{
+    public override Task ContributeAsync(PageToolbarContributionContext context)
+    {
+        context.Items.Insert(0, new PageToolbarItem(typeof(MyToolbarComponent)));
+        return Task.CompletedTask;
+    }
+}
+````
+
+* You can use `context.ServiceProvider` to resolve dependencies if you need.
+
+Then add your class to the `Contributors` list:
+
+````csharp
+protected override async ValueTask SetToolbarItemsAsync()
+{
+    await base.SetToolbarItemsAsync();
+    Toolbar.Contributors.Add(new PageContributor());
+}
+````
+
diff --git a/docs/en/images/data-table-colum-extension-blazor-component-render-solution.png b/docs/en/images/data-table-colum-extension-blazor-component-render-solution.png
new file mode 100644
index 0000000000..77612b5d34
Binary files /dev/null and b/docs/en/images/data-table-colum-extension-blazor-component-render-solution.png differ
diff --git a/docs/en/images/data-table-colum-extension-blazor-component-render.png b/docs/en/images/data-table-colum-extension-blazor-component-render.png
new file mode 100644
index 0000000000..9d018e2ab9
Binary files /dev/null and b/docs/en/images/data-table-colum-extension-blazor-component-render.png differ
diff --git a/docs/en/images/page-header-toolbar-blazor.png b/docs/en/images/page-header-toolbar-blazor.png
new file mode 100644
index 0000000000..a4d0454893
Binary files /dev/null and b/docs/en/images/page-header-toolbar-blazor.png differ
diff --git a/docs/en/images/page-toolbar-button-blazor.png b/docs/en/images/page-toolbar-button-blazor.png
new file mode 100644
index 0000000000..fb907e797a
Binary files /dev/null and b/docs/en/images/page-toolbar-button-blazor.png differ
diff --git a/docs/en/images/page-toolbar-custom-component-blazor.png b/docs/en/images/page-toolbar-custom-component-blazor.png
new file mode 100644
index 0000000000..fb0856fa03
Binary files /dev/null and b/docs/en/images/page-toolbar-custom-component-blazor.png differ
diff --git a/docs/en/images/table-column-extension-example-blazor.png b/docs/en/images/table-column-extension-example-blazor.png
new file mode 100644
index 0000000000..3079fa278c
Binary files /dev/null and b/docs/en/images/table-column-extension-example-blazor.png differ
diff --git a/docs/en/images/user-action-blazor-extension-click-me.png b/docs/en/images/user-action-blazor-extension-click-me.png
new file mode 100644
index 0000000000..fb1ea80182
Binary files /dev/null and b/docs/en/images/user-action-blazor-extension-click-me.png differ
diff --git a/docs/en/images/user-action-extension-on-blazor-project.png b/docs/en/images/user-action-extension-on-blazor-project.png
new file mode 100644
index 0000000000..d11ea328b6
Binary files /dev/null and b/docs/en/images/user-action-extension-on-blazor-project.png differ
diff --git a/framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Templates/App/AppTemplateSwitchEntityFrameworkCoreToMongoDbStep.cs b/framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Templates/App/AppTemplateSwitchEntityFrameworkCoreToMongoDbStep.cs
index b0a778c323..290da79157 100644
--- a/framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Templates/App/AppTemplateSwitchEntityFrameworkCoreToMongoDbStep.cs
+++ b/framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/ProjectBuilding/Templates/App/AppTemplateSwitchEntityFrameworkCoreToMongoDbStep.cs
@@ -76,6 +76,29 @@ namespace Volo.Abp.Cli.ProjectBuilding.Templates.App
                 "/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json"
             );
 
+            //MyCompanyName.MyProjectName.Blazor.Server
+
+            ChangeProjectReference(
+                context,
+                "/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/MyCompanyName.MyProjectName.Blazor.Server.csproj",
+                "EntityFrameworkCore.DbMigrations",
+                "MongoDB"
+            );
+
+            ChangeNamespaceAndKeyword(
+                context,
+                "/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/MyProjectNameBlazorModule.cs",
+                "MyCompanyName.MyProjectName.EntityFrameworkCore",
+                "MyCompanyName.MyProjectName.MongoDB",
+                "MyProjectNameEntityFrameworkCoreDbMigrationsModule",
+                "MyProjectNameMongoDbModule"
+            );
+
+            ChangeConnectionStringToMongoDb(
+                context,
+                "/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/appsettings.json"
+            );
+
             //MyCompanyName.MyProjectName.HttpApi.HostWithIds
 
             ChangeProjectReference(
diff --git a/templates/app/angular/src/app/home/home.component.css b/templates/app/angular/src/app/home/home.component.scss
similarity index 100%
rename from templates/app/angular/src/app/home/home.component.css
rename to templates/app/angular/src/app/home/home.component.scss
diff --git a/templates/app/angular/src/app/home/home.component.ts b/templates/app/angular/src/app/home/home.component.ts
index cd0aca4034..5e19367b34 100644
--- a/templates/app/angular/src/app/home/home.component.ts
+++ b/templates/app/angular/src/app/home/home.component.ts
@@ -5,7 +5,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css'],
+  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
   get hasLoggedIn(): boolean {
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Controllers/AccountController.cs b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Controllers/AccountController.cs
index 29fa140e4d..44d63fa0f2 100644
--- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Controllers/AccountController.cs
+++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Controllers/AccountController.cs
@@ -1,6 +1,6 @@
 using Volo.Abp.AspNetCore.Mvc.Authentication;
 
-namespace MyCompanyName.MyProjectName.Web.Controllers
+namespace MyCompanyName.MyProjectName.Blazor.Server.Tiered.Controllers
 {
     public class AccountController : ChallengeAccountController
     {
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Pages/Index.razor b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Pages/Index.razor
index c83e436a5d..bdc59498f0 100644
--- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Pages/Index.razor
+++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server.Tiered/Pages/Index.razor
@@ -12,6 +12,11 @@
         <h1>Welcome to the Application</h1>
 
         <p class="lead px-lg-5 mx-lg-5">@L["LongWelcomeMessage"]</p>
+        
+        @if (!CurrentUser.IsAuthenticated)
+        {
+            <a class="btn btn-primary" href="/Account/Login" ><i class="fa fa-sign-in"></i> @L["Login"]</a>
+        }
     </div>
 
     <div class="my-3 text-center">
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Pages/Index.razor b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Pages/Index.razor
index c83e436a5d..bdc59498f0 100644
--- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Pages/Index.razor
+++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.Server/Pages/Index.razor
@@ -12,6 +12,11 @@
         <h1>Welcome to the Application</h1>
 
         <p class="lead px-lg-5 mx-lg-5">@L["LongWelcomeMessage"]</p>
+        
+        @if (!CurrentUser.IsAuthenticated)
+        {
+            <a class="btn btn-primary" href="/Account/Login" ><i class="fa fa-sign-in"></i> @L["Login"]</a>
+        }
     </div>
 
     <div class="my-3 text-center">