diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
index 0285de322b..1ea1504ff8 100644
--- a/app/helpers/users_helper.rb
+++ b/app/helpers/users_helper.rb
@@ -72,4 +72,16 @@ def options_for_organisation_select(selected: nil)
       end
     end
   end
+
+  def items_for_permission_checkboxes(application:, user: nil)
+    permissions_for(application).map do |permission|
+      {
+        id: "user_application_#{application.id}_supported_permission_#{permission.id}",
+        name: "user[supported_permission_ids][]",
+        label: formatted_permission_name(application.name, permission.name),
+        value: permission.id,
+        checked: user&.has_permission?(permission),
+      }
+    end
+  end
 end
diff --git a/app/views/batch_invitation_permissions/new.html.erb b/app/views/batch_invitation_permissions/new.html.erb
index f0f89049e7..888f322387 100644
--- a/app/views/batch_invitation_permissions/new.html.erb
+++ b/app/views/batch_invitation_permissions/new.html.erb
@@ -19,30 +19,22 @@
 %>
 
 <%= form_for @batch_invitation, url: :batch_invitation_permissions, method: :post do |f| %>
-<div class="govuk-accordion" data-module="govuk-accordion">
-  <% policy_scope(:user_permission_manageable_application).reject(&:retired?).each_with_index do |application, idx| %>
-  <div class="govuk-accordion__section">
-    <div class="govuk-accordion__section-header">
-      <h2 class="govuk-accordion__section-heading">
-        <span class="govuk-accordion__section-button" id="accordion-heading-<%= idx %>">
-          <%= application.name %>
-        </span>
-      </h2>
-    </div>
-    <div class="govuk-accordion__section-content" aria-labelledby="accordion-heading-<%= idx %>">
-      <%= render "govuk_publishing_components/components/checkboxes", {
-          name: "permissions_for_#{application.id}",
-          heading: "Permissions for #{application.name}",
-          items: permissions_for(application).map do |permission|
-            { label: formatted_permission_name(application.name, permission.name),
-              value: permission.id,
-              id: "user_application_#{application.id}_supported_permission_#{permission.id}",
-              name: "user[supported_permission_ids][]" }
-          end
-          } %>
-    </div>
-  </div>
-  <% end %>
-</div>
-<%= render "govuk_publishing_components/components/button", { text: "Create users and send emails" } %>
+  <%= render "govuk_publishing_components/components/accordion", {
+    items: policy_scope(:user_permission_manageable_application).reject(&:retired?).map do |application|
+      {
+        heading: {
+          text: application.name
+        },
+        content: {
+          html: render("govuk_publishing_components/components/checkboxes", {
+            name: "permissions_for_#{application.id}",
+            heading: "Permissions for #{application.name}",
+            items: items_for_permission_checkboxes(application:),
+          })
+        },
+      }
+    end
+  } %>
+
+  <%= render "govuk_publishing_components/components/button", { text: "Create users and send emails" } %>
 <% end %>
diff --git a/app/views/devise/invitations/new.html.erb b/app/views/devise/invitations/new.html.erb
index b513fd4c84..b6950a693a 100644
--- a/app/views/devise/invitations/new.html.erb
+++ b/app/views/devise/invitations/new.html.erb
@@ -81,32 +81,22 @@
         } %>
       <% end %>
 
-      <div class="govuk-accordion" data-module="govuk-accordion">
-        <% policy_scope(:user_permission_manageable_application).reject(&:retired?).each_with_index do |application, idx| %>
-        <div class="govuk-accordion__section">
-          <div class="govuk-accordion__section-header">
-            <h2 class="govuk-accordion__section-heading">
-              <span class="govuk-accordion__section-button" id="accordion-heading-<%= idx %>">
-                <%= application.name %>
-              </span>
-            </h2>
-          </div>
-          <div class="govuk-accordion__section-content" aria-labelledby="accordion-heading-<%= idx %>">
-            <%= render "govuk_publishing_components/components/checkboxes", {
+      <%= render "govuk_publishing_components/components/accordion", {
+        items: policy_scope(:user_permission_manageable_application).reject(&:retired?).map do |application|
+          {
+            heading: {
+              text: application.name
+            },
+            content: {
+              html: render("govuk_publishing_components/components/checkboxes", {
                 name: "permissions_for_#{application.id}",
                 heading: "Permissions for #{application.name}",
-                items: permissions_for(application).map do |permission|
-                  { label: formatted_permission_name(application.name, permission.name),
-                    value: permission.id,
-                    id: "user_application_#{application.id}_supported_permission_#{permission.id}",
-                    name: "user[supported_permission_ids][]",
-                    checked: f.object.has_permission?(permission) }
-                end
-                } %>
-          </div>
-        </div>
-        <% end %>
-      </div>
+                items: items_for_permission_checkboxes(application:, user: f.object),
+              })
+            },
+          }
+        end
+      } %>
 
       <div class="govuk-button-group">
         <%= render "govuk_publishing_components/components/button", {