diff --git a/app/utils/roles.js b/app/utils/roles.js
index 0793bc9e9..e434c2f9c 100644
--- a/app/utils/roles.js
+++ b/app/utils/roles.js
@@ -5,7 +5,7 @@ const roles = {
     extId: 200,
     name: 'admin',
     description: 'Administrator',
-    explanation: 'They can view transactions, refund payments and manage settings',
+    explanation: 'They can view transactions, refund payments, and manage settings',
     agentInitiatedMotoServicesOnly: false
   },
   'view-and-refund': {
@@ -58,7 +58,7 @@ module.exports = {
       .map(role => {
         // for agent-initiated moto services, add 'take telephone payments' to the explanation content for the admin role
         return (role.name === 'admin' && serviceHasAgentInitiatedMotoEnabled)
-          ? { ...role, explanation: 'They can view transactions, refund payments, take telephone payments and manage settings' }
+          ? { ...role, explanation: 'They can view transactions, refund payments, take telephone payments, and manage settings' }
           : role
       })
   }
diff --git a/app/views/simplified-account/settings/team-members/change-permission.njk b/app/views/simplified-account/settings/team-members/change-permission.njk
index 81fd33a73..86cba592f 100644
--- a/app/views/simplified-account/settings/team-members/change-permission.njk
+++ b/app/views/simplified-account/settings/team-members/change-permission.njk
@@ -19,8 +19,9 @@
       {% set roleItem = {
         value: role.name,
         id: "role-" + role.name + "-input",
-        html: "<label class=\"govuk-!-font-weight-bold\">" + role.description + "</label>",
-        hint: { text: role.explanation, classes: "hint-and-body-width" },
+        text: role.description,
+        label: { classes: "govuk-!-font-weight-bold" },
+        hint: { html: "<div class='hint-and-body-width'>" + role.explanation + "</div>" },
         checked: userCurrentRoleName === role.name
       } %}
       {% set roleItems = (roleItems.push(roleItem), roleItems) %}
diff --git a/app/views/simplified-account/settings/team-members/invite.njk b/app/views/simplified-account/settings/team-members/invite.njk
index 4a8e4e1a6..5ee37bb4a 100644
--- a/app/views/simplified-account/settings/team-members/invite.njk
+++ b/app/views/simplified-account/settings/team-members/invite.njk
@@ -41,8 +41,9 @@
         {% set roleItem = {
           value: role.name,
           id: "role-" + role.name + "-input",
-          html: "<label class=\"govuk-!-font-weight-bold\">" + role.description + "</label>",
-          hint: { text: role.explanation, classes: "hint-and-body-width" },
+          text: role.description,
+          label: { classes: "govuk-!-font-weight-bold" },
+          hint: { html: "<div class='hint-and-body-width'>" + role.explanation + "</div>" },
           checked: role.name === checkedRole
         } %}
         {% set roleItems = (roleItems.push(roleItem), roleItems) %}