diff --git a/app/components/layouts/settings_block_component.haml b/app/components/layouts/settings_block_component.haml
index eff678d522db3ce73c884ebdc7d49fafdc41fa92..a7924bcb544d513d9c668d7245a02ff96cf96f09 100644
--- a/app/components/layouts/settings_block_component.haml
+++ b/app/components/layouts/settings_block_component.haml
@@ -6,8 +6,8 @@
       %p.gl-text-secondary.gl-m-0
         = description || @description
     .gl-shrink-0.gl-px-2
-      = render Pajamas::ButtonComponent.new(button_options: { class: 'gl-min-w-12 js-settings-toggle' }) do
+      = render Pajamas::ButtonComponent.new(button_options: @button_options.merge(class: 'gl-min-w-12 js-settings-toggle')) do
         = button_text
   .settings-content
-    .gl-pt-5
+    .gl-mt-5
       = body
diff --git a/app/components/layouts/settings_block_component.rb b/app/components/layouts/settings_block_component.rb
index 20fe393a9065e5eacb4671851b30588bd73b20a6..8177645c34c698f8eef0a82ded7f4f332196412c 100644
--- a/app/components/layouts/settings_block_component.rb
+++ b/app/components/layouts/settings_block_component.rb
@@ -7,12 +7,14 @@ class SettingsBlockComponent < ViewComponent::Base
     # @param [String] id
     # @param [String] testid
     # @param [Boolean] expanded
-    def initialize(heading, description: nil, id: nil, testid: nil, expanded: nil)
+    # @param [Hash] button_options
+    def initialize(heading, description: nil, id: nil, testid: nil, expanded: nil, button_options: {})
       @heading = heading
       @description = description
       @id = id
       @testid = testid
       @expanded = expanded
+      @button_options = button_options
     end
 
     renders_one :heading
diff --git a/app/views/admin/application_settings/_diagramsnet.html.haml b/app/views/admin/application_settings/_diagramsnet.html.haml
index 0d44b38b0e09b253e4c9613e2dc5096998f366ad..f0a7e9e85dc10824f1ff9053275510ca1d51c197 100644
--- a/app/views/admin/application_settings/_diagramsnet.html.haml
+++ b/app/views/admin/application_settings/_diagramsnet.html.haml
@@ -1,14 +1,12 @@
 - expanded = integration_expanded?('diagramsnet_')
-%section.settings.as-diagramsnet.no-animate#js-diagramsnet-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Diagrams.net')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Render diagrams in your documents using diagrams.net.')
-      = link_to _('Learn more.'), help_page_path('administration/integration/diagrams_net'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('Diagrams.net'),
+  id: 'js-diagramsnet-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Render diagrams in your documents using diagrams.net.')
+    = link_to _('Learn more.'), help_page_path('administration/integration/diagrams_net'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-diagramsnet-settings'), html: { class: 'fieldset-form', id: 'diagramsnet-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index 57846edde0597fa26dd98a384fe66391ff616ce5..2e9cbd8d82e80ef06db8948e3e275e5238b41985 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -1,14 +1,11 @@
 - expanded = integration_expanded?('eks_')
-%section.settings.as-eks.no-animate#js-eks-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Amazon EKS')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Amazon EKS integration allows you to provision EKS clusters from GitLab.')
 
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Amazon EKS'),
+  id: 'js-eks-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Amazon EKS integration allows you to provision EKS clusters from GitLab.')
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-eks-settings'), html: { class: 'fieldset-form', id: 'eks-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_error_tracking.html.haml b/app/views/admin/application_settings/_error_tracking.html.haml
index ab4ed9917a0fd972abc32438aa13f9ff528e767c..25090e59f7b7145e1310815fdff616f016dc9f8d 100644
--- a/app/views/admin/application_settings/_error_tracking.html.haml
+++ b/app/views/admin/application_settings/_error_tracking.html.haml
@@ -1,17 +1,12 @@
 - expanded = integration_expanded?('error_tracking_')
 
-%section.settings.as-error-tracking.no-animate#js-error-tracking-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('GitLab Error Tracking')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Allows projects to track errors using an Opstrace integration.').html_safe % { link: help_page_path('operations/error_tracking') }
-      = link_to _('Learn more.'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
-
-  .settings-content
-
+= render ::Layouts::SettingsBlockComponent.new(_('GitLab Error Tracking'),
+  id: 'js-error-tracking-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Allows projects to track errors using an Opstrace integration.').html_safe % { link: help_page_path('operations/error_tracking') }
+    = link_to _('Learn more.'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     %fieldset
       .sub-section
         %h4= _('Access Token')
diff --git a/app/views/admin/application_settings/_external_authorization_service_form.html.haml b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
index 463d6b24fddc761c335094b9b7656011c9d11966..b0cff84e50ced1a8231aaa7d68821c2ce0231b63 100644
--- a/app/views/admin/application_settings/_external_authorization_service_form.html.haml
+++ b/app/views/admin/application_settings/_external_authorization_service_form.html.haml
@@ -1,14 +1,11 @@
-%section.settings.as-external-auth.no-animate#js-external-auth-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('ExternalAuthorization|External authorization')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('ExternalAuthorization|External classification policy authorization.')
-      = link_to _('Learn more.'), help_page_path('administration/settings/external_authorization'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
-
+= render ::Layouts::SettingsBlockComponent.new(s_('ExternalAuthorization|External authorization'),
+  id: 'js-external-auth-settings',
+  testid: 'external-auth-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = s_('ExternalAuthorization|External classification policy authorization.')
+    = link_to _('Learn more.'), help_page_path('administration/settings/external_authorization'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-external-auth-settings'), html: { class: 'fieldset-form', id: 'external-auth-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_floc.html.haml b/app/views/admin/application_settings/_floc.html.haml
index 27df417d2251c36da9e5926ef3ac6b15c6f1cb2c..ce1d809ebecf315caee59a86dd28718d8d5506e2 100644
--- a/app/views/admin/application_settings/_floc.html.haml
+++ b/app/views/admin/application_settings/_floc.html.haml
@@ -1,17 +1,13 @@
 - expanded = integration_expanded?('floc_')
 
-%section.settings.no-animate#js-floc-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('FloC|Federated Learning of Cohorts (FLoC)')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      - floc_link_url = help_page_path('administration/settings/floc')
-      - floc_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: floc_link_url }
-      = html_escape(s_('FloC|Configure whether you want to participate in FLoC. %{floc_link_start}What is FLoC?%{floc_link_end}')) % { floc_link_start: floc_link_start, floc_link_end: '</a>'.html_safe }
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(s_('FloC|Federated Learning of Cohorts (FLoC)'),
+  id: 'js-floc-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    - floc_link_url = help_page_path('administration/settings/floc')
+    - floc_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: floc_link_url }
+    = html_escape(s_('FloC|Configure whether you want to participate in FLoC. %{floc_link_start}What is FLoC?%{floc_link_end}')) % { floc_link_start: floc_link_start, floc_link_end: '</a>'.html_safe }
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-floc-settings'), html: { class: 'fieldset-form', id: 'floc-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_gitpod.html.haml b/app/views/admin/application_settings/_gitpod.html.haml
index ce8c390baa535b9cbeaaa30f9ca9c89868050223..7bef72bdaa7cefece19a3a3b556fcccf5ca69c13 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -1,16 +1,12 @@
 - expanded = integration_expanded?('gitpod_')
 
-%section.settings.no-animate#js-gitpod-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Gitpod')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    .gl-text-secondary.gl-mb-5
-      #js-gitpod-settings-help-text{ data: {"message" => gitpod_enable_description, "message-url" => "https://gitpod.io/" } }
-      = link_to sprite_icon('question-o'), help_page_path('integration/gitpod'), target: '_blank', class: 'has-tooltip', title: _('More information')
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Gitpod'),
+  id: 'js-gitpod-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    #js-gitpod-settings-help-text{ data: {"message" => gitpod_enable_description, "message-url" => "https://gitpod.io/" } }
+    = link_to sprite_icon('question-o'), help_page_path('integration/gitpod'), target: '_blank', class: 'has-tooltip', title: _('More information')
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-gitpod-settings'), html: { class: 'fieldset-form', id: 'gitpod-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_jira_connect.html.haml b/app/views/admin/application_settings/_jira_connect.html.haml
index a0a2e1f01512fb6a31f09bf6e6f66d71a51e08eb..4bbc7942ba0961cb02e090c5e1c5a943351096fc 100644
--- a/app/views/admin/application_settings/_jira_connect.html.haml
+++ b/app/views/admin/application_settings/_jira_connect.html.haml
@@ -1,21 +1,17 @@
 - expanded = integration_expanded?('jira_connect')
 
-%section.settings.no-animate#js-jira_connect-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('JiraConnect|GitLab for Jira App')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('JiraConnect|Configure your Jira Connect Application ID.')
-      = link_to sprite_icon('question-o'),
-          help_page_path('administration/settings/jira_cloud_app',
-          aria: { label: _('GitLab for Jira Cloud') },
-          class: 'has-tooltip',
-          anchor: 'install-the-gitlab-for-jira-cloud-app-manually'),
-          title: _('More information')
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(s_('JiraConnect|GitLab for Jira App'),
+  id: 'js-jira_connect-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = s_('JiraConnect|Configure your Jira Connect Application ID.')
+    = link_to sprite_icon('question-o'),
+        help_page_path('administration/settings/jira_cloud_app',
+        aria: { label: _('GitLab for Jira Cloud') },
+        class: 'has-tooltip',
+        anchor: 'install-the-gitlab-for-jira-cloud-app-manually'),
+        title: _('More information')
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-jira-connect-application-id-settings'), html: { class: 'fieldset-form', id: 'jira-connect-application-id-settings' } do |f|
       = form_errors(@application_setting)
       .gl-form-group
diff --git a/app/views/admin/application_settings/_kroki.html.haml b/app/views/admin/application_settings/_kroki.html.haml
index 0f1316996fa2c688b9922c987b75ee57d47a80ce..fe59e8bf36b0a54003d9f1121a036a3a8c3a01cc 100644
--- a/app/views/admin/application_settings/_kroki.html.haml
+++ b/app/views/admin/application_settings/_kroki.html.haml
@@ -1,14 +1,12 @@
 - expanded = integration_expanded?('kroki_')
-%section.settings.as-kroki.no-animate#js-kroki-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Kroki')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki.')
-      = link_to _('Learn more.'), help_page_path('administration/integration/kroki'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('Kroki'),
+  id: 'js-kroki-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Users can render diagrams in AsciiDoc, Markdown, reStructuredText, and Textile documents using Kroki.')
+    = link_to _('Learn more.'), help_page_path('administration/integration/kroki'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/_mailgun.html.haml b/app/views/admin/application_settings/_mailgun.html.haml
index a01303db7898eccfee6d7bf06edb134364302137..1540f42fb72d170964d6452be01afe2c0ee5d073 100644
--- a/app/views/admin/application_settings/_mailgun.html.haml
+++ b/app/views/admin/application_settings/_mailgun.html.haml
@@ -1,13 +1,12 @@
 - expanded = integration_expanded?('mailgun_')
-%section.settings.as-mailgun.no-animate#js-mailgun-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Mailgun')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Configure the %{link} integration.').html_safe % { link: link_to(_('Mailgun events'), 'https://documentation.mailgun.com/en/latest/user_manual.html#webhooks', target: '_blank', rel: 'noopener noreferrer') }
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('Mailgun'),
+  id: 'js-mailgun-settings',
+  testid: 'mailgun-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Configure the %{link} integration.').html_safe % { link: link_to(_('Mailgun events'), 'https://documentation.mailgun.com/en/latest/user_manual.html#webhooks', target: '_blank', rel: 'noopener noreferrer') }
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-mailgun-settings'), html: { class: 'fieldset-form', id: 'mailgun-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index c673bf723975cea369c75634726f0dcdd1f5ab1b..1d7760f6fc0e05bdbfeb89d4ca260d8c8d886d5e 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -1,14 +1,12 @@
 - expanded = integration_expanded?('plantuml_')
-%section.settings.as-plantuml.no-animate#js-plantuml-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('PlantUML')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Render diagrams in your documents using PlantUML.')
-      = link_to _('Learn more.'), help_page_path('administration/integration/plantuml'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('PlantUML'),
+  id: 'js-plantuml-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Render diagrams in your documents using PlantUML.')
+    = link_to _('Learn more.'), help_page_path('administration/integration/plantuml'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-plantuml-settings'), html: { class: 'fieldset-form', id: 'plantuml-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/_security_txt.html.haml b/app/views/admin/application_settings/_security_txt.html.haml
index 3448d5911e6582a256cbf151e90139fbdf4df887..4862dc1d2b1ac6bac132fa611c8537910270699d 100644
--- a/app/views/admin/application_settings/_security_txt.html.haml
+++ b/app/views/admin/application_settings/_security_txt.html.haml
@@ -1,14 +1,10 @@
-%section.settings.as-security-txt.no-animate#js-security-txt-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('SecurityTxt|Add security contact information')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('SecurityTxt|Configure a %{codeOpen}security.txt%{codeClose} file.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
-      = link_to _('Learn more.'), help_page_path('administration/settings/security_contact_information'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
-
+= render ::Layouts::SettingsBlockComponent.new(s_('SecurityTxt|Add security contact information'),
+  id: 'js-security-txt-setting',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = s_('SecurityTxt|Configure a %{codeOpen}security.txt%{codeClose} file.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
+    = link_to _('Learn more.'), help_page_path('administration/settings/security_contact_information'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-security-txt-settings'), html: { class: 'fieldset-form', id: 'security-txt-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_silent_mode_settings_form.html.haml b/app/views/admin/application_settings/_silent_mode_settings_form.html.haml
index 92b4174842fc0d5a83dd6662e8a637b8bc9bb853..2d78e78133fb1a41c0e2fb16f5a8dcde1119510e 100644
--- a/app/views/admin/application_settings/_silent_mode_settings_form.html.haml
+++ b/app/views/admin/application_settings/_silent_mode_settings_form.html.haml
@@ -1,11 +1,8 @@
-%section.settings.no-animate#js-silent-mode-toggle{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('SilentMode|Silent mode')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('SilentMode|Suppress outbound communication, such as emails, from GitLab.')
-      = link_to _('Learn more.'), help_page_path('administration/silent_mode/index'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(s_('SilentMode|Silent mode'),
+  id: 'js-silent-mode-toggle',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = s_('SilentMode|Suppress outbound communication, such as emails, from GitLab.')
+    = link_to _('Learn more.'), help_page_path('administration/silent_mode/index'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     #js-silent-mode-settings{ data: { "silent-mode-enabled" => @application_setting.silent_mode_enabled.to_s } }
diff --git a/app/views/admin/application_settings/_slack.html.haml b/app/views/admin/application_settings/_slack.html.haml
index f967b9b4e6a35a67ab854c2e7c66eb341b63ed50..5d6138366d702191a17766a9c0b31edb552d0eb7 100644
--- a/app/views/admin/application_settings/_slack.html.haml
+++ b/app/views/admin/application_settings/_slack.html.haml
@@ -1,17 +1,14 @@
 - gitlab_com = Gitlab.com?
 - expanded = integration_expanded?('slack_app_')
 
-%section.settings.as-slack.no-animate#js-slack-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('Integrations|GitLab for Slack app')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('SlackIntegration|Configure your GitLab for Slack app.')
-      = link_to(_('Learn more.'), help_page_path('administration/settings/slack_app'), target: '_blank', rel: 'noopener noreferrer')
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(s_('Integrations|GitLab for Slack app'),
+  id: 'js-slack-settings',
+  testid: 'slack-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = s_('SlackIntegration|Configure your GitLab for Slack app.')
+    = link_to(_('Learn more.'), help_page_path('administration/settings/slack_app'), target: '_blank', rel: 'noopener noreferrer')
+  - c.with_body do
     - unless gitlab_com
       %h5
         = s_('SlackIntegration|Step 1: Create your GitLab for Slack app')
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index 1049f42673d795387d240458ef7586f09d28e81c..cc32bc4416016727a0d8d27df0daf4952cb4fc22 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -1,15 +1,14 @@
 - expanded = integration_expanded?('snowplow_')
-%section.settings.as-snowplow.no-animate#js-snowplow-settings{ class: ('expanded' if expanded), data: { testid: 'snowplow-settings-content' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Snowplow')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      - help_link = link_to('', help_page_path('development/internal_analytics/internal_event_instrumentation/index'), target: '_blank', rel: 'noopener noreferrer')
-      - snowplow_link = link_to('', 'https://snowplow.io/', target: '_blank', rel: 'noopener noreferrer')
-      = safe_format(_('Configure %{snowplow_link_start}Snowplow%{snowplow_link_end} to track events. %{help_link_start}Learn more.%{help_link_end}'), tag_pair(snowplow_link, :snowplow_link_start, :snowplow_link_end), tag_pair(help_link, :help_link_start, :help_link_end))
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('Snowplow'),
+  id: 'js-snowplow-settings',
+  testid: 'snowplow-settings-content',
+  expanded: expanded) do |c|
+  - c.with_description do
+    - help_link = link_to('', help_page_path('development/internal_analytics/internal_event_instrumentation/index'), target: '_blank', rel: 'noopener noreferrer')
+    - snowplow_link = link_to('', 'https://snowplow.io/', target: '_blank', rel: 'noopener noreferrer')
+    = safe_format(_('Configure %{snowplow_link_start}Snowplow%{snowplow_link_end} to track events. %{help_link_start}Learn more.%{help_link_end}'), tag_pair(snowplow_link, :snowplow_link_start, :snowplow_link_end), tag_pair(help_link, :help_link_start, :help_link_end))
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-snowplow-settings'), html: { class: 'fieldset-form', id: 'snowplow-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index e61947e3cffbc170ca9ec5247694fbfa013379ff..097655281d8c2887cf9ce4dd0c91c66f7846aa81 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -1,21 +1,15 @@
 - return unless Gitlab::Sourcegraph.feature_available?
 - expanded = integration_expanded?('sourcegraph_')
 
-%section.settings.as-sourcegraph.no-animate#js-sourcegraph-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Sourcegraph')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://sourcegraph.com/' }
-      - link_end = "#{sprite_icon('external-link', size: 12, css_class: 'ml-1 vertical-align-center')}</a>".html_safe
-      = s_('SourcegraphAdmin|Enable code intelligence powered by %{link_start}Sourcegraph%{link_end} on your GitLab instance\'s code views and merge requests.').html_safe % { link_start: link_start, link_end: link_end }
-      %span
-        = link_to s_('SourcegraphAdmin|Learn more.'), help_page_path('integration/sourcegraph'), target: '_blank', rel: 'noopener noreferrer'
-
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Sourcegraph'),
+  id: 'js-sourcegraph-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://sourcegraph.com/' }
+    - link_end = "#{sprite_icon('external-link', size: 12, css_class: 'ml-1 vertical-align-center')}</a>".html_safe
+    = s_('SourcegraphAdmin|Enable code intelligence powered by %{link_start}Sourcegraph%{link_end} on your GitLab instance\'s code views and merge requests.').html_safe % { link_start: link_start, link_end: link_end }
+    %span= link_to s_('SourcegraphAdmin|Learn more.'), help_page_path('integration/sourcegraph'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-sourcegraph-settings'), html: { class: 'fieldset-form', id: 'sourcegraph-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/app/views/admin/application_settings/_third_party_offers.html.haml b/app/views/admin/application_settings/_third_party_offers.html.haml
index 4521f5bc0d9cba610be734fdc4f5434919d74952..3dc2babcac1178f7374792fa9feb6dc9818710bd 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -1,13 +1,12 @@
 - expanded = integration_expanded?('hide_third_party_')
-%section.settings.as-third-party-offers.no-animate#js-third-party-offers-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Customer experience improvement and third-party offers')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Control whether to display customer experience improvement content and third-party offers in GitLab.')
-  .settings-content
+
+= render ::Layouts::SettingsBlockComponent.new(_('Customer experience improvement and third-party offers'),
+  id: 'js-third-party-offers-settings',
+  testid: 'third-party-offers-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = _('Control whether to display customer experience improvement content and third-party offers in GitLab.')
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-third-party-offers-settings'), html: { class: 'fieldset-form', id: 'third-party-offers-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 3f70e709c7d83f47fa6d302c31ab924b0bac5a52..594533f0eb7f1d601cbcded0163fc1649c1e9e10 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -3,102 +3,84 @@
 - add_page_specific_style 'page_bundles/settings'
 - @force_desktop_expanded_sidebar = true
 
-%section.settings.as-visibility-access.no-animate#js-visibility-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'admin-visibility-access-settings' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Visibility and access controls')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('AdminSettings|Set visibility of project contents and configure Git access protocols.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Visibility and access controls'),
+  id: 'js-visibility-settings',
+  testid: 'admin-visibility-access-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = s_('AdminSettings|Set visibility of project contents and configure Git access protocols.')
+  - c.with_body do
     = render 'visibility_and_access'
 
-%section.settings.as-account-limit.no-animate#js-account-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'account-and-limit-settings-content'} }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Account and limit')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Set projects and maximum size limits, session duration, user options, and check feature availability for namespace plan.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Account and limit'),
+  id: 'js-account-settings',
+  testid: 'account-and-limit-settings-content',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Set projects and maximum size limits, session duration, user options, and check feature availability for namespace plan.')
+  - c.with_body do
     = render 'account_and_limit'
 
 = render_if_exists 'admin/application_settings/ai_powered'
 
-%section.settings.as-import-export.no-animate#js-import-export-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'admin-import-export-settings' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Import and export settings')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle '}) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Configure import sources and settings related to import and export features.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Import and export settings'),
+  id: 'js-import-export-settings',
+  testid: 'admin-import-export-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Configure import sources and settings related to import and export features.')
+  - c.with_body do
     = render 'import_and_export'
 
-%section.settings.as-diff-limits.no-animate#js-merge-request-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Diff limits')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Set size limits for displaying diffs in the browser.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Diff limits'),
+  id: 'js-merge-request-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Set size limits for displaying diffs in the browser.')
+  - c.with_body do
     = render 'diff_limits'
 
-%section.settings.as-signup.no-animate#js-signup-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'sign-up-restrictions-settings-content' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Sign-up restrictions')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Configure the way a user creates a new account.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Sign-up restrictions'),
+  id: 'js-signup-settings',
+  testid: 'sign-up-restrictions-settings-content',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Configure the way a user creates a new account.')
+  - c.with_body do
     = render 'signup'
 
-%section.settings.as-signin.no-animate#js-signin-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Sign-in restrictions')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Set sign-in restrictions for all users.')
-      = link_to _('Learn more.'), help_page_path('administration/settings/sign_in_restrictions'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Sign-in restrictions'),
+  id: 'js-signin-settings',
+  testid: 'signin-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Set sign-in restrictions for all users.')
+    = link_to _('Learn more.'), help_page_path('administration/settings/sign_in_restrictions'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = render 'signin'
 
-%section.settings.as-terms.no-animate#js-terms-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Terms of Service and Privacy Policy')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Add a Terms of Service agreement and Privacy Policy for users of this GitLab instance.')
-      = link_to _('Learn more.'), help_page_path('administration/settings/terms'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Terms of Service and Privacy Policy'),
+  id: 'js-terms-settings',
+  testid: 'terms-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Add a Terms of Service agreement and Privacy Policy for users of this GitLab instance.')
+    = link_to _('Learn more.'), help_page_path('administration/settings/terms'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = render 'terms'
 
 = render 'admin/application_settings/external_authorization_service_form', expanded: expanded_by_default?
-
 = render_if_exists 'admin/application_settings/microsoft_application'
 = render_if_exists 'admin/application_settings/scim'
 
-%section.settings.as-terminal.no-animate#js-terminal-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Web terminal')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Set the maximum session time for a web terminal.')
-      = link_to _('How do I use a web terminal?'), help_page_path('ci/environments/index', anchor: 'web-terminals-deprecated'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Web terminal'),
+  id: 'js-terminal-settings',
+  testid: 'terminal-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Set the maximum session time for a web terminal.')
+    = link_to _('How do I use a web terminal?'), help_page_path('ci/environments/index', anchor: 'web-terminals-deprecated'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = render 'terminal'
 
 = render_if_exists 'admin/application_settings/maintenance_mode_settings_form'
diff --git a/ee/app/views/admin/application_settings/_add_license.html.haml b/ee/app/views/admin/application_settings/_add_license.html.haml
index 7eef4d91a03e632622dd53775adfb7288e859a25..6112fb9fb91ffd8bdf682e1f14cdca7456e9a288 100644
--- a/ee/app/views/admin/application_settings/_add_license.html.haml
+++ b/ee/app/views/admin/application_settings/_add_license.html.haml
@@ -1,18 +1,15 @@
 - return unless @new_license.present?
 
-%section.settings#js-add-license-toggle{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Add License')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle', data: { testid: 'expand-add-license-button' } }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      - if License.current
-        = _('To continue using GitLab Enterprise Edition, upload the %{codeOpen}.gitlab-license%{codeClose} file or enter the license key you have received from GitLab Inc.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
-      - else
-        = _('To start using GitLab Enterprise Edition, upload the %{codeOpen}.gitlab-license%{codeClose} file or enter the license key you have received from GitLab Inc.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Add License'),
+  id: 'js-add-license-toggle',
+  expanded: expanded_by_default?,
+  button_options: { data: { testid: 'expand-add-license-button' } }) do |c|
+  - c.with_description do
+    - if License.current
+      = _('To continue using GitLab Enterprise Edition, upload the %{codeOpen}.gitlab-license%{codeClose} file or enter the license key you have received from GitLab Inc.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
+    - else
+      = _('To start using GitLab Enterprise Edition, upload the %{codeOpen}.gitlab-license%{codeClose} file or enter the license key you have received from GitLab Inc.').html_safe % {codeOpen: '<code>'.html_safe, codeClose: '</code>'.html_safe}
+  - c.with_body do
     - eula_url = "#{ApplicationHelper.promo_url}/terms/#subscription"
     - eula_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: eula_url }
 
diff --git a/ee/app/views/admin/application_settings/_ai_powered.html.haml b/ee/app/views/admin/application_settings/_ai_powered.html.haml
index 81b2f735bf737c49ee0cd285a20fecf93fe40304..595e0e65b1d549f5ae7ba7da79af3915678af54d 100644
--- a/ee/app/views/admin/application_settings/_ai_powered.html.haml
+++ b/ee/app/views/admin/application_settings/_ai_powered.html.haml
@@ -5,18 +5,12 @@
 
 - return unless visible_duo_chat || visible_duo_pro
 
-- expanded = false
-
-%section.settings.no-animate#js-ai-powered-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('AIPoweredSM|AI-powered features')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = ai_powered_description
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(s_('AIPoweredSM|AI-powered features'),
+  id: 'js-ai-powered-settings',
+  expanded: false) do |c|
+  - c.with_description do
+    = ai_powered_description
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-ai-powered-settings'), html: { class: 'fieldset-form', id: 'ai-powered-settings' } do |f|
       = form_errors(@application_setting)
 
diff --git a/ee/app/views/admin/application_settings/_analytics.html.haml b/ee/app/views/admin/application_settings/_analytics.html.haml
index a358f52c039e8db6934e06df3d99634b3a3c9f4c..582d7ce360f852984545f302705584c0b6d47317 100644
--- a/ee/app/views/admin/application_settings/_analytics.html.haml
+++ b/ee/app/views/admin/application_settings/_analytics.html.haml
@@ -1,14 +1,11 @@
 - expanded = integration_expanded?('use_clickhouse_')
 
-%section.settings.no-animate#js-analytics-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Analytics')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('Analytics|Configure analytics reports.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Analytics'),
+  id: 'js-analytics-settings',
+  expanded: expanded) do |c|
+  - c.with_description do
+    = s_('Analytics|Configure analytics reports.')
+  - c.with_body do
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-analytics-settings'), html: { class: 'fieldset-form', id: 'analytics-settings' } do |f|
       = form_errors(@application_setting)
       .form-group
diff --git a/ee/app/views/admin/application_settings/_maintenance_mode_settings_form.html.haml b/ee/app/views/admin/application_settings/_maintenance_mode_settings_form.html.haml
index 900c157c58dd96fb3db201b2854cf409f4327205..68723ac2d113c39480973114cba9f870b9bb3615 100644
--- a/ee/app/views/admin/application_settings/_maintenance_mode_settings_form.html.haml
+++ b/ee/app/views/admin/application_settings/_maintenance_mode_settings_form.html.haml
@@ -1,14 +1,11 @@
 - return unless RegistrationFeatures::MaintenanceMode.feature_available?
 
-%section.settings.no-animate#js-maintenance-mode-toggle{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Maintenance mode')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Prevent users from performing write operations while GitLab maintenance is in progress.')
-      = link_to _('Learn more.'), help_page_path('administration/maintenance_mode/index'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Maintenance mode'),
+  id: 'js-maintenance-mode-toggle',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Prevent users from performing write operations while GitLab maintenance is in progress.')
+    = link_to _('Learn more.'), help_page_path('administration/maintenance_mode/index'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     #js-maintenance-mode-settings{ data: { "maintenance-enabled" => @application_setting.maintenance_mode.to_s,
       "banner-message" => @application_setting.maintenance_mode_message } }
diff --git a/ee/app/views/admin/application_settings/_microsoft_application.haml b/ee/app/views/admin/application_settings/_microsoft_application.haml
index 3bcc7bb6262fa0ba25d48ad67092d26de67e4f23..c72dd7e739edfc718875e55de38f8b6cd6968df4 100644
--- a/ee/app/views/admin/application_settings/_microsoft_application.haml
+++ b/ee/app/views/admin/application_settings/_microsoft_application.haml
@@ -1,14 +1,12 @@
 - return unless @microsoft_application
 
-%section.settings.no-animate{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('Microsoft|Microsoft Azure Integration')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
-      = s_('Microsoft|Sync group memberships from Microsoft Azure when SAML response includes an overage claim.')
-      = link_to _('Learn more.'), help_page_path('user/group/saml_sso/group_sync'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content.microsoft-application
-    = gitlab_ui_form_for @microsoft_application, method: :put, url: update_microsoft_application_admin_application_settings_url do |f|
-      = render 'shared/system_access/microsoft_application_form', f: f
+= render ::Layouts::SettingsBlockComponent.new(s_('Microsoft|Microsoft Azure Integration'),
+  id: 'js-microsoft-application-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = s_('Microsoft|Sync group memberships from Microsoft Azure when SAML response includes an overage claim.')
+    = link_to _('Learn more.'), help_page_path('user/group/saml_sso/group_sync'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
+    .microsoft-application
+      = gitlab_ui_form_for @microsoft_application, method: :put, url: update_microsoft_application_admin_application_settings_url do |f|
+        = render 'shared/system_access/microsoft_application_form', f: f
diff --git a/ee/app/views/admin/application_settings/_scim.html.haml b/ee/app/views/admin/application_settings/_scim.html.haml
index a5be677721b72a50cf4aeb6a78a12c3285953bc7..87b193b609d23eb67f04fb154ef37897aa5031ad 100644
--- a/ee/app/views/admin/application_settings/_scim.html.haml
+++ b/ee/app/views/admin/application_settings/_scim.html.haml
@@ -1,12 +1,9 @@
 - return unless License.feature_available?(:instance_level_scim)
 
-%section.settings.no-animate#js-scim-token-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('SCIM|SCIM Token')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = s_('SCIM|System for Cross-Domain Identity Management.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new( s_('SCIM|SCIM Token'),
+  id: 'js-scim-token-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = s_('SCIM|System for Cross-Domain Identity Management.')
+  - c.with_body do
     #js-scim-token-app{ data: { endpoint_url: @scim_token_url, generate_token_path: admin_application_settings_scim_oauth_path } }
diff --git a/ee/spec/features/admin/admin_settings_spec.rb b/ee/spec/features/admin/admin_settings_spec.rb
index ba65a6da0d7a071463cd8efbb1efbc76af16a740..11361ab4c57a3fbb5fc4934cbdf619dc29d3ae1f 100644
--- a/ee/spec/features/admin/admin_settings_spec.rb
+++ b/ee/spec/features/admin/admin_settings_spec.rb
@@ -45,7 +45,7 @@
 
   it 'enables external authentication', feature_category: :system_access do
     visit general_admin_application_settings_path
-    page.within('.as-external-auth') do
+    within_testid('external-auth-settings') do
       check 'Enable classification control using an external service'
       fill_in 'Default classification label', with: 'default'
       click_button 'Save changes'
@@ -222,7 +222,7 @@
       let(:ldap_setting) { true }
 
       it 'changes to allow group owners to manage ldap' do
-        page.within('.as-visibility-access') do
+        within_testid('admin-visibility-access-settings') do
           find('#application_setting_allow_group_owners_to_manage_ldap').set(false)
           click_button 'Save'
         end
diff --git a/spec/features/admin/admin_disables_git_access_protocol_spec.rb b/spec/features/admin/admin_disables_git_access_protocol_spec.rb
index 6a694376d84c4d7c1c5437e75f916f095c4cd95a..4fb99bcd41eb1730faa04f7ac1da82ef710354f9 100644
--- a/spec/features/admin/admin_disables_git_access_protocol_spec.rb
+++ b/spec/features/admin/admin_disables_git_access_protocol_spec.rb
@@ -134,7 +134,7 @@ def disable_ssh_protocol
   def switch_git_protocol(value)
     visit general_admin_application_settings_path
 
-    page.within('.as-visibility-access') do
+    within_testid('admin-visibility-access-settings') do
       find('#application_setting_enabled_git_access_protocol').find(:xpath, "option[#{value}]").select_option
       click_on 'Save'
     end
diff --git a/spec/features/admin/admin_settings_spec.rb b/spec/features/admin/admin_settings_spec.rb
index eeacf37edaddc39ed9e0a2b993cda83d71dcf1a1..97e6a5c970e891092deb408244527cfe2504f43d 100644
--- a/spec/features/admin/admin_settings_spec.rb
+++ b/spec/features/admin/admin_settings_spec.rb
@@ -233,7 +233,7 @@
       context 'Change Sign-up restrictions' do
         context 'Require Admin approval for new signup setting' do
           it 'changes the setting', :js do
-            page.within('.as-signup') do
+            within_testid('sign-up-restrictions-settings-content') do
               check 'Require admin approval for new sign-ups'
               click_button 'Save changes'
             end
@@ -249,7 +249,7 @@
           end
 
           it 'changes the setting', :js do
-            page.within('.as-signup') do
+            within_testid('sign-up-restrictions-settings-content') do
               choose 'Hard'
               click_button 'Save changes'
             end
@@ -261,7 +261,7 @@
       end
 
       it 'change Sign-in restrictions' do
-        page.within('.as-signin') do
+        within_testid('signin-settings') do
           fill_in 'Home page URL', with: 'https://about.gitlab.com/'
           click_button 'Save changes'
         end
@@ -275,7 +275,7 @@
         _existing_terms = create(:term)
         accept_terms(admin)
 
-        page.within('.as-terms') do
+        within_testid('terms-settings') do
           check 'All users must accept the Terms of Service and Privacy Policy to access GitLab'
           fill_in 'Terms of Service Agreement', with: 'Be nice!'
           click_button 'Save changes'
@@ -292,7 +292,7 @@
       it 'modify oauth providers' do
         expect(current_settings.disabled_oauth_sign_in_sources).to be_empty
 
-        page.within('.as-signin') do
+        within_testid('signin-settings') do
           uncheck 'Google'
           click_button 'Save changes'
         end
@@ -300,7 +300,7 @@
         expect(page).to have_content 'Application settings saved successfully'
         expect(current_settings.disabled_oauth_sign_in_sources).to include('google_oauth2')
 
-        page.within('.as-signin') do
+        within_testid('signin-settings') do
           check "Google"
           click_button 'Save changes'
         end
@@ -312,7 +312,7 @@
       it 'oauth providers do not raise validation errors when saving unrelated changes' do
         expect(current_settings.disabled_oauth_sign_in_sources).to be_empty
 
-        page.within('.as-signin') do
+        within_testid('signin-settings') do
           uncheck 'Google'
           click_button 'Save changes'
         end
@@ -324,7 +324,7 @@
         allow(Devise).to receive(:omniauth_providers).and_return([])
 
         # Save an unrelated setting
-        page.within('.as-terms') do
+        within_testid('terms-settings') do
           click_button 'Save changes'
         end
 
@@ -333,7 +333,7 @@
       end
 
       it 'configure web terminal' do
-        page.within('.as-terminal') do
+        within_testid('terminal-settings') do
           fill_in 'Max session time', with: 15
           click_button 'Save changes'
         end
@@ -378,7 +378,7 @@
         let(:update_heading) { 'Update your Slack app' }
 
         it 'has all sections' do
-          page.within('.as-slack') do
+          within_testid('slack-settings') do
             expect(page).to have_content(create_heading)
             expect(page).to have_content(configure_heading)
             expect(page).to have_content(update_heading)
@@ -387,7 +387,7 @@
 
         context 'when GitLab.com', :saas do
           it 'only has the configure section' do
-            page.within('.as-slack') do
+            within_testid('slack-settings') do
               expect(page).to have_content(configure_heading)
 
               expect(page).not_to have_content(create_heading)
@@ -397,7 +397,7 @@
         end
 
         it 'changes the settings' do
-          page.within('.as-slack') do
+          within_testid('slack-settings') do
             check 'Enable GitLab for Slack app'
             fill_in 'Client ID', with: 'slack_app_id'
             fill_in 'Client secret', with: 'slack_app_secret'
@@ -424,7 +424,7 @@
       end
 
       it 'enable hiding third party offers' do
-        page.within('.as-third-party-offers') do
+        within_testid('third-party-offers-settings') do
           check 'Do not display content for customer experience improvement and offers from third parties'
           click_button 'Save changes'
         end
@@ -434,7 +434,7 @@
       end
 
       it 'enabling Mailgun events', :aggregate_failures do
-        page.within('.as-mailgun') do
+        within_testid('mailgun-settings') do
           check 'Enable Mailgun event receiver'
           fill_in 'Mailgun HTTP webhook signing key', with: 'MAILGUN_SIGNING_KEY'
           click_button 'Save changes'
diff --git a/spec/features/projects/clusters/gcp_spec.rb b/spec/features/projects/clusters/gcp_spec.rb
index 920d0afa77dffef9a5393fdcc6c7b5c2427f1a0f..c1956698d0b6877a1954edbf689563ad84aa443e 100644
--- a/spec/features/projects/clusters/gcp_spec.rb
+++ b/spec/features/projects/clusters/gcp_spec.rb
@@ -115,7 +115,7 @@
     end
 
     it 'user does not see the offer' do
-      page.within('.as-third-party-offers') do
+      within_testid('third-party-offers-settings') do
         click_button 'Expand'
         check 'Do not display content for customer experience improvement and offers from third parties'
         click_button 'Save changes'