diff --git a/ui/components/manage-groups/table/column-groups.tsx b/ui/components/manage-groups/table/column-groups.tsx
index d89a6eeac8..c1bbe76245 100644
--- a/ui/components/manage-groups/table/column-groups.tsx
+++ b/ui/components/manage-groups/table/column-groups.tsx
@@ -22,11 +22,7 @@ export const ColumnGroups: ColumnDef<ProviderGroup>[] = [
       const {
         attributes: { name },
       } = getProviderData(row);
-      return (
-        <p className="text-small font-medium">
-          {name.charAt(0).toUpperCase() + name.slice(1).toLowerCase()}
-        </p>
-      );
+      return <p className="text-small font-medium">{name}</p>;
     },
   },
 
diff --git a/ui/components/roles/table/column-roles.tsx b/ui/components/roles/table/column-roles.tsx
index e3e162bf5e..859e02af48 100644
--- a/ui/components/roles/table/column-roles.tsx
+++ b/ui/components/roles/table/column-roles.tsx
@@ -26,11 +26,7 @@ export const ColumnsRoles: ColumnDef<RolesProps["data"][number]>[] = [
     ),
     cell: ({ row }) => {
       const data = getRoleAttributes(row);
-      return (
-        <p className="font-semibold">
-          {data.name[0].toUpperCase() + data.name.slice(1).toLowerCase()}
-        </p>
-      );
+      return <p className="font-semibold">{data.name}</p>;
     },
   },
   {