diff --git a/cosmetics-web/app/views/notifications/_component_details.html.erb b/cosmetics-web/app/views/notifications/_component_details.html.erb
index 0e44fc4949..25955a677d 100644
--- a/cosmetics-web/app/views/notifications/_component_details.html.erb
+++ b/cosmetics-web/app/views/notifications/_component_details.html.erb
@@ -1,129 +1,136 @@
-<%= govukSummaryList(
-  classes: "opss-summary-list-mixed",
-  rows: [
-    if component.cmrs.any?
-      {
-        key: { text: "Contains CMR substances" },
-        value: { text: "Yes" },
-      }
-    end,
-    if component.cmrs.any?
-      {
-        key: { text: "CMR substances" },
-        value: { html: render("application/none_or_bullet_list", entities_list: component.cmrs.map(&:display_name)) },
-      }
-    end,
-    {
-      key: { text: "Nanomaterials" },
-      value: { html: render("application/none_or_bullet_list",
-                            entities_list: nano_materials_details(component.nano_materials)) },
-    },
-    if component.nano_materials.non_standard.any? && can_view_nanomaterial_review_period_end_date?
-      {
-        key: { text: "Nanomaterials review period end date" },
-        value: { text: render("application/none_or_bullet_list",
+<%= govuk_summary_list do |summary_list|
+  if component.cmrs.any?
+    summary_list.with_row do |row|
+      row.with_key { 'Contains CMR substances' }
+      row.with_value { "Yes" }
+    end;
+  end
+
+  if component.cmrs.any?
+    summary_list.with_row do |row|
+      row.with_key { "CMR substances" }
+      row.with_value { render("application/none_or_bullet_list", entities_list: component.cmrs.map(&:display_name)) }
+    end;
+  end
+
+  summary_list.with_row do |row|
+    row.with_key { "Nanomaterials" }
+    row.with_value { render("application/none_or_bullet_list", entities_list: nano_materials_details(component.nano_materials)) }
+  end;
+
+  if component.nano_materials.non_standard.any? && can_view_nanomaterial_review_period_end_date?
+    summary_list.with_row do |row|
+      row.with_key { "Nanomaterials review period end date" }
+      row.with_value { render("application/none_or_bullet_list",
                               entities_list: nano_materials_with_review_period_end_date(component.nano_materials.non_standard),
                               list_classes: "",
-                              list_item_classes: "") },
-      }
-    end,
-    if component.nano_materials.present?
-      {
-        key: { text: "Application instruction" },
-        value: { text: get_exposure_routes_names(component.exposure_routes) },
-      }
-    end,
-    if component.nano_materials.present?
-      {
-        key: { text: "Exposure condition" },
-        value: { text: get_exposure_condition_name(component.exposure_condition) },
-      }
-    end,
-    {
-      key: { text: "Category of product" },
-      value: { text: get_category_name(component.root_category) },
-    },
-    {
-      key: { text: "Category of #{get_category_name(component.root_category)&.downcase&.singularize}" },
-      value: { text: get_category_name(component.sub_category) },
-    },
-    {
-      key: { text: "Category of #{get_category_name(component.sub_category)&.downcase&.singularize}" },
-      value: { text: get_category_name(component.sub_sub_category) },
-    },
-    if can_view_product_ingredients?
-      {
-        key: { text: "Formulation given as" },
-        value: { text: get_notification_type_name(component.notification_type) },
-      }
-    end,
-    if can_view_product_ingredients? && component.predefined?
-      {
-        key: { text: "Frame formulation" },
-        value: { text: get_frame_formulation_name(component.frame_formulation) },
-      }
-    end,
-    if can_view_product_ingredients? && !component.predefined?
-      {
-        key: { text: "Formulation" },
-        value: { html: render("notifications/component_details_formulation_ingredients",
-                 component: component) },
-        actions: {
-          items: if component.formulation_file.attached? && component.notification.editable?
-                   [
-                     {
-                       href: edit_responsible_person_notification_component_formulation_path(
-                               component.notification.responsible_person,
-                               component.notification,
-                               component
-                             ),
-                       text: "Change",
-                       visuallyHiddenText: "formulation file"
-                     }
-                   ]
-                 else
-                   []
-                 end
-        }
-      }
-    end,
-    {
-      key: { text: "Physical form" },
-      value: { text: get_physical_form_name(component.physical_form) },
-    },
-    if can_view_product_ingredients?
-      {
-        key: { text: "Special applicator" },
-        value: { text: component.special_applicator.present? ? "Yes" : "No" },
-      }
-    end,
-    if can_view_product_ingredients? && component.special_applicator.present?
-      {
-        key: { text: "Applicator type" },
-        value: { text: component_special_applicator_name(component) },
-      }
-    end,
-    if can_view_product_ingredients? && component.acute_poisoning_info.present?
-      {
-        key: { text: "Acute poisoning information" },
-        value: { text: component.acute_poisoning_info },
-      }
-    end,
-    if can_view_product_ingredients? && component.predefined?
-      {
-        key: { text: "Contains ingredients NPIS needs to know about" },
-        value: { text: component.poisonous_ingredients_answer },
-      }
-    end,
-    if can_view_product_ingredients? && component.predefined? && component.contains_poisonous_ingredients
-      {
-        key: { text: "Ingredients NPIS needs to know about" },
-        value: { html: render("notifications/component_details_poisonous_ingredients",
-                 component: component) },
-      }
-    end,
-  ].compact
-) %>
+                              list_item_classes: "") }
+    end;
+  end
+
+  if component.nano_materials.present?
+    summary_list.with_row do |row|
+      row.with_key { "Application instruction" }
+      row.with_value { get_exposure_routes_names(component.exposure_routes) }
+    end;
+  end
+
+  if component.nano_materials.present?
+    summary_list.with_row do |row|
+      row.with_key { "Exposure condition" }
+      row.with_value { get_exposure_condition_name(component.exposure_condition) }
+    end;
+  end
+
+  summary_list.with_row do |row|
+    row.with_key { "Category of product" }
+    row.with_value { get_category_name(component.root_category) }
+  end;
+
+  summary_list.with_row do |row|
+    row.with_key { "Category of #{get_category_name(component.root_category)&.downcase&.singularize}" }
+    row.with_value { get_category_name(component.sub_category) }
+  end;
+
+  summary_list.with_row do |row|
+    row.with_key { "Category of #{get_category_name(component.root_category)&.downcase&.singularize}" }
+    row.with_value { get_category_name(component.sub_category) }
+  end;
+
+  summary_list.with_row do |row|
+    row.with_key { "Category of #{get_category_name(component.sub_category)&.downcase&.singularize}" }
+    row.with_value { get_category_name(component.sub_sub_category) }
+  end;
+
+  if can_view_product_ingredients?
+    summary_list.with_row do |row|
+      row.with_key { "Formulation given as" }
+      row.with_value { get_notification_type_name(component.notification_type) }
+    end;
+  end
+
+  if can_view_product_ingredients? && component.predefined?
+    summary_list.with_row do |row|
+      row.with_key { "Frame formulation" }
+      row.with_value { get_frame_formulation_name(component.frame_formulation) }
+    end;
+  end
+
+  if can_view_product_ingredients? && !component.predefined?
+    summary_list.with_row do |row|
+      row.with_key { "Formulation" }
+      row.with_value { render("notifications/component_details_formulation_ingredients", component: component) }
+      if component.formulation_file.attached? && component.notification.editable?
+        row.with_action(text: "Change", href: edit_responsible_person_notification_component_formulation_path(
+          component.notification.responsible_person,
+          component.notification,
+          component
+        ), visually_hidden_text: "formulation file")
+      end
+    end;
+  end
+
+  summary_list.with_row do |row|
+    row.with_key { "Physical form" }
+    row.with_value { get_physical_form_name(component.physical_form) }
+  end;
+
+  if can_view_product_ingredients?
+    summary_list.with_row do |row|
+      row.with_key { "Special applicator" }
+      row.with_value { component.special_applicator.present? ? "Yes" : "No" }
+    end;
+  end
+
+  if can_view_product_ingredients? && component.special_applicator.present?
+    summary_list.with_row do |row|
+      row.with_key { "Applicator type" }
+      row.with_value { component_special_applicator_name(component) }
+    end;
+  end
+
+  if can_view_product_ingredients? && component.acute_poisoning_info.present?
+    summary_list.with_row do |row|
+      row.with_key { "Acute poisoning information" }
+      row.with_value { component.acute_poisoning_info }
+    end;
+  end
+
+  if can_view_product_ingredients? && component.predefined?
+    summary_list.with_row do |row|
+      row.with_key { "Contains ingredients NPIS needs to know about" }
+      row.with_value { component.poisonous_ingredients_answer }
+    end;
+  end
+
+  if can_view_product_ingredients? && component.predefined? && component.contains_poisonous_ingredients
+    summary_list.with_row do |row|
+      row.with_key { "Ingredients NPIS needs to know about" }
+      row.with_value { render("notifications/component_details_poisonous_ingredients",
+                              component: component) }
+    end;
+  end
+  end %>
 
 <% if can_view_product_ingredients? && component.trigger_questions %>
   <%= render "notifications/ph", component: component %>
diff --git a/cosmetics-web/app/views/notifications/_contact_person_details.html.erb b/cosmetics-web/app/views/notifications/_contact_person_details.html.erb
index ec5cebfee6..2b3412c1d1 100644
--- a/cosmetics-web/app/views/notifications/_contact_person_details.html.erb
+++ b/cosmetics-web/app/views/notifications/_contact_person_details.html.erb
@@ -1,47 +1,20 @@
-<%= govukSummaryList(
-  classes: "govuk-!-margin-bottom-8",
-  rows: [
-    {
-      key: { text: "Name" },
-      value: { text: contact_person.name },
-      actions: {
-        items: [
-          {
-            href: edit_responsible_person_contact_person_path(contact_person.responsible_person, contact_person, field: "name"),
-            text: "Edit",
-            classes: "govuk-link--no-visited-state",
-            visuallyHiddenText: "the name"
-          }
-        ]
-      }
-    },
-    {
-      key: { text: "Email" },
-      value: { text: contact_person.email_address },
-      actions: {
-        items: [
-          {
-            href: edit_responsible_person_contact_person_path(contact_person.responsible_person, contact_person, field: "email_address"),
-            text: "Edit",
-            classes: "govuk-link--no-visited-state",
-            visuallyHiddenText: "email address"
-          }
-        ]
-      }
-    },
-    {
-      key: { text: "Telephone" },
-      value: { text: contact_person.phone_number },
-      actions: {
-        items: [
-          {
-            href: edit_responsible_person_contact_person_path(contact_person.responsible_person,  contact_person, field: "phone_number"),
-            text: "Edit",
-            classes: "govuk-link--no-visited-state",
-            visuallyHiddenText: "the telephone number"
-          }
-        ]
-      }
-    },
-  ]
-) %>
+<%= govuk_summary_list do |summary_list|
+  summary_list.with_row do |row|
+    row.with_key { "Name" }
+    row.with_value { contact_person.name }
+    row.with_action(text: "Edit", href: edit_responsible_person_contact_person_path(contact_person.responsible_person, contact_person, field: "name"), visually_hidden_text: "the name")
+  end;
+
+  summary_list.with_row do |row|
+    row.with_key { "Email" }
+    row.with_value { contact_person.email_address }
+    row.with_action(text: "Edit", href: edit_responsible_person_contact_person_path(contact_person.responsible_person, contact_person, field: "email_address"), visually_hidden_text: "email address")
+  end;
+
+  summary_list.with_row do |row|
+    row.with_key { "Telephone" }
+    row.with_value { contact_person.phone_number }
+    row.with_action(text: "Edit", href: edit_responsible_person_contact_person_path(contact_person.responsible_person,  contact_person, field: "phone_number"), visually_hidden_text: "the telephone number")
+  end;
+
+end %>
diff --git a/cosmetics-web/app/views/notifications/_ph.html.erb b/cosmetics-web/app/views/notifications/_ph.html.erb
index 8c7f414f8f..df4fef434d 100644
--- a/cosmetics-web/app/views/notifications/_ph.html.erb
+++ b/cosmetics-web/app/views/notifications/_ph.html.erb
@@ -1,21 +1,20 @@
-<%= govukSummaryList(
-  classes: "opss-summary-list-mixed",
-  rows: [
+<%= govuk_summary_list do |summary_list|
+
     if component.ph_range_not_required?
-      {
-        key: { text: "pH" },
-        value: { text: t(component.ph, scope: [:component_ph, :check_your_answers]) },
-      }
+      summary_list.with_row do |row|
+        row.with_key { "pH" }
+        row.with_value { t(component.ph, scope: [:component_ph, :check_your_answers]) }
+      end;
     elsif component.minimum_ph == component.maximum_ph
-      {
-        key: { text: "Exact pH" },
-        value: { text: component.minimum_ph },
-      }
+      summary_list.with_row do |row|
+        row.with_key { "Exact pH" }
+        row.with_value { component.minimum_ph }
+      end;
     else
-      {
-        key: { text: "pH range" },
-        value: { text: "#{component.minimum_ph} to #{component.maximum_ph}" },
-      }
+      summary_list.with_row do |row|
+        row.with_key { "pH range" }
+        row.with_value { "#{component.minimum_ph} to #{component.maximum_ph}" }
+      end;
     end
-  ]
-) %>
+
+end %>
diff --git a/cosmetics-web/app/views/notifications/_product_details.html.erb b/cosmetics-web/app/views/notifications/_product_details.html.erb
index 067fefefc5..c8e3e2a0c1 100644
--- a/cosmetics-web/app/views/notifications/_product_details.html.erb
+++ b/cosmetics-web/app/views/notifications/_product_details.html.erb
@@ -1,56 +1,60 @@
 <section id="product-table" class="govuk-!-margin-top-7">
   <h2 class="govuk-visually-hidden">The product</h2>
-  <%= govukSummaryList(
-    classes: "opss-summary-list-mixed",
-    rows: [
-      {
-        key: { text: "Label" },
-        value: { html: render("notifications/product_details_label_images", notification:) },
-      },
+  <%= govuk_summary_list do |summary_list|
+    summary_list.with_row do |row|
+      row.with_key { "Label" }
+      row.with_value { render("notifications/product_details_label_images", notification:) }
+    end;
       if notification.industry_reference.present?
-        {
-          key: { text: "Internal reference number" },
-          value: { text: notification.industry_reference },
-        }
-      end,
+        summary_list.with_row do |row|
+          row.with_key { "Internal reference number" }
+          row.with_value { notification.industry_reference }
+        end;
+      end
       unless notification.under_three_years.nil?
-        {
-          key: { text: "For children under 3" },
-          value: { text: notification.under_three_years ? "Yes" : "No" },
-        }
-      end,
-      {
-        key: { text: "Number of components" },
-        value: { text: notification.components.length },
-      },
-      {
-        key: { text: "Shades" },
-        value: { html: display_shades(notification) },
-      },
+        summary_list.with_row do |row|
+          row.with_key { "For children under 3" }
+          row.with_value { notification.under_three_years ? "Yes" : "No" }
+        end;
+      end
+
+      summary_list.with_row do |row|
+        row.with_key { "Number of components" }
+        row.with_value { notification.components.length }
+      end;
+
+      summary_list.with_row do |row|
+        row.with_key { "Shades" }
+        row.with_value { display_shades(notification) }
+      end;
+
       if notification.cpnp_notification_date.present?
-        {
-          key: { text: "EU notification date" },
-          value: { text: display_full_month_date(notification.cpnp_notification_date) },
-        }
-      end,
-      {
-        key: { text: "Are the components mixed?" },
-        value: { text: notification.components_are_mixed ? "Yes" : "No" },
-      },
+        summary_list.with_row do |row|
+          row.with_key { "EU notification date" }
+          row.with_value { display_full_month_date(notification.cpnp_notification_date) }
+        end;
+      end
+
+      summary_list.with_row do |row|
+        row.with_key { "Are the components mixed?" }
+        row.with_value { notification.components_are_mixed ? "Yes" : "No" }
+      end;
+
       if can_view_product_ingredients? && notification.ph_min_value.present?
-        {
-          key: { text: "Minimum pH value" },
-          value: { text: notification.ph_min_value },
-        }
-      end,
+        summary_list.with_row do |row|
+          row.with_key { "Minimum pH value" }
+          row.with_value { notification.ph_min_value }
+        end;
+      end
+
       if can_view_product_ingredients? && notification.ph_max_value.present?
-        {
-          key: { text: "Maximum pH value" },
-          value: { text: notification.ph_max_value },
-        }
-      end,
-    ].compact
-  ) %>
+        summary_list.with_row do |row|
+          row.with_key { "Maximum pH value" }
+          row.with_value { notification.ph_max_value }
+        end;
+      end
+
+  end %>
 </section>
 
 <% notification.components.order(:id).each_with_index do |component, i| %>
@@ -64,15 +68,12 @@
   %>
   <section id="<%= component.name&.parameterize.presence || item_count.parameterize %>" class="govuk-!-margin-top-9 opss-grouping">
     <h3 class="govuk-heading-m opss-grouping__heading-m"><%= component_title %></h3>
-      <%= govukSummaryList(
-        classes: "opss-summary-list-mixed",
-        rows: [
-          {
-            key: { text: "Shades" },
-            value: { html: render("none_or_bullet_list", entities_list: component.shades, list_item_classes: "", list_classes: "") },
-          },
-        ].compact
-      ) %>
+    <%= govuk_summary_list do |summary_list|
+          summary_list.with_row do |row|
+            row.with_key { "Shades" }
+            row.with_value { render("none_or_bullet_list", entities_list: component.shades, list_item_classes: "", list_classes: "") }
+          end;
+    end %>
       <%= render "notifications/component_details", component: component %>
   </section>
 <% end %>
diff --git a/cosmetics-web/app/views/notifications/_responsible_person_details.html.erb b/cosmetics-web/app/views/notifications/_responsible_person_details.html.erb
index 7063c5d83c..97e27fe616 100644
--- a/cosmetics-web/app/views/notifications/_responsible_person_details.html.erb
+++ b/cosmetics-web/app/views/notifications/_responsible_person_details.html.erb
@@ -1,27 +1,19 @@
 <% responsible_person = local_assigns[:responsible_person] %>
 <h2 class="govuk-heading-m">Responsible Person</h2>
-<%= govukSummaryList(
-  classes: "govuk-summary-list check-your-answers-table",
-  rows: [
-    {
-      key: { text: "Name" },
-      value: { text: responsible_person.name },
-    },
-    {
-      key: { text: "Address" },
-      value: {
-        html: sanitize(responsible_person.address_lines.join("<br>"))
-      },
-    },
-  ] +
+<%= govuk_summary_list do |summary_list|
+  summary_list.with_row do |row|
+    row.with_key { "Name" }
+    row.with_value { responsible_person.name }
+  end;
+  summary_list.with_row do |row|
+    row.with_key { "Address" }
+    row.with_value { sanitize(responsible_person.address_lines.join("<br>")) }
+  end;
     (can_view_notification_history? ? responsible_person.address_logs.newest_first.map do |address|
-      {
-        key: {
-          text: "Previous address (#{display_date(address.start_date)} &mdash; #{display_date(address.end_date)})".html_safe
-        },
-        value: {
-          html: sanitize(address.address_lines.join("<br>"))
-        },
-      }
+      summary_list.with_row do |row|
+        row.with_key { "Previous address (#{display_date(address.start_date)} &mdash; #{display_date(address.end_date)})".html_safe }
+        row.with_value { sanitize(address.address_lines.join("<br>")) }
+      end;
     end : [])
-) %>
+
+end %>
diff --git a/cosmetics-web/app/views/notifications/_trigger_question_details.html.erb b/cosmetics-web/app/views/notifications/_trigger_question_details.html.erb
index e837107cdf..2f685cb386 100644
--- a/cosmetics-web/app/views/notifications/_trigger_question_details.html.erb
+++ b/cosmetics-web/app/views/notifications/_trigger_question_details.html.erb
@@ -14,13 +14,10 @@
                       value_name: :exact_concentration)
             end
   %>
-  <%= govukSummaryList(
-    classes: "opss-summary-list-mixed",
-    rows: [
-      {
-        key: { text: get_trigger_rules_short_question_name(trigger_question.question) },
-        value: { html: value },
-      }
-    ]
-  ) %>
+  <%= govuk_summary_list do |summary_list|
+      summary_list.with_row do |row|
+        row.with_key { get_trigger_rules_short_question_name(trigger_question.question) }
+        row.with_value { value }
+      end;
+  end %>
 <% end %>