diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor
index d3a4818632..3bac48024b 100644
--- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor
+++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor
@@ -7,7 +7,16 @@
 @inject IIdentityRoleAppService RoleAppService
 @inject IStringLocalizer<IdentityResource> L
 
-<h1>@L["Roles"]</h1>
+<Row>
+    <Column ColumnSize="ColumnSize.Is6">
+        <h1>@L["Roles"]</h1>
+    </Column>
+    <Column ColumnSize="ColumnSize.Is6">
+        <Paragraph Alignment="TextAlignment.Right">
+            <Button Color="Color.Primary" Clicked="OpenCreateModalAsync">+ New Role</Button>
+        </Paragraph>
+    </Column>
+</Row>
 
 <DataGrid TItem="IdentityRoleDto"
           Data="_roles"
@@ -34,8 +43,26 @@
     </DataGridColumns>
 </DataGrid>
 
-<h2>New Role</h2>
-
-<label>Name:</label>
-<input type="text" name="RoleName" @bind="_newRole.Name" />
-<button class="btn btn-primary" @onclick="CreateRoleAsync">Create!</button>
\ No newline at end of file
+<Modal @ref="_createModal">
+    <ModalBackdrop />
+    <ModalContent IsCentered="true">
+        <ModalHeader>
+            <ModalTitle>Create a new role</ModalTitle>
+            <CloseButton Clicked="CloseCreateModal" />
+        </ModalHeader>
+        <ModalBody>
+            <Field>
+                <FieldLabel>Name</FieldLabel>
+                <TextEdit Placeholder="Enter name..." @bind-text="_newRole.Name" />
+            </Field>
+            <Field>
+                <Check TValue="bool" @bind-checked="_newRole.IsDefault">Default</Check>
+                <Check TValue="bool" @bind-checked="_newRole.IsPublic">Public</Check>
+            </Field>
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary" Clicked="CloseCreateModal">Cancel</Button>
+            <Button Color="Color.Primary" Clicked="CreateRoleAsync">Save</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
\ No newline at end of file
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor.cs b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor.cs
index 74fb85de70..5e8d6e4a51 100644
--- a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor.cs
+++ b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/Pages/RoleManagement.razor.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Threading.Tasks;
+using Blazorise;
 using Blazorise.DataGrid;
 using Volo.Abp.Application.Dtos;
 using Volo.Abp.Identity;
@@ -15,6 +16,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Pages
         private int? _totalCount;
         private IReadOnlyList<IdentityRoleDto> _roles;
         private IdentityRoleCreateDto _newRole;
+        private Modal _createModal;
 
         public RoleManagement()
         {
@@ -45,12 +47,23 @@ namespace MyCompanyName.MyProjectName.Blazor.Pages
             await GetRolesAsync();
             StateHasChanged();
         }
-        
+
+        private async Task OpenCreateModalAsync()
+        {
+            _newRole = new IdentityRoleCreateDto();
+            _createModal.Show();
+        }
+
+        private void CloseCreateModal()
+        {
+            _createModal.Hide();
+        }
+
         private async Task CreateRoleAsync()
         {
             await RoleAppService.CreateAsync(_newRole);
-            _newRole = new IdentityRoleCreateDto();
             await GetRolesAsync();
+            _createModal.Hide();
         }
 
         private async Task DeleteRoleAsync(Guid id)