diff --git a/jh/app/views/admin/application_settings/metrics_and_profiling.html.haml b/jh/app/views/admin/application_settings/metrics_and_profiling.html.haml
index a785130ffe507cb253db01409c82ae83072b6d27..8cc20488300275ef3193114d5903486f2256443e 100644
--- a/jh/app/views/admin/application_settings/metrics_and_profiling.html.haml
+++ b/jh/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -1,4 +1,3 @@
--# Ref: app/views/admin/application_settings/metrics_and_profiling.html.haml
 - add_page_specific_style 'page_bundles/admin/application_settings_metrics_and_profiling'
 
 - breadcrumb_title _("Metrics and profiling")
@@ -6,61 +5,48 @@
 - add_page_specific_style 'page_bundles/settings'
 - @force_desktop_expanded_sidebar = true
 
-%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Metrics - Prometheus')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Monitor GitLab with Prometheus.')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Metrics - Prometheus'),
+  id: 'js-prometheus-settings',
+  testid: 'prometheus-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Monitor GitLab with Prometheus.')
+  - c.with_body do
     = render 'prometheus'
 
-%section.settings.as-grafana.no-animate#js-grafana-settings{ class: ('expanded' if expanded_by_default?) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Metrics - Grafana')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Link to your Grafana instance.')
-      = link_to _('Learn more.'), help_page_path('administration/monitoring/performance/grafana_configuration.md'), target: '_blank', rel: 'noopener noreferrer'
-
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Metrics - Grafana'),
+  id: 'js-grafana-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Link to your Grafana instance.')
+    = link_to _('Learn more.'), help_page_path('administration/monitoring/performance/grafana_configuration.md'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = render 'grafana'
 
-%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded_by_default?), data: { testid: 'performance-bar-settings-content' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Profiling - Performance bar')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Enable access to the performance bar for non-administrators in a given group.')
-      = link_to _('Learn more.'), help_page_path('administration/monitoring/performance/performance_bar.md', anchor: 'enable-the-performance-bar-for-non-administrators'), target: '_blank', rel: 'noopener noreferrer'
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Profiling - Performance bar'),
+  id: 'js-performance-bar-settings',
+  testid: 'performance-bar-settings-content',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Enable access to the performance bar for non-administrators in a given group.')
+    = link_to _('Learn more.'), help_page_path('administration/monitoring/performance/performance_bar.md', anchor: 'enable-the-performance-bar-for-non-administrators'), target: '_blank', rel: 'noopener noreferrer'
+  - c.with_body do
     = render 'performance_bar'
 
 - if Feature.enabled?(:jh_usage_statistics)
-  %section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'usage_statistics_settings_content', testid: 'usage-statistics-settings-content' } }
-    .settings-header#usage-statistics
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-        = _('Usage statistics')
-      = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-        = expanded_by_default? ? _('Collapse') : _('Expand')
-      %p.gl-text-secondary
-        = _('Enable or disable version check and Service Ping.')
-    .settings-content
+  = render ::Layouts::SettingsBlockComponent.new(_('Usage statistics'),
+    id: 'js-usage-settings',
+    testid: 'usage-statistics-settings-content',
+    expanded: expanded_by_default?) do |c|
+    - c.with_description do
+      = _('Enable or disable version check and Service Ping.')
+    - c.with_body do
       = render 'usage'
 
-%section.settings.as-sentry.no-animate#js-sentry-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'sentry_settings_content' } }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Sentry')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p.gl-text-secondary
-      = _('Configure Sentry integration for error tracking')
-  .settings-content
+= render ::Layouts::SettingsBlockComponent.new(_('Sentry'),
+  id: 'js-sentry-settings',
+  expanded: expanded_by_default?) do |c|
+  - c.with_description do
+    = _('Configure Sentry integration for error tracking')
+  - c.with_body do
     = render 'sentry'
diff --git a/jh/spec/config/skip_specs.yml b/jh/spec/config/skip_specs.yml
index c109056bc7679f27131fcc4e710f4b66fc3aeb55..9766aaea3c7a8ace5afc1cfe8f5f987b1ed979ad 100644
--- a/jh/spec/config/skip_specs.yml
+++ b/jh/spec/config/skip_specs.yml
@@ -744,3 +744,8 @@
     - 'Admin::Ai::FeatureSettingsController POST #create behaves like returns 404 when feature is disabled when current licences is not paid returns 404'
     - 'Admin::Ai::FeatureSettingsController GET #index behaves like returns 404 when feature is disabled when current licences is not paid returns 404'
   skip_reason: 'skip AI feature in JH'
+- file_path: 'spec/migrations/20240611122408_remove_project_statistics_wiki_size_and_project_id_index_spec.rb'
+  description:
+    - 'RemoveProjectStatisticsWikiSizeAndProjectIdIndex#up prepares async index removal when on gitlab.com'
+    - 'RemoveProjectStatisticsWikiSizeAndProjectIdIndex#down unprepares async index removal when on gitlab.com'
+  skip_reason: 'JH does not have this feature'