diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpCardTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpCardTagHelper.cs
new file mode 100644
index 0000000000..1ca11effc6
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/AbpCardTagHelper.cs
@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers
+{
+    public class AbpCardTagHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            //TODO: Remove abp-modal HTML element which is unnecessary!
+            output.TagName = "div";
+            output.Attributes.Add("class", "card"); //TODO: Append class if any exists
+        }
+    }
+
+    public class AbpCardHeaderTagHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            //TODO: Remove abp-modal HTML element which is unnecessary!
+            output.TagName = "div";
+            output.Attributes.Add("class", "card-header"); //TODO: Append class if any exists
+        }
+    }
+
+    public class AbpCardBodyTagHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            //TODO: Remove abp-modal HTML element which is unnecessary!
+            output.TagName = "div";
+            output.Attributes.Add("class", "card-body"); //TODO: Append class if any exists
+        }
+    }
+}
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 e8b587b78a..3a8300ef79 100644
--- a/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
+++ b/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml
@@ -15,22 +15,21 @@
     <script type="text/javascript" src="~/modules/identity/views/users/index.js"></script>
 }
 
-<div class="card" id="IdentityUsersWrapper">
-    <div class="card-header">
+<abp-card id="IdentityUsersWrapper">
+    <abp-card-header>
         <div class="row">
             <div class="col-md-6">
                 <h2>@L["Users"]</h2>
             </div>
             <div class="col-md-6 text-right">
-                <!-- Button trigger modal -->
-                <button type="button" class="btn btn-primary create-user-button" data-toggle="modal">
+                <button type="button" class="btn btn-primary create-user-button">
                     <i class="fa fa-plus" aria-hidden="true"></i>
                     @L["CreateUser"]
                 </button>
             </div>
         </div>
-    </div>
-    <div class="card-body">
+    </abp-card-header>
+    <abp-card-body>
         <table class="table table-striped nowrap">
             <thead>
                 <tr>
@@ -41,5 +40,5 @@
                 </tr>
             </thead>
         </table>
-    </div>
-</div>
\ No newline at end of file
+    </abp-card-body>
+</abp-card>
\ No newline at end of file