diff --git a/Volo.Abp.sln b/Volo.Abp.sln
index 227f0879cd..1e82424903 100644
--- a/Volo.Abp.sln
+++ b/Volo.Abp.sln
@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 15
-VisualStudioVersion = 15.0.27130.0
+VisualStudioVersion = 15.0.27130.2010
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{5DF0E140-0513-4D0D-BE2E-3D4D85CD70E6}"
 EndProject
@@ -198,9 +198,9 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Volo.Abp.Timing", "src\Volo
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Volo.Abp.UI", "src\Volo.Abp.UI\Volo.Abp.UI.csproj", "{4AFAFAF8-06FB-48D4-AFA6-B32215584E96}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.UI.Navigation", "src\Volo.Abp.UI.Navigation\Volo.Abp.UI.Navigation.csproj", "{6F80DD0F-D91C-4A69-A20E-BB687036EFA8}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Volo.Abp.UI.Navigation", "src\Volo.Abp.UI.Navigation\Volo.Abp.UI.Navigation.csproj", "{6F80DD0F-D91C-4A69-A20E-BB687036EFA8}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Volo.Abp.UI.Navigation.Tests", "test\Volo.Abp.UI.Navigation.Tests\Volo.Abp.UI.Navigation.Tests.csproj", "{975056D6-0B2D-43BA-9BF8-0E937581F873}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Volo.Abp.UI.Navigation.Tests", "test\Volo.Abp.UI.Navigation.Tests\Volo.Abp.UI.Navigation.Tests.csproj", "{975056D6-0B2D-43BA-9BF8-0E937581F873}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
diff --git a/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/en.json b/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/en.json
index b7378abbba..33a86edf6b 100644
--- a/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/en.json
+++ b/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/en.json
@@ -16,6 +16,10 @@
     "Password": "Password",
     "UserDeletionConfirmationMessage": "User '{0}' will be deleted. Do you confirm that?",
     "TwoFactorVerification": "Two factor verification",
-    "AccountLockoutOnFailedLoginAttempts": "Locking account after failed login attempts"
+    "AccountLockoutOnFailedLoginAttempts": "Locking account after failed login attempts",
+    "NewRole": "New role",
+    "RoleName": "Role name",
+    "CreationTime": "Creation time"
+
   }
 }
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/tr.json b/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/tr.json
index 0f8830e7ef..a19ffbcad8 100644
--- a/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/tr.json
+++ b/src/Volo.Abp.Identity.Web/Localization/Resources/AbpIdentity/tr.json
@@ -16,6 +16,10 @@
     "Password": "Şifre",
     "UserDeletionConfirmationMessage": "{0} kullanıcısı silinecektir. Onaylıyor musunuz?",
     "TwoFactorVerification": "İki aşamalı doğrumala",
-    "AccountLockoutOnFailedLoginAttempts": "Başarısız giriş denemeleri sonrası hesabı kilitleme"
+    "AccountLockoutOnFailedLoginAttempts": "Başarısız giriş denemeleri sonrası hesabı kilitleme",
+    "NewRole": "Yeni rol",
+    "RoleName": "Rol adı",
+    "CreationTime": "Oluşturma zamanı"
+
   }
 }
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Navigation/AbpIdentityWebMainMenuContributor.cs b/src/Volo.Abp.Identity.Web/Navigation/AbpIdentityWebMainMenuContributor.cs
index 2f37e1d87b..145898f014 100644
--- a/src/Volo.Abp.Identity.Web/Navigation/AbpIdentityWebMainMenuContributor.cs
+++ b/src/Volo.Abp.Identity.Web/Navigation/AbpIdentityWebMainMenuContributor.cs
@@ -16,6 +16,8 @@ namespace Volo.Abp.Identity.Web.Navigation
                 .AddItem(
                     new ApplicationMenuItem("Identity", "Identity")
                         .AddItem(new ApplicationMenuItem("Users", "Users", url: "/Identity/Users"))
+                        .AddItem(new ApplicationMenuItem("Roles", "Roles", url: "/Identity/Roles"))
+
                 );
 
             return Task.CompletedTask;
diff --git a/src/Volo.Abp.Identity.Web/ObjectMappings/AbpIdentityWebAutoMapperProfile.cs b/src/Volo.Abp.Identity.Web/ObjectMappings/AbpIdentityWebAutoMapperProfile.cs
index fb96c8c07d..6d05954565 100644
--- a/src/Volo.Abp.Identity.Web/ObjectMappings/AbpIdentityWebAutoMapperProfile.cs
+++ b/src/Volo.Abp.Identity.Web/ObjectMappings/AbpIdentityWebAutoMapperProfile.cs
@@ -1,5 +1,7 @@
 using AutoMapper;
-using Volo.Abp.Identity.Web.Pages.Identity.Users;
+using Volo.Abp.Identity.Web.Pages.Identity.Roles;
+using CreateUserModalModel = Volo.Abp.Identity.Web.Pages.Identity.Users.CreateModalModel;
+using EditUserModalModel = Volo.Abp.Identity.Web.Pages.Identity.Users.EditModalModel;
 
 namespace Volo.Abp.Identity.Web.ObjectMappings
 {
@@ -7,23 +9,41 @@ namespace Volo.Abp.Identity.Web.ObjectMappings
     {
         public AbpIdentityWebAutoMapperProfile()
         {
-            //EditModal
+            CreateUserMappings();
+            CreateRoleMappings();
+        }
 
-            CreateMap<IdentityUserDto, EditModalModel.UserInfoViewModel>();
+        private void CreateUserMappings()
+        {
+            //List
+            CreateMap<IdentityUserDto, EditUserModalModel.UserInfoViewModel>();
 
-            CreateMap<EditModalModel.UserInfoViewModel, IdentityUserUpdateDto>()
+            //CreateModal
+            CreateMap<CreateUserModalModel.UserInfoViewModel, IdentityUserCreateDto>()
                 .ForMember(dest => dest.RoleNames, opt => opt.Ignore());
 
-            CreateMap<IdentityRoleDto, EditModalModel.AssignedRoleViewModel>()
+            CreateMap<IdentityRoleDto, CreateUserModalModel.AssignedRoleViewModel>()
                 .ForMember(dest => dest.IsAssigned, opt => opt.Ignore());
 
-            //CreateModal
-
-            CreateMap<CreateModalModel.UserInfoViewModel, IdentityUserCreateDto>()
+            //EditModal
+            CreateMap<EditUserModalModel.UserInfoViewModel, IdentityUserUpdateDto>()
                 .ForMember(dest => dest.RoleNames, opt => opt.Ignore());
 
-            CreateMap<IdentityRoleDto, CreateModalModel.AssignedRoleViewModel>()
+            CreateMap<IdentityRoleDto, EditUserModalModel.AssignedRoleViewModel>()
                 .ForMember(dest => dest.IsAssigned, opt => opt.Ignore());
         }
+
+        private void CreateRoleMappings()
+        {
+            //List
+            CreateMap<IdentityRoleDto, RoleInfoModel>();
+
+            //CreateModal
+            CreateMap<CreateRoleInfoModel, IdentityRoleCreateDto>();
+
+            //EditModal
+            CreateMap<RoleInfoModel, IdentityRoleUpdateDto>();
+        }
+
     }
 }
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml
new file mode 100644
index 0000000000..c76d414a34
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml
@@ -0,0 +1,32 @@
+@page
+@using Microsoft.Extensions.Localization
+@using Volo.Abp.Identity.Web.Localization.Resources.AbpIdentity
+@model Volo.Abp.Identity.Web.Pages.Identity.Roles.CreateModalModel
+@inject IStringLocalizer<IdentityResource> L
+@{
+    Layout = null;
+}
+
+<form method="post" asp-page="/Identity/Roles/CreateModal">
+
+    <abp-modal>
+
+        <abp-modal-header title="@L["NewRole"]"></abp-modal-header>
+
+        <abp-modal-body>
+
+            <div class="form-group">
+                <label asp-for="RoleModel.Name"></label>
+                <input asp-for="RoleModel.Name" class="form-control"/>
+                <span asp-validation-for="RoleModel.Name" class="text-danger"></span>
+            </div>
+
+            <div asp-validation-summary="All" class="text-danger"></div>
+
+        </abp-modal-body>
+
+        <abp-modal-footer></abp-modal-footer>
+
+    </abp-modal>
+
+</form>
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml.cs
new file mode 100644
index 0000000000..3c0e1dbae0
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml.cs
@@ -0,0 +1,30 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.Identity.Web.Pages.Identity.Roles
+{
+    public class CreateModalModel : AbpPageModel
+    {
+        [BindProperty]
+        public CreateRoleInfoModel RoleModel { get; set; }
+
+        private readonly IIdentityRoleAppService _identityRoleAppService;
+
+        public CreateModalModel(IIdentityRoleAppService identityRoleAppService)
+        {
+            _identityRoleAppService = identityRoleAppService;
+            RoleModel = new CreateRoleInfoModel();
+        }
+
+        public async Task<IActionResult> OnPostAsync()
+        {
+            ValidateModel();
+
+            var input = ObjectMapper.Map<CreateRoleInfoModel, IdentityRoleCreateDto>(RoleModel);
+            await _identityRoleAppService.CreateAsync(input);
+
+            return NoContent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateRoleInfoModel.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateRoleInfoModel.cs
new file mode 100644
index 0000000000..7d98d1bf10
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateRoleInfoModel.cs
@@ -0,0 +1,12 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Volo.Abp.Identity.Web.Pages.Identity.Roles
+{
+    public class CreateRoleInfoModel
+    {
+        [Required]
+        [StringLength(IdentityRoleConsts.MaxNameLength)]
+        [Display(Name = "RoleName")]
+        public string Name { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml
new file mode 100644
index 0000000000..70b6bd3c10
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml
@@ -0,0 +1,34 @@
+@page
+@using Microsoft.Extensions.Localization
+@using Volo.Abp.Identity.Web.Localization.Resources.AbpIdentity
+@model Volo.Abp.Identity.Web.Pages.Identity.Roles.EditModalModel
+@inject IStringLocalizer<IdentityResource> L
+@{
+    Layout = null;
+}
+
+<form method="post" asp-page="/Identity/Roles/EditModal" autocomplete="off">
+
+    <abp-modal>
+
+        <abp-modal-header title="@L["Edit"]"></abp-modal-header>
+
+        <abp-modal-body>
+
+            <input asp-for="RoleInfo.Id" />
+
+            <div class="form-group">
+                <label asp-for="RoleInfo.Name"></label>
+                <input asp-for="RoleInfo.Name" class="form-control"/>
+                <span asp-validation-for="RoleInfo.Name" class="text-danger"></span>
+            </div>
+
+            <div asp-validation-summary="All" class="text-danger"></div>
+
+        </abp-modal-body>
+
+        <abp-modal-footer></abp-modal-footer>
+
+    </abp-modal>
+
+</form>
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml.cs
new file mode 100644
index 0000000000..29d74108af
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml.cs
@@ -0,0 +1,37 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.Identity.Web.Pages.Identity.Roles
+{
+    public class EditModalModel : AbpPageModel
+    {
+        [BindProperty]
+        public RoleInfoModel RoleInfo { get; set; }
+
+        private readonly IIdentityRoleAppService _identityRoleAppService;
+
+        public EditModalModel(IIdentityRoleAppService identityRoleAppService)
+        {
+            _identityRoleAppService = identityRoleAppService;
+        }
+
+        public async Task OnGetAsync(Guid id)
+        {
+            RoleInfo = ObjectMapper.Map<IdentityRoleDto, RoleInfoModel>(
+                await _identityRoleAppService.GetAsync(id)
+            );
+        }
+
+        public async Task<IActionResult> OnPostAsync()
+        {
+            ValidateModel();
+
+            var input = ObjectMapper.Map<RoleInfoModel, IdentityRoleUpdateDto>(RoleInfo);
+            await _identityRoleAppService.UpdateAsync(RoleInfo.Id, input);
+
+            return NoContent();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml
new file mode 100644
index 0000000000..2709633bbe
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml
@@ -0,0 +1,42 @@
+@page
+@model Volo.Abp.Identity.Web.Pages.Identity.Roles.IndexModel
+@using Microsoft.AspNetCore.Mvc.Localization
+@using Volo.Abp.Identity.Web.Localization.Resources.AbpIdentity
+@inject IHtmlLocalizer<IdentityResource> L
+@section styles {
+    <link rel="stylesheet" type="text/css" href="~/modules/identity/views/roles/index.css" />
+}
+
+@section scripts {
+    <script type="text/javascript" src="~/modules/identity/helpers/jquery.js"></script>
+    <script type="text/javascript" src="~/modules/identity/helpers/datatables.extensions.js"></script>
+    <script type="text/javascript" src="~/modules/identity/helpers/ResourceLoader.js"></script>
+    <script type="text/javascript" src="~/modules/identity/helpers/ModalManager.js"></script>
+    <script type="text/javascript" src="~/modules/identity/views/roles/index.js"></script>
+}
+
+<abp-card id="IdentityRolesWrapper">
+    <abp-card-header>
+        <div class="row">
+            <div class="col-md-6">
+                <h2>@L["Roles"]</h2>
+            </div>
+            <div class="col-md-6 text-right">
+                <button type="button" class="btn btn-primary" v-on:click="openCreateModal">
+                    <i class="fa fa-plus" aria-hidden="true"></i>
+                    @L["NewRole"]
+                </button>
+            </div>
+        </div>
+    </abp-card-header>
+    <abp-card-body>
+        <table class="table table-striped nowrap">
+            <thead>
+                <tr>
+                    <th>@L["Actions"]</th>
+                    <th>@L["RoleName"]</th>
+                </tr>
+            </thead>
+        </table>
+    </abp-card-body>
+</abp-card>
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml.cs
new file mode 100644
index 0000000000..12b0477d3b
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml.cs
@@ -0,0 +1,11 @@
+using Volo.Abp.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.Identity.Web.Pages.Identity.Roles
+{
+    public class IndexModel : AbpPageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/RoleInfoModel.cs b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/RoleInfoModel.cs
new file mode 100644
index 0000000000..25d4b8d2d2
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/RoleInfoModel.cs
@@ -0,0 +1,17 @@
+using System;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Volo.Abp.Identity.Web.Pages.Identity.Roles
+{
+    public class RoleInfoModel
+    {
+        [HiddenInput]
+        public Guid Id { get; set; }
+
+        [Required]
+        [StringLength(IdentityRoleConsts.MaxNameLength)]
+        [Display(Name = "RoleName")]
+        public string Name { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
index ee386d41e1..9895097802 100644
--- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
@@ -34,7 +34,7 @@
             <thead>
                 <tr>
                     <th>@L["Actions"]</th>
-                    <th>@L["UserName"]</th>
+                    <th>@L["RoleName"]</th>
                     <th>@L["EmailAddress"]</th>
                     <th>@L["PhoneNumber"]</th>
                 </tr>
diff --git a/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj b/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj
index dbc8386f59..2431c114a9 100644
--- a/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj
+++ b/src/Volo.Abp.Identity.Web/Volo.Abp.Identity.Web.csproj
@@ -16,6 +16,21 @@
     <EmbeddedResource Include="Localization\Resources\**\*.json" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Remove="Pages\Identity\Roles\CreateModal.cshtml" />
+    <Content Remove="Pages\Identity\Roles\EditModal.cshtml" />
+    <Content Remove="Pages\Identity\Roles\Index.cshtml" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.css" />
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.es5.js" />
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.es5.min.js" />
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.js" />
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.less" />
+    <EmbeddedResource Remove="wwwroot\modules\identity\views\roles\index.min.css" />
+  </ItemGroup>
+
   <ItemGroup>
     <ProjectReference Include="..\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap\Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.csproj" />
     <ProjectReference Include="..\Volo.Abp.Identity.Application.Contracts\Volo.Abp.Identity.Application.Contracts.csproj" />
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.css b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.css
new file mode 100644
index 0000000000..41fbd4eaf0
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.css
@@ -0,0 +1,21 @@
+.dataTable {
+  width: 100% !important;
+  border-spacing: 0 !important;
+}
+.table td,
+.table th {
+  padding: 8px 10px;
+}
+.dataTable tbody tr td button {
+  cursor: pointer;
+}
+.dataTable tbody tr td div.dropdown ul.dropdown-menu li {
+  cursor: pointer;
+  padding: 5px;
+}
+.dataTable tbody tr td div.dropdown ul.dropdown-menu li a {
+  display: block;
+}
+.dataTable tbody tr td div.dropdown ul.dropdown-menu li:hover {
+  background: #f4f5f8;
+}
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.js
new file mode 100644
index 0000000000..bc6107abbc
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.js
@@ -0,0 +1,6 @@
+'use strict';
+
+$(function () {
+    $('#IdentityUsersTable').DataTable();
+});
+
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.min.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.min.js
new file mode 100644
index 0000000000..9a2c19267e
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.es5.min.js
@@ -0,0 +1 @@
+"use strict";$(function(){$("#IdentityUsersTable").DataTable()});
\ No newline at end of file
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.js b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.js
new file mode 100644
index 0000000000..26d9f0f10f
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.js
@@ -0,0 +1,87 @@
+(function () {
+
+    var l = abp.localization.getResource('AbpIdentity');
+    var _identityRoleAppService = volo.abp.identity.identityRole;
+
+    var _editModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Roles/EditModal'
+    });
+
+    var _createModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Roles/CreateModal'
+    });
+
+    var app = new Vue({
+        el: '#IdentityRolesWrapper',
+        methods: {
+            openCreateModal: function () {
+                _createModal.open();
+            }
+        }
+    });
+
+    $(function () {
+
+        var _$wrapper = $('#IdentityRolesWrapper');
+        var _$table = _$wrapper.find('table');
+
+        var _dataTable = _$table.DataTable({
+            order: [[1, "asc"]],
+            ajax: abp.libs.datatables.createAjax(_identityRoleAppService.getList),
+            columnDefs: [
+                {
+                    targets: 0,
+                    data: null,
+                    orderable: false,
+                    autoWidth: false,
+                    defaultContent: '',
+                    rowAction: {
+                        text: '<i class="fa fa-cog"></i> ' + l('Actions') + ' <span class="caret"></span>',
+                        items:
+                        [
+                            {
+                                text: l('Edit'),
+                                visible: function () {
+                                    return true;
+                                },
+                                action: function (data) {
+                                    _editModal.open({
+                                        id: data.record.id
+                                    });
+                                }
+                            },
+                            {
+                                text: l('Delete'),
+                                visible: function () {
+                                    return true;
+                                },
+                                action: function (data) {
+                                    if (confirm(l('UserDeletionConfirmationMessage', data.record.name))) {
+                                        _identityRoleAppService
+                                            .delete(data.record.id)
+                                            .then(function () {
+                                                _dataTable.ajax.reload();
+                                            });
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    targets: 1,
+                    data: "name"
+                }
+            ]
+        });
+
+        _createModal.onResult(function () {
+            _dataTable.ajax.reload();
+        });
+
+        _editModal.onResult(function () {
+            _dataTable.ajax.reload();
+        });
+    });
+
+})();
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.less b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.less
new file mode 100644
index 0000000000..7534888421
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.less
@@ -0,0 +1,38 @@
+.dataTable {
+    width: 100% !important;
+    border-spacing: 0 !important;
+}
+
+.table td, .table th {
+    padding: 8px 10px;
+}
+
+.dataTable {
+    tbody {
+        tr {
+            td {
+
+                button {
+                    cursor: pointer;
+                }
+
+                div.dropdown {
+                    ul.dropdown-menu {
+                        li {
+                            cursor: pointer;
+                            padding: 5px;
+
+                            a {
+                                display: block;
+                            }
+                        }
+
+                        li:hover {
+                            background: #f4f5f8;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.min.css b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.min.css
new file mode 100644
index 0000000000..e70b9e330b
--- /dev/null
+++ b/src/Volo.Abp.Identity.Web/wwwroot/modules/identity/views/roles/index.min.css
@@ -0,0 +1 @@
+.dataTable{width:100% !important;border-spacing:0 !important;}.table td,.table th{padding:8px 10px;}.dataTable tbody tr td button{cursor:pointer;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li{cursor:pointer;padding:5px;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li a{display:block;}.dataTable tbody tr td div.dropdown ul.dropdown-menu li:hover{background:#f4f5f8;}
\ No newline at end of file