diff --git a/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleNameComponent.razor b/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleNameComponent.razor
index 86d698e2b8..88349e2a16 100644
--- a/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleNameComponent.razor
+++ b/modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/RoleNameComponent.razor
@@ -8,9 +8,9 @@
 @(Data.As<IdentityRoleDto>().Name)
 @if (Data.As<IdentityRoleDto>().IsDefault)
 {
-    <Badge Color="Color.Primary" Margin="Margin.Is1.FromLeft">@L["DisplayName:IsDefault"]</Badge>
+    <Badge Color="Color.Success" Margin="Margin.Is1.FromLeft">@L["DisplayName:IsDefault"]</Badge>
 }
 @if (Data.As<IdentityRoleDto>().IsPublic)
 {
-    <Badge Color="Color.Light" Margin="Margin.Is1.FromLeft">@L["DisplayName:IsPublic"]</Badge>
+    <Badge Color="Color.Info" Margin="Margin.Is1.FromLeft">@L["DisplayName:IsPublic"]</Badge>
 }
\ No newline at end of file
diff --git a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/index.js b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/index.js
index a1fc400538..c85113b916 100644
--- a/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/index.js
+++ b/modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/index.js
@@ -88,13 +88,13 @@
                             var name = '<span>' + $.fn.dataTable.render.text().display(data) + '</span>'; //prevent against possible XSS
                             if (row.isDefault) {
                                 name +=
-                                    '<span class="badge rounded-pill bg-success ml-1">' +
+                                    '<span class="badge rounded-pill bg-success ms-1">' +
                                     l('DisplayName:IsDefault') +
                                     '</span>';
                             }
                             if (row.isPublic) {
                                 name +=
-                                    '<span class="badge rounded-pill bg-info ml-1">' +
+                                    '<span class="badge rounded-pill bg-info ms-1">' +
                                     l('DisplayName:IsPublic') +
                                     '</span>';
                             }