diff --git a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml
index b026dcc1df..0021c0ed3a 100644
--- a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml
+++ b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/Index.cshtml
@@ -17,26 +17,23 @@
 }
 <abp-card id="IdentityRolesWrapper">
     <abp-card-header>
-        <div class="row">
-            <div class="col-md-6">
+        <abp-row>
+            <abp-column size-md="_6">
                 <h2>@L["Roles"]</h2>
-            </div>
-            <div class="col-md-6 text-right">
-                <button type="button" name="CreateRole" class="btn btn-primary">
-                    <i class="fa fa-plus" aria-hidden="true"></i>
-                    @L["NewRole"]
-                </button>
-            </div>
-        </div>
+            </abp-column>
+            <abp-column size-md="_6" class="text-right">
+                <abp-button button-type="Primary" name="CreateRole" text="@L["NewRole"].Value" icon="plus"/>
+            </abp-column>
+        </abp-row>
     </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-table striped-rows="true" class="nowrap">
+                <thead>
+                    <tr>
+                        <th>@L["Actions"]</th>
+                        <th>@L["RoleName"]</th>
+                    </tr>
+                </thead>
+        </abp-table>
     </abp-card-body>
 </abp-card>
\ No newline at end of file
diff --git a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
index 44e2d55919..794a842409 100644
--- a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
+++ b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
@@ -22,31 +22,28 @@
 
 <abp-card id="IdentityUsersWrapper">
     <abp-card-header>
-        <div class="row">
-            <div class="col-md-6">
+        <abp-row>
+            <abp-column size-md="_6">
                 <h2>@L["Users"]</h2>
-            </div>
-            <div class="col-md-6 text-right">
+            </abp-column>
+            <abp-column  size-md="_6" class="text-right">
                 @if (await Authorization.IsGrantedAsync(IdentityPermissions.Users.Create))
                 {
-                    <button type="button" name="CreateUser" class="btn btn-primary">
-                        <i class="fa fa-plus" aria-hidden="true"></i>
-                        @L["NewUser"]
-                    </button>
+                    <abp-button button-type="Primary" name="CreateUser" text="@L["NewUser"].Value" icon="plus"/>
                 }
-            </div>
-        </div>
+            </abp-column>
+        </abp-row>
     </abp-card-header>
     <abp-card-body>
-        <table class="table table-striped nowrap">
-            <thead>
-                <tr>
-                    <th>@L["Actions"]</th>
-                    <th>@L["UserName"]</th>
-                    <th>@L["EmailAddress"]</th>
-                    <th>@L["PhoneNumber"]</th>
-                </tr>
-            </thead>
-        </table>
+        <abp-table striped-rows="true" class="nowrap">
+                <thead>
+                    <tr>
+                        <th>@L["Actions"]</th>
+                        <th>@L["UserName"]</th>
+                        <th>@L["EmailAddress"]</th>
+                        <th>@L["PhoneNumber"]</th>
+                    </tr>
+                </thead>
+        </abp-table>
     </abp-card-body>
 </abp-card>
\ No newline at end of file