diff --git a/ee/app/views/admin/application_settings/_custom_templates_form.html.haml b/ee/app/views/admin/application_settings/_custom_templates_form.html.haml
index 11e615816f99e4d9b03d46b0ddff02a5fc8016a3..e7d25b209002ac9ad8a03f51747ef9f157a2ac3e 100644
--- a/ee/app/views/admin/application_settings/_custom_templates_form.html.haml
+++ b/ee/app/views/admin/application_settings/_custom_templates_form.html.haml
@@ -1,15 +1,12 @@
 - if ::Gitlab::CurrentSettings.custom_project_templates_enabled?
-  %section.settings.as-custom-project-templates.no-animate#js-custom-project-templates-settings{ class: ('expanded' if expanded), data: { testid: 'custom-project-template-container' } }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-        = _('Custom project templates')
-      = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-        = expanded ? _('Collapse') : _('Expand')
-      %p.gl-text-secondary
-        - link = link_to('', help_page_path('administration/custom_project_templates'))
-        = safe_format(s_('AdminSettings|Select a group to use as a source of custom templates for new projects. %{link_start}Learn more%{link_end}.'), tag_pair(link, :link_start, :link_end))
-    .settings-content
-
+  = render ::Layouts::SettingsBlockComponent.new(_('Custom project templates'),
+    id: 'js-custom-project-templates-settings',
+    testid: 'custom-project-template-container',
+    expanded: expanded_by_default?) do |c|
+    - c.with_description do
+      - link = link_to('', help_page_path('administration/custom_project_templates'))
+      = safe_format(s_('AdminSettings|Select a group to use as a source of custom templates for new projects. %{link_start}Learn more%{link_end}.'), tag_pair(link, :link_start, :link_end))
+    - c.with_body do
       = gitlab_ui_form_for @application_setting, url: templates_admin_application_settings_path(anchor: 'js-custom-project-templates-settings') do |f|
         = form_errors(@application_setting)
 
diff --git a/ee/app/views/admin/application_settings/_templates.html.haml b/ee/app/views/admin/application_settings/_templates.html.haml
index 8556ce496d2550c2b3a4469607cdb7c33653265b..f45b32ebf62923ae2d262e89d305951ca9d59519 100644
--- a/ee/app/views/admin/application_settings/_templates.html.haml
+++ b/ee/app/views/admin/application_settings/_templates.html.haml
@@ -1,16 +1,14 @@
 - @force_desktop_expanded_sidebar = true
 
 - if License.feature_available?(:custom_file_templates)
-  %section.settings.as-visibility-access.no-animate#js-visibility-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-        = _('Templates')
-      = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-        = expanded ? _('Collapse') : _('Expand')
-      %p.gl-text-secondary
-        = _('Select a repository containing templates for common files.')
-        = link_to _('What templates can I create?'), help_page_path('administration/settings/instance_template_repository', anchor: 'supported-file-types-and-locations'), target: '_blank', rel: 'noopener noreferrer'
-    .settings-content
+  = render ::Layouts::SettingsBlockComponent.new(_('Templates'),
+    id: 'js-templates-settings',
+    testid: 'templates-settings',
+    expanded: expanded) do |c|
+    - c.with_description do
+      = _('Select a repository containing templates for common files.')
+      = link_to _('What templates can I create?'), help_page_path('administration/settings/instance_template_repository', anchor: 'supported-file-types-and-locations'), target: '_blank', rel: 'noopener noreferrer'
+    - c.with_body do
       = gitlab_ui_form_for @application_setting, url: templates_admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
         = form_errors(@application_setting)
 
diff --git a/ee/spec/features/admin/admin_settings_spec.rb b/ee/spec/features/admin/admin_settings_spec.rb
index b87c3cdb61c50c568d2029dd647b9edc156982f4..e6ef4f1c9706e7d2889c42c8a724c487e3169bce 100644
--- a/ee/spec/features/admin/admin_settings_spec.rb
+++ b/ee/spec/features/admin/admin_settings_spec.rb
@@ -199,13 +199,13 @@
     end
 
     it 'render "Templates" section' do
-      page.within('.as-visibility-access') do
+      within_testid('templates-settings') do
         expect(page).to have_content 'Templates'
       end
     end
 
     it 'render "Custom project templates" section' do
-      page.within('.as-custom-project-templates') do
+      within_testid('custom-project-template-container') do
         expect(page).to have_content 'Custom project templates'
       end
     end