Add latest changes from gitlab-org/gitlab@16-3-stable-eev16.3.0-rc42

241 files changed, 2075 insertions, 1688 deletions

diff --git a/app/views/admin/application_settings/_account_and_limit.html.haml b/app/views/admin/application_settings/_account_and_limit.html.haml
index af67ed28309..d8d6af606ac 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -27,6 +27,17 @@
       = f.number_field :max_import_size, class: 'form-control gl-form-input', title: _('Maximum size of import files.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted= _('Only effective when remote storage is enabled. Set to 0 for no size limit.')
     .form-group
+      = f.label :max_import_remote_file_size, s_('Import|Maximum import remote file size (MB)'), class: 'label-light'
+      = f.number_field :max_import_remote_file_size, class: 'form-control gl-form-input', title: s_('Import|Maximum remote file size for imports from external object storages. For example, AWS S3.'), data: { toggle: 'tooltip', container: 'body' }
+      %span.form-text.text-muted= _('Set to 0 for no size limit.')
+    .form-group
+      = f.label :bulk_import_max_download_file_size, s_('BulkImport|Direct transfer maximum download file size (MB)'), class: 'label-light'
+      = f.number_field :bulk_import_max_download_file_size, class: 'form-control gl-form-input', title: s_('BulkImport|Maximum download file size when importing from source GitLab instances by direct transfer.'), data: { toggle: 'tooltip', container: 'body' }
+    .form-group
+      = f.label :max_decompressed_archive_size, s_('Import|Maximum decompressed size (MiB)'), class: 'label-light'
+      = f.number_field :max_decompressed_archive_size, class: 'form-control gl-form-input', title: s_('Import|Maximum size of decompressed archive.'), data: { toggle: 'tooltip', container: 'body' }
+      %span.form-text.text-muted= _('Set to 0 for no size limit.')
+    .form-group
       = f.label :session_expire_delay, _('Session duration (minutes)'), class: 'label-light'
       = f.number_field :session_expire_delay, class: 'form-control gl-form-input', title: _('Maximum duration of a session.'), data: { toggle: 'tooltip', container: 'body' }
       %span.form-text.text-muted#session_expire_delay_help_block= _('Restart GitLab to apply changes.')
diff --git a/app/views/admin/application_settings/_ai_access.html.haml b/app/views/admin/application_settings/_ai_access.html.haml
deleted file mode 100644
index 97f46adef51..00000000000
--- a/app/views/admin/application_settings/_ai_access.html.haml
+++ /dev/null
@@ -1,31 +0,0 @@
-- return if Gitlab.org_or_com?
-
-- expanded = integration_expanded?('ai_access')
-- token_is_present = @application_setting.ai_access_token.present?
-- token_label = token_is_present ? s_('CodeSuggestionsSM|Enter new personal access token') : s_('CodeSuggestionsSM|Personal access token')
-- token_value = token_is_present ? ApplicationSettingMaskedAttrs::MASK : ''
-
-%section.settings.no-animate#js-ai-access-settings{ class: ('expanded' if expanded) }
-  .settings-header
-    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = s_('CodeSuggestionsSM|Code Suggestions')
-    = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
-      = expanded ? _('Collapse') : _('Expand')
-    %p
-      = code_suggestions_description
-
-  .settings-content
-    = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-ai-access-settings'), html: { class: 'fieldset-form', id: 'ai-access-settings' } do |f|
-      = form_errors(@application_setting)
-
-      %fieldset
-        .form-group
-          = f.gitlab_ui_checkbox_component :instance_level_code_suggestions_enabled,
-            s_('CodeSuggestionsSM|Enable Code Suggestions for this instance %{beta}').html_safe % { beta: gl_badge_tag(_('Beta'), variant: :neutral, size: :sm) },
-            help_text: code_suggestions_agreement
-          = f.label :ai_access_token, token_label, class: 'label-bold'
-          = f.password_field :ai_access_token, value: token_value, autocomplete: 'on', class: 'form-control gl-form-input', aria: { describedby: 'code_suggestions_token_explanation' }
-          %p.form-text.text-muted{ id: 'code_suggestions_token_explanation' }
-            = code_suggestions_token_explanation
-
-      = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
index 0125c83dc72..c08270a8522 100644
--- a/app/views/admin/application_settings/_ci_cd.html.haml
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -62,48 +62,48 @@
 
     = f.submit _('Save changes'), pajamas_button: true
 
-.settings-content
-  %h4
-    = s_('AdminSettings|CI/CD limits')
-  %p
-    = s_('AdminSettings|By default, set a limit to 0 to have no limit.')
-  .scrolling-tabs-container.inner-page-scroll-tabs
-    - if @plans.size > 1
-      %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.gl-mb-5
+  .gl-mt-7
+    %h4
+      = s_('AdminSettings|CI/CD limits')
+    %p
+      = s_('AdminSettings|By default, set a limit to 0 to have no limit.')
+    .scrolling-tabs-container.inner-page-scroll-tabs
+      - if @plans.size > 1
+        %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.gl-mb-5
+          - @plans.each_with_index do |plan, index|
+            %li
+              = link_to admin_plan_limits_path(anchor: 'js-ci-cd-settings'), data: { target: "div#plan#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
+                = plan.name.capitalize
+      .tab-content.gl-tab-content
         - @plans.each_with_index do |plan, index|
-          %li
-            = link_to admin_plan_limits_path(anchor: 'js-ci-cd-settings'), data: { target: "div#plan#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
-              = plan.name.capitalize
-    .tab-content.gl-tab-content
-      - @plans.each_with_index do |plan, index|
-        .tab-pane{ :id => "plan#{index}", class: index == 0 ? 'active': '' }
-          = gitlab_ui_form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-ci-cd-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
-            = form_errors(plan)
-            %fieldset
-              = f.hidden_field(:plan_id, value: plan.id)
-              .form-group
-                = f.label :ci_pipeline_size, plan_limit_setting_description(:ci_pipeline_size)
-                = f.number_field :ci_pipeline_size, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :ci_active_jobs, plan_limit_setting_description(:ci_active_jobs)
-                = f.number_field :ci_active_jobs, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :ci_project_subscriptions, plan_limit_setting_description(:ci_project_subscriptions)
-                = f.number_field :ci_project_subscriptions, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :ci_pipeline_schedules, plan_limit_setting_description(:ci_pipeline_schedules)
-                = f.number_field :ci_pipeline_schedules, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :ci_needs_size_limit, plan_limit_setting_description(:ci_needs_size_limit)
-                = f.number_field :ci_needs_size_limit, class: 'form-control gl-form-input'
-                .form-text.text-muted= s_('AdminSettings|This limit cannot be disabled. Set to 0 to block all DAG dependencies.')
-              .form-group
-                = f.label :ci_registered_group_runners, plan_limit_setting_description(:ci_registered_group_runners)
-                = f.number_field :ci_registered_group_runners, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :ci_registered_project_runners, plan_limit_setting_description(:ci_registered_project_runners)
-                = f.number_field :ci_registered_project_runners, class: 'form-control gl-form-input'
-              .form-group
-                = f.label :pipeline_hierarchy_size, plan_limit_setting_description(:pipeline_hierarchy_size)
-                = f.number_field :pipeline_hierarchy_size, class: 'form-control gl-form-input'
-              = f.submit s_('AdminSettings|Save %{name} limits').html_safe % { name: plan.name.capitalize }, pajamas_button: true
+          .tab-pane{ :id => "plan#{index}", class: index == 0 ? 'active': '' }
+            = gitlab_ui_form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-ci-cd-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
+              = form_errors(plan)
+              %fieldset
+                = f.hidden_field(:plan_id, value: plan.id)
+                .form-group
+                  = f.label :ci_pipeline_size, plan_limit_setting_description(:ci_pipeline_size)
+                  = f.number_field :ci_pipeline_size, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :ci_active_jobs, plan_limit_setting_description(:ci_active_jobs)
+                  = f.number_field :ci_active_jobs, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :ci_project_subscriptions, plan_limit_setting_description(:ci_project_subscriptions)
+                  = f.number_field :ci_project_subscriptions, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :ci_pipeline_schedules, plan_limit_setting_description(:ci_pipeline_schedules)
+                  = f.number_field :ci_pipeline_schedules, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :ci_needs_size_limit, plan_limit_setting_description(:ci_needs_size_limit)
+                  = f.number_field :ci_needs_size_limit, class: 'form-control gl-form-input'
+                  .form-text.text-muted= s_('AdminSettings|This limit cannot be disabled. Set to 0 to block all DAG dependencies.')
+                .form-group
+                  = f.label :ci_registered_group_runners, plan_limit_setting_description(:ci_registered_group_runners)
+                  = f.number_field :ci_registered_group_runners, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :ci_registered_project_runners, plan_limit_setting_description(:ci_registered_project_runners)
+                  = f.number_field :ci_registered_project_runners, class: 'form-control gl-form-input'
+                .form-group
+                  = f.label :pipeline_hierarchy_size, plan_limit_setting_description(:pipeline_hierarchy_size)
+                  = f.number_field :pipeline_hierarchy_size, class: 'form-control gl-form-input'
+                = f.submit s_('AdminSettings|Save %{name} limits').html_safe % { name: plan.name.capitalize }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_diagramsnet.html.haml b/app/views/admin/application_settings/_diagramsnet.html.haml
index e493110a9dc..0cf44938881 100644
--- a/app/views/admin/application_settings/_diagramsnet.html.haml
+++ b/app/views/admin/application_settings/_diagramsnet.html.haml
@@ -5,7 +5,7 @@
       = _('Diagrams.net')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Render diagrams in your documents using diagrams.net.')
       = link_to _('Learn more.'), help_page_path('administration/integration/diagrams_net.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index 62c61ad356f..57846edde05 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -5,7 +5,7 @@
       = _('Amazon EKS')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Amazon EKS integration allows you to provision EKS clusters from GitLab.')
 
   .settings-content
diff --git a/app/views/admin/application_settings/_error_tracking.html.haml b/app/views/admin/application_settings/_error_tracking.html.haml
index b57371286d5..6754dd99bbc 100644
--- a/app/views/admin/application_settings/_error_tracking.html.haml
+++ b/app/views/admin/application_settings/_error_tracking.html.haml
@@ -6,7 +6,7 @@
       = _('GitLab Error Tracking')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Allows projects to track errors using an Opstrace integration.').html_safe % { link: help_page_path('operations/error_tracking.md') }
       = link_to _('Learn more.'), help_page_path('operations/error_tracking.md'), target: '_blank', rel: 'noopener noreferrer'
 
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 1b62083849b..463d6b24fdd 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
@@ -4,9 +4,9 @@
       = s_('ExternalAuthorization|External authorization')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ExternalAuthorization|External classification policy authorization.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/external_authorization'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/external_authorization'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
 
     = 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|
diff --git a/app/views/admin/application_settings/_floc.html.haml b/app/views/admin/application_settings/_floc.html.haml
index cb8b2d3dfcd..e1576e84e66 100644
--- a/app/views/admin/application_settings/_floc.html.haml
+++ b/app/views/admin/application_settings/_floc.html.haml
@@ -6,8 +6,8 @@
       = s_('FloC|Federated Learning of Cohorts (FLoC)')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
-      - floc_link_url = help_page_path('user/admin_area/settings/floc.md')
+    %p.gl-text-secondary
+      - floc_link_url = help_page_path('administration/settings/floc.md')
       - 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 }
 
diff --git a/app/views/admin/application_settings/_gitlab_shell_operation_limits.html.haml b/app/views/admin/application_settings/_gitlab_shell_operation_limits.html.haml
index 4bd44b922fa..64549b97bd1 100644
--- a/app/views/admin/application_settings/_gitlab_shell_operation_limits.html.haml
+++ b/app/views/admin/application_settings/_gitlab_shell_operation_limits.html.haml
@@ -4,9 +4,9 @@
       = s_('ShellOperations|Git SSH operations rate limit')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ShellOperations|Limit the number of Git operations a user can perform per minute, per repository.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limits_on_git_ssh_operations.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limits_on_git_ssh_operations.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-gitlab-shell-operation-limits-settings'), html: { class: 'fieldset-form' } 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 09817a9172f..988153d45a4 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -6,11 +6,10 @@
       = _('Gitpod')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    .gl-text-secondary
       #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.md'), target: '_blank', class: 'has-tooltip', title: _('More information')
 
-
   .settings-content
     = 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)
@@ -23,7 +22,7 @@
           = f.label :gitpod_url, s_('Gitpod|Gitpod URL'), class: 'label-bold'
           = f.text_field :gitpod_url, class: 'form-control gl-form-input', placeholder: s_('Gitpod|https://gitpod.example.com')
           .form-text.text-muted
+            - help_link = link_to('', help_page_path('integration/gitpod', anchor: 'enable-gitpod-in-your-user-settings', target: '_blank', rel: 'noopener noreferrer'))
             = s_('Gitpod|The URL to your Gitpod instance configured to read your GitLab projects, such as https://gitpod.example.com.')
-            - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('integration/gitpod', anchor: 'enable-gitpod-in-your-user-settings') }
-            = s_('Gitpod|To use the integration, each user must also enable Gitpod on their GitLab account. %{link_start}How do I enable it?%{link_end} ').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+            = safe_format(s_('Gitpod|To use the integration, each user must also enable Gitpod on their GitLab account. %{help_link_start}How do I enable it?%{help_link_end}'), tag_pair(help_link, :help_link_start, :help_link_end))
       = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_jira_connect.html.haml b/app/views/admin/application_settings/_jira_connect.html.haml
index 235b6855123..23ad85334cb 100644
--- a/app/views/admin/application_settings/_jira_connect.html.haml
+++ b/app/views/admin/application_settings/_jira_connect.html.haml
@@ -6,7 +6,7 @@
       = s_('JiraConnect|GitLab for Jira App')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('JiraConnect|Configure your Jira Connect Application ID.')
       = link_to sprite_icon('question-o'),
           help_page_path('integration/jira/connect-app',
@@ -18,19 +18,13 @@
   .settings-content
     = 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)
-
-      %fieldset
-        .form-group
-          = f.label :jira_connect_application_key, s_('JiraConnect|Jira Connect Application ID'), class: 'label-bold'
-          = f.text_field :jira_connect_application_key, class: 'form-control gl-form-input'
-
-      %fieldset
-        .form-group
-          = f.label :jira_connect_proxy_url, s_('JiraConnect|Jira Connect Proxy URL'), class: 'label-bold'
-          = f.text_field :jira_connect_proxy_url, class: 'form-control gl-form-input'
-
-      %fieldset
-        .form-group
-          = f.gitlab_ui_checkbox_component :jira_connect_public_key_storage_enabled, s_('JiraConnect|Enable public key storage')
+      .gl-form-group
+        = f.label :jira_connect_application_key, s_('JiraConnect|Jira Connect Application ID'), class: 'label-bold'
+        = f.text_field :jira_connect_application_key, class: 'form-control gl-form-input'
+      .gl-form-group
+        = f.label :jira_connect_proxy_url, s_('JiraConnect|Jira Connect Proxy URL'), class: 'label-bold'
+        = f.text_field :jira_connect_proxy_url, class: 'form-control gl-form-input'
+      .gl-form-group
+        = f.gitlab_ui_checkbox_component :jira_connect_public_key_storage_enabled, s_('JiraConnect|Enable public key storage')
 
       = f.submit _('Save changes'), pajamas_button: true
diff --git a/app/views/admin/application_settings/_kroki.html.haml b/app/views/admin/application_settings/_kroki.html.haml
index e1f5802a407..4dbca235a73 100644
--- a/app/views/admin/application_settings/_kroki.html.haml
+++ b/app/views/admin/application_settings/_kroki.html.haml
@@ -5,7 +5,7 @@
       = _('Kroki')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %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.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/admin/application_settings/_localization.html.haml b/app/views/admin/application_settings/_localization.html.haml
index 19d321ca205..4002aa076f7 100644
--- a/app/views/admin/application_settings/_localization.html.haml
+++ b/app/views/admin/application_settings/_localization.html.haml
@@ -7,7 +7,7 @@
       = f.select :first_day_of_week, first_day_of_week_choices, {}, class: 'form-control'
       .form-text.text-muted
         = _('Default first day of the week in calendars and date pickers.')
-        = link_to _('Learn more.'), help_page_path('administration/settings/index.md', anchor: 'default-first-day-of-the-week'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('Learn more.'), help_page_path('administration/settings/index.md', anchor: 'change-the-default-first-day-of-the-week'), target: '_blank', rel: 'noopener noreferrer'
 
     .form-group
       = f.label :time_tracking, _('Time tracking'), class: 'label-bold'
diff --git a/app/views/admin/application_settings/_mailgun.html.haml b/app/views/admin/application_settings/_mailgun.html.haml
index fb15f6e79a5..a01303db789 100644
--- a/app/views/admin/application_settings/_mailgun.html.haml
+++ b/app/views/admin/application_settings/_mailgun.html.haml
@@ -5,7 +5,7 @@
       = _('Mailgun')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %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
     = 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|
diff --git a/app/views/admin/application_settings/_package_registry.html.haml b/app/views/admin/application_settings/_package_registry.html.haml
index 66b04006beb..23251c8f5c9 100644
--- a/app/views/admin/application_settings/_package_registry.html.haml
+++ b/app/views/admin/application_settings/_package_registry.html.haml
@@ -5,52 +5,53 @@
         = _('Package Registry')
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded_by_default? ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = s_('PackageRegistry|Configure package forwarding and package file size limits.')
 
-    = render_if_exists 'admin/application_settings/ee_package_registry'
-
     .settings-content
-      %h4
-        = _('Package file size limits')
-      %p
-        = _('Set limit to 0 to allow any file size.')
-      .scrolling-tabs-container.inner-page-scroll-tabs
-        - if @plans.size > 1
-          %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.mb-3
+      = render_if_exists 'admin/application_settings/ee_package_registry'
+
+      .gl-mt-7
+        %h4
+          = _('Package file size limits')
+        %p
+          = _('Set limit to 0 to allow any file size.')
+        .scrolling-tabs-container.inner-page-scroll-tabs
+          - if @plans.size > 1
+            %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.mb-3
+              - @plans.each_with_index do |plan, index|
+                %li
+                  = link_to admin_plan_limits_path(anchor: 'js-package-settings'), data: { target: "div#plan-package#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
+                    = plan.name.capitalize
+          .tab-content
             - @plans.each_with_index do |plan, index|
-              %li
-                = link_to admin_plan_limits_path(anchor: 'js-package-settings'), data: { target: "div#plan-package#{index}", action: "plan#{index}", toggle: 'tab'}, class: index == 0 ? 'active': '' do
-                  = plan.name.capitalize
-        .tab-content
-          - @plans.each_with_index do |plan, index|
-            .tab-pane{ :id => "plan-package#{index}", class: index == 0 ? 'active': '' }
-              = gitlab_ui_form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-package-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
-                = form_errors(plan)
-                %fieldset
-                  = f.hidden_field(:plan_id, value: plan.id)
-                  .form-group
-                    = f.label :conan_max_file_size, _('Maximum Conan package file size in bytes'), class: 'label-bold'
-                    = f.number_field :conan_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :helm_max_file_size, _('Maximum Helm chart file size in bytes'), class: 'label-bold'
-                    = f.number_field :helm_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :maven_max_file_size, _('Maximum Maven package file size in bytes'), class: 'label-bold'
-                    = f.number_field :maven_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :npm_max_file_size, _('Maximum npm package file size in bytes'), class: 'label-bold'
-                    = f.number_field :npm_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :nuget_max_file_size, _('Maximum NuGet package file size in bytes'), class: 'label-bold'
-                    = f.number_field :nuget_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :pypi_max_file_size, _('Maximum PyPI package file size in bytes'), class: 'label-bold'
-                    = f.number_field :pypi_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :terraform_module_max_file_size, _('Maximum Terraform Module package file size in bytes'), class: 'label-bold'
-                    = f.number_field :terraform_module_max_file_size, class: 'form-control gl-form-input'
-                  .form-group
-                    = f.label :generic_packages_max_file_size, _('Generic package file size in bytes'), class: 'label-bold'
-                    = f.number_field :generic_packages_max_file_size, class: 'form-control gl-form-input'
-                  = f.submit _('Save %{name} size limits').html_safe % { name: plan.name.capitalize }, pajamas_button: true
+              .tab-pane{ :id => "plan-package#{index}", class: index == 0 ? 'active': '' }
+                = gitlab_ui_form_for plan.actual_limits, url: admin_plan_limits_path(anchor: 'js-package-settings'), html: { class: 'fieldset-form' }, method: :post do |f|
+                  = form_errors(plan)
+                  %fieldset
+                    = f.hidden_field(:plan_id, value: plan.id)
+                    .form-group
+                      = f.label :conan_max_file_size, _('Maximum Conan package file size in bytes'), class: 'label-bold'
+                      = f.number_field :conan_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :helm_max_file_size, _('Maximum Helm chart file size in bytes'), class: 'label-bold'
+                      = f.number_field :helm_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :maven_max_file_size, _('Maximum Maven package file size in bytes'), class: 'label-bold'
+                      = f.number_field :maven_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :npm_max_file_size, _('Maximum npm package file size in bytes'), class: 'label-bold'
+                      = f.number_field :npm_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :nuget_max_file_size, _('Maximum NuGet package file size in bytes'), class: 'label-bold'
+                      = f.number_field :nuget_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :pypi_max_file_size, _('Maximum PyPI package file size in bytes'), class: 'label-bold'
+                      = f.number_field :pypi_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :terraform_module_max_file_size, _('Maximum Terraform Module package file size in bytes'), class: 'label-bold'
+                      = f.number_field :terraform_module_max_file_size, class: 'form-control gl-form-input'
+                    .form-group
+                      = f.label :generic_packages_max_file_size, _('Generic package file size in bytes'), class: 'label-bold'
+                      = f.number_field :generic_packages_max_file_size, class: 'form-control gl-form-input'
+                    = f.submit _('Save %{name} size limits').html_safe % { name: plan.name.capitalize }, pajamas_button: true
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index 42f289d87b2..a8b758f7324 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -5,7 +5,7 @@
       = _('PlantUML')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Render diagrams in your documents using PlantUML.')
       = link_to _('Learn more.'), help_page_path('administration/integration/plantuml.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/admin/application_settings/_projects_api_limits.html.haml b/app/views/admin/application_settings/_projects_api_limits.html.haml
index 4efab4d77a9..dde8ab07958 100644
--- a/app/views/admin/application_settings/_projects_api_limits.html.haml
+++ b/app/views/admin/application_settings/_projects_api_limits.html.haml
@@ -4,9 +4,9 @@
       = _('Projects API rate limit')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set the per-IP address rate limit applicable to unauthenticated requests for getting a list of projects via the API.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_projects_api.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limit_on_projects_api.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = gitlab_ui_form_for @application_setting, url: network_admin_application_settings_path(anchor: 'js-projects-api-limits-settings'), html: { class: 'fieldset-form' } do |f|
       = form_errors(@application_setting)
diff --git a/app/views/admin/application_settings/_slack.html.haml b/app/views/admin/application_settings/_slack.html.haml
index e4f46fdf7f2..a4cd0a27baa 100644
--- a/app/views/admin/application_settings/_slack.html.haml
+++ b/app/views/admin/application_settings/_slack.html.haml
@@ -7,9 +7,9 @@
       = s_('Integrations|GitLab for Slack app')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('SlackIntegration|Configure your GitLab for Slack app.')
-      = link_to(_('Learn more.'), help_page_path('user/admin_area/settings/slack_app'), target: '_blank', rel: 'noopener noreferrer')
+      = link_to(_('Learn more.'), help_page_path('administration/settings/slack_app'), target: '_blank', rel: 'noopener noreferrer')
 
   .settings-content
     - unless gitlab_com
@@ -27,7 +27,7 @@
       - tag_pair_slack_apps = tag_pair(link_to('', 'https://api.slack.com/apps', target: '_blank', rel: 'noopener noreferrer'), :link_start, :link_end)
       - tag_pair_strong = tag_pair(tag.strong, :strong_open, :strong_close)
       = safe_format(s_('SlackIntegration|Copy the %{link_start}settings%{link_end} from %{strong_open}%{settings_heading}%{strong_close} in your GitLab for Slack app.'), tag_pair_slack_apps, tag_pair_strong, settings_heading: 'App Credentials')
-      = link_to(_('Learn more.'), help_page_path('user/admin_area/settings/slack_app', anchor: 'configure-the-settings'), target: '_blank', rel: 'noopener noreferrer')
+      = link_to(_('Learn more.'), help_page_path('administration/settings/slack_app', anchor: 'configure-the-settings'), target: '_blank', rel: 'noopener noreferrer')
     = gitlab_ui_form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-slack-settings'), html: { class: 'fieldset-form' } do |f|
       = form_errors(@application_setting) if expanded
       %fieldset
@@ -59,7 +59,7 @@
         = s_('SlackIntegration|Update your Slack app')
       %p
         = s_('SlackIntegration|When GitLab releases new features for the GitLab for Slack app, you might have to manually update your copy to use the new features.')
-        = link_to(_('Learn more.'), help_page_path('user/admin_area/settings/slack_app', anchor: 'update-the-gitlab-for-slack-app'), target: '_blank', rel: 'noopener noreferrer')
+        = link_to(_('Learn more.'), help_page_path('administration/settings/slack_app', anchor: 'update-the-gitlab-for-slack-app'), target: '_blank', rel: 'noopener noreferrer')
       %p
         = render Pajamas::ButtonComponent.new(href: slack_app_manifest_download_admin_application_settings_path, icon: 'download') do
           = s_("SlackIntegration|Download latest manifest file")
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index 4e7d9b8ab21..6f9aad56ce8 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -5,9 +5,10 @@
       = _('Snowplow')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
-      - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('development/snowplow/index') }
-      = html_escape(_('Configure %{link} to track events. %{link_start}Learn more.%{link_end}')) % { link: link_to('Snowplow', 'https://snowplowanalytics.com/', target: '_blank', rel: 'noopener noreferrer').html_safe, link_start: link_start, link_end: '</a>'.html_safe }
+    %p.gl-text-secondary
+      - help_link = link_to('', help_page_path('development/snowplow/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
     = 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 b56ca12baec..61ec841bb83 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -7,7 +7,7 @@
       = _('Sourcegraph')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %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 }
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 ed809c6db52..4521f5bc0d9 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -5,7 +5,7 @@
       = _('Customer experience improvement and third-party offers')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Control whether to display customer experience improvement content and third-party offers in GitLab.')
   .settings-content
     = 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|
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 91cd6fe7ca0..0455394444c 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -36,7 +36,7 @@
         label_options: { id: 'service_ping_features_label' }
       .form-text.gl-text-gray-500.gl-pl-6
         %p.gl-mb-3= s_('AdminSettings|Registration Features include:')
-        - email_from_gitlab_path = help_page_path('user/admin_area/email_from_gitlab')
+        - email_from_gitlab_path = help_page_path('administration/email_from_gitlab')
         - repo_size_limit_path = help_page_path('administration/settings/account_and_limit_settings', anchor: 'repository-size-limit')
         - restrict_ip_path = help_page_path('user/group/access_and_permissions', anchor: 'restrict-group-access-by-ip-address')
         - email_from_gitlab_link = link_start % { url: email_from_gitlab_path }
diff --git a/app/views/admin/application_settings/appearances/_form.html.haml b/app/views/admin/application_settings/appearances/_form.html.haml
index fb5c320268e..672af002e5e 100644
--- a/app/views/admin/application_settings/appearances/_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_form.html.haml
@@ -3,146 +3,143 @@
 = gitlab_ui_form_for @appearance, url: admin_application_settings_appearances_path, html: { class: 'gl-mt-3' } do |f|
   = form_errors(@appearance)
 
-  .row
-    .col-lg-4
-      %h4.gl-mt-0= _('Navigation bar')
-
-    .col-lg-8
-      .form-group
-        = f.label :header_logo, _('Header logo'), class: 'col-form-label  gl-pt-0'
-        %p
-          - if @appearance.header_logo?
-            = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
-            - if @appearance.persisted?
-              %br
-              = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: header_logos_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Header logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove header logo') } }) do
-                = _('Remove header logo')
-            %hr
-          = f.hidden_field :header_logo_cache
-          = f.file_field :header_logo, class: "", accept: 'image/*'
-          .form-text.text-muted
-            = _('Maximum file size is 1MB. Pages are optimized for a 24px tall header logo')
-  %hr
-  .row
-    .col-lg-4
-      %h4.gl-mt-0 Favicon
-
-    .col-lg-8
-      .form-group
-        = f.label :favicon, _('Favicon'), class: 'col-form-label  gl-pt-0'
-        %p
-          - if @appearance.favicon?
-            = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
-            - if @appearance.persisted?
-              %br
-              = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: favicon_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Favicon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove favicon') } }) do
-                = _('Remove favicon')
-            %hr
-          = f.hidden_field :favicon_cache
-          = f.file_field :favicon, class: '', accept: 'image/*'
-          .form-text.text-muted
-            = _("Maximum file size is 1 MB. Image size must be 32 x 32 pixels. Allowed image formats are %{favicon_extension_allowlist}.") % { favicon_extension_allowlist: favicon_extension_allowlist }
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0= _('Navigation bar')
+
+    .form-group
+      = f.label :header_logo, _('Header logo'), class: 'col-form-label  gl-pt-0'
+      %p
+        - if @appearance.header_logo?
+          = image_tag @appearance.header_logo_path, class: 'appearance-light-logo-preview'
+          - if @appearance.persisted?
+            %br
+            = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: header_logos_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Header logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove header logo') } }) do
+              = _('Remove header logo')
+          %hr
+        = f.hidden_field :header_logo_cache
+        = f.file_field :header_logo, class: "", accept: 'image/*'
+        .form-text.text-muted
+          = _('Maximum file size is 1MB. Pages are optimized for a 24px tall header logo')
+
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0 Favicon
+
+    .form-group
+      = f.label :favicon, _('Favicon'), class: 'col-form-label  gl-pt-0'
+      %p
+        - if @appearance.favicon?
+          = image_tag @appearance.favicon_path, class: 'appearance-light-logo-preview'
+          - if @appearance.persisted?
             %br
-            = _("Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.")
+            = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: favicon_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Favicon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove favicon') } }) do
+              = _('Remove favicon')
+          %hr
+        = f.hidden_field :favicon_cache
+        = f.file_field :favicon, class: '', accept: 'image/*'
+        .form-text.text-muted
+          = _("Maximum file size is 1 MB. Image size must be 32 x 32 pixels. Allowed image formats are %{favicon_extension_allowlist}.") % { favicon_extension_allowlist: favicon_extension_allowlist }
+          %br
+          = _("Images with incorrect dimensions are not resized automatically, and may result in unexpected behavior.")
 
   = render partial: 'admin/application_settings/appearances/system_header_footer_form', locals: { form: f }
 
-  %hr
-  .row
-    .col-lg-4
-      %h4.gl-mt-0= _('Sign in/Sign up pages')
-
-    .col-lg-8
-      .form-group
-        = f.label :title, class: 'col-form-label'
-        = f.text_field :title, class: "form-control gl-form-input"
-      .form-group
-        = f.label :description, class: 'col-form-label'
-        = f.text_area :description, class: "form-control gl-form-input", rows: 10
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0= _('Sign in/Sign up pages')
+
+    .form-group
+      = f.label :title, class: 'col-form-label'
+      = f.text_field :title, class: "form-control gl-form-input"
+    .form-group
+      = f.label :description, class: 'col-form-label'
+      = f.text_area :description, class: "form-control gl-form-input", rows: 10
+      .form-text.text-muted
+        = parsed_with_gfm
+    .form-group
+      = f.label :logo, class: 'col-form-label  gl-pt-0'
+      %p
+        - if @appearance.logo?
+          = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
+          - if @appearance.persisted?
+            %br
+            = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: logo_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove logo') } }) do
+              = _('Remove logo')
+          %hr
+        = f.hidden_field :logo_cache
+        = f.file_field :logo, class: "", accept: 'image/*'
+        .form-text.text-muted
+          = _('Maximum file size is 1 MB. Pages are optimized for a 128x128 px logo.')
+
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0= _('Progressive Web App (PWA)')
+
+    .form-group
+      = f.label _("Name"), class: 'col-form-label'
+      = f.text_field :pwa_name, class: "form-control gl-form-input"
+    .form-group
+      = f.label _("Short name"), class: 'col-form-label'
+      = f.text_field :pwa_short_name, class: "form-control gl-form-input"
+    .form-group
+      = f.label _("Description"), class: 'col-form-label'
+      = f.text_area :pwa_description, class: "form-control gl-form-input", rows: 10
+      .form-text.text-muted
+        = parsed_with_gfm
+    .form-group
+      = f.label :pwa_icon, class: 'col-form-label  gl-pt-0'
+      %p
+        - if @appearance.pwa_icon?
+          = image_tag @appearance.pwa_icon_path, class: 'appearance-pwa-icon-preview'
+          - if @appearance.persisted?
+            %br
+            = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: pwa_icon_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Icon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove icon') } }) do
+              = _('Remove icon')
+          %hr
+        = f.hidden_field :pwa_icon_cache
+        = f.file_field :pwa_icon, class: "", accept: 'image/*'
+        .form-text.text-muted
+          = _('Maximum file size is 1MB.')
+
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0= _('New project pages')
+
+    .form-group
+      = f.label :new_project_guidelines, class: 'col-form-label'
+      %p
+        = f.text_area :new_project_guidelines, class: "form-control gl-form-input", rows: 10
         .form-text.text-muted
           = parsed_with_gfm
-      .form-group
-        = f.label :logo, class: 'col-form-label  gl-pt-0'
-        %p
-          - if @appearance.logo?
-            = image_tag @appearance.logo_path, class: 'appearance-logo-preview'
-            - if @appearance.persisted?
-              %br
-              = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: logo_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Logo will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove logo') } }) do
-                = _('Remove logo')
-            %hr
-          = f.hidden_field :logo_cache
-          = f.file_field :logo, class: "", accept: 'image/*'
-          .form-text.text-muted
-            = _('Maximum file size is 1 MB. Pages are optimized for a 128x128 px logo.')
-
-  %hr
-  .row
-    .col-lg-4
-      %h4.gl-mt-0= _('Progressive Web App (PWA)')
-
-    .col-lg-8
-      .form-group
-        = f.label _("Name"), class: 'col-form-label'
-        = f.text_field :pwa_name, class: "form-control gl-form-input"
-      .form-group
-        = f.label _("Short name"), class: 'col-form-label'
-        = f.text_field :pwa_short_name, class: "form-control gl-form-input"
-      .form-group
-        = f.label _("Description"), class: 'col-form-label'
-        = f.text_area :pwa_description, class: "form-control gl-form-input", rows: 10
+
+  .settings-section
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0= _('Profile image guideline')
+
+    .form-group
+      = f.label :profile_image_guidelines, class: 'col-form-label'
+      %p
+        = f.text_area :profile_image_guidelines, class: "form-control gl-form-input", rows: 10
         .form-text.text-muted
           = parsed_with_gfm
-      .form-group
-        = f.label :pwa_icon, class: 'col-form-label  gl-pt-0'
-        %p
-          - if @appearance.pwa_icon?
-            = image_tag @appearance.pwa_icon_path, class: 'appearance-pwa-icon-preview'
-            - if @appearance.persisted?
-              %br
-              = render Pajamas::ButtonComponent.new(variant: :danger, category: :secondary, size: :small, method: :delete, href: pwa_icon_admin_application_settings_appearances_path, button_options: { data: { confirm: _("Icon will be removed. Are you sure?"), confirm_btn_variant: "danger" }, aria: { label: _('Remove icon') } }) do
-                = _('Remove icon')
-            %hr
-          = f.hidden_field :pwa_icon_cache
-          = f.file_field :pwa_icon, class: "", accept: 'image/*'
-          .form-text.text-muted
-            = _('Maximum file size is 1MB.')
-
-  %hr
-  .row
-    .col-lg-4
-      %h4.gl-mt-0= _('New project pages')
-
-    .col-lg-8
-      .form-group
-        = f.label :new_project_guidelines, class: 'col-form-label'
-        %p
-          = f.text_area :new_project_guidelines, class: "form-control gl-form-input", rows: 10
-          .form-text.text-muted
-            = parsed_with_gfm
-
-  %hr
-  .row
-    .col-lg-4
-      %h4.gl-mt-0= _('Profile image guideline')
-
-    .col-lg-8
-      .form-group
-        = f.label :profile_image_guidelines, class: 'col-form-label'
-        %p
-          = f.text_area :profile_image_guidelines, class: "form-control gl-form-input", rows: 10
-          .form-text.text-muted
-            = parsed_with_gfm
-
-      .gl-mt-3.gl-mb-3
-        = f.submit _('Update appearance settings'), pajamas_button: true
-        - if @appearance.persisted? || @appearance.updated_at
-          .mt-4
-            - if @appearance.persisted?
-              Preview last save:
-              = link_to _('Sign-in page'), preview_sign_in_admin_application_settings_appearances_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
-              = link_to _('New project page'), new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
-
-            - if @appearance.updated_at
-              %span.float-right
-                Last edit #{time_ago_with_tooltip(@appearance.updated_at)}
+
+  - if @appearance.persisted? || @appearance.updated_at
+    .settings-section
+      - if @appearance.persisted?
+        Preview last save:
+        = link_to _('Sign-in page'), preview_sign_in_admin_application_settings_appearances_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('New project page'), new_project_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
+
+      - if @appearance.updated_at
+        %span.float-right
+          Last edit #{time_ago_with_tooltip(@appearance.updated_at)}
+
+  .settings-sticky-footer
+    = f.submit _('Update appearance settings'), pajamas_button: true
diff --git a/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml b/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
index 2ca037db532..61df5f5fd0d 100644
--- a/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
+++ b/app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml
@@ -1,30 +1,29 @@
 - form = local_assigns.fetch(:form)
 
-%hr
-.row
-  .col-lg-4
-    %h4.gl-mt-0
-      = _('System header and footer')
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
+        = _('System header and footer')
 
-  .col-lg-8
-    .form-group
-      = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
-      = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
-    .form-group
-      = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
-      = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
-    .form-group
-      = form.gitlab_ui_checkbox_component :email_header_and_footer_enabled,
-        _('Enable header and footer in emails'),
-        help_text: _('Add header and footer to emails. Please note that color settings will only be applied within the application interface'),
-        label_options: { class: 'gl-font-weight-bold!' }
+  .form-group
+    = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
+    = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
+  .form-group
+    = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
+    = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
+  .form-group
+    = form.gitlab_ui_checkbox_component :email_header_and_footer_enabled,
+      _('Enable header and footer in emails'),
+      help_text: _('Add header and footer to emails. Please note that color settings will only be applied within the application interface'),
+      label_options: { class: 'gl-font-weight-bold!' }
 
-    .form-group.js-toggle-colors-container
-      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-toggle-colors-link' }) do
-        = _('Customize colors')
-    .form-group.js-toggle-colors-container.hide
-      = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
-      = form.color_field :message_background_color, class: "form-control gl-form-input"
-    .form-group.js-toggle-colors-container.hide
-      = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
-      = form.color_field :message_font_color, class: "form-control gl-form-input"
+  .form-group.js-toggle-colors-container
+    = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'js-toggle-colors-link' }) do
+      = _('Customize colors')
+  .form-group.js-toggle-colors-container.hide
+    = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
+    = form.color_field :message_background_color, class: "form-control gl-form-input"
+  .form-group.js-toggle-colors-container.hide
+    = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
+    = form.color_field :message_font_color, class: "form-control gl-form-input"
diff --git a/app/views/admin/application_settings/ci/_header.html.haml b/app/views/admin/application_settings/ci/_header.html.haml
index 9e8caf0e0b7..1124277d5b3 100644
--- a/app/views/admin/application_settings/ci/_header.html.haml
+++ b/app/views/admin/application_settings/ci/_header.html.haml
@@ -6,15 +6,6 @@
 = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
   = expanded ? _('Collapse') : _('Expand')
 
-%p
+%p.gl-text-secondary
   = _('Variables store information, like passwords and secret keys, that you can use in job scripts. All projects on the instance can use these variables.')
   = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'for-an-instance'), target: '_blank', rel: 'noopener noreferrer'
-%p
-  = _('Variables can be:')
-%ul
-  %li
-    = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or protected tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-    = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
-  %li
-    = html_escape(_('%{code_open}Masked:%{code_close} Hidden in job logs. Must match masking requirements.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
-    = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index a9a16f72ebe..addd23688b4 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -7,10 +7,20 @@
   .settings-header
     = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
   .settings-content
+    %p
+      = _('Variables can be:')
+    %ul
+      %li
+        = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or protected tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+        = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
+      %li
+        = html_escape(_('%{code_open}Masked:%{code_close} Hidden in job logs. Must match masking requirements.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
+        = link_to _('Learn more.'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
+
     - if ci_variable_protected_by_default?
-      %p.settings-message.text-center
-        - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable') }
-        = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+      %p.settings-message.text-center.gl-mb-0
+        - help_link = link_to('', help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable', target: '_blank', rel: 'noopener noreferrer'))
+        = safe_format(s_('Environment variables on this GitLab instance are configured to be %{help_link_start}protected%{help_link_end} by default.'), tag_pair(help_link, :help_link_start, :help_link_end))
     #js-instance-variables{ data: { endpoint: admin_ci_variables_path, maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
 
 %section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded_by_default?) }
@@ -19,7 +29,7 @@
       = _('Continuous Integration and Deployment')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Customize CI/CD settings, including Auto DevOps, shared runners, and job artifacts.')
   = render 'ci_cd'
 
@@ -34,7 +44,7 @@
         = _('Container Registry')
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded_by_default? ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _('Various container registry settings.')
     .settings-content
       = render 'registry'
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 2d56e9dd0dd..6ae9c58ffcd 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -9,7 +9,7 @@
       = _('Visibility and access controls')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set visibility of project contents. Configure import sources and Git access protocols.')
   .settings-content
     = render 'visibility_and_access'
@@ -20,20 +20,18 @@
       = _('Account and limit')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set projects and maximum size limits, session duration, user options, and check feature availability for namespace plan.')
   .settings-content
     = render 'account_and_limit'
 
-= render_if_exists 'admin/application_settings/free_user_cap'
-
 %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
+    %p.gl-text-secondary
       = _('Set size limits for displaying diffs in the browser.')
   .settings-content
     = render 'diff_limits'
@@ -44,7 +42,7 @@
       = _('Sign-up restrictions')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure the way a user creates a new account.')
   .settings-content
     = render 'signup'
@@ -55,9 +53,9 @@
       = _('Sign-in restrictions')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set sign-in restrictions for all users.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/sign_in_restrictions.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/sign_in_restrictions.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'signin'
 
@@ -67,14 +65,15 @@
       = _('Terms of Service and Privacy Policy')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %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('user/admin_area/settings/terms.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/terms.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = 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?) }
@@ -83,7 +82,7 @@
       = _('Web terminal')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %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.md', anchor: 'web-terminals-deprecated'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/admin/application_settings/metrics_and_profiling.html.haml b/app/views/admin/application_settings/metrics_and_profiling.html.haml
index 8bc5d5cbaa6..4739a204147 100644
--- a/app/views/admin/application_settings/metrics_and_profiling.html.haml
+++ b/app/views/admin/application_settings/metrics_and_profiling.html.haml
@@ -11,7 +11,7 @@
       = _('Metrics - Prometheus')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Monitor GitLab with Prometheus.')
   .settings-content
     = render 'prometheus'
@@ -22,7 +22,7 @@
       = _('Metrics - Grafana')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %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'
 
@@ -35,7 +35,7 @@
       = _('Profiling - Performance bar')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %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
@@ -47,7 +47,7 @@
       = _('Usage statistics')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Enable or disable version check and Service Ping.')
   .settings-content
     = render 'usage'
@@ -59,7 +59,7 @@
         = _('Sentry')
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded_by_default? ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _('Configure Sentry integration for error tracking')
     .settings-content
       = render 'sentry'
diff --git a/app/views/admin/application_settings/network.html.haml b/app/views/admin/application_settings/network.html.haml
index 3b9fb930fd7..9ccfc6cbc0a 100644
--- a/app/views/admin/application_settings/network.html.haml
+++ b/app/views/admin/application_settings/network.html.haml
@@ -9,7 +9,7 @@
       = _('Performance optimization')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Various settings that affect GitLab performance.')
   .settings-content
     = render 'performance'
@@ -20,9 +20,9 @@
       = _('User and IP rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set limits for web and API requests.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/user_and_ip_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/user_and_ip_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'ip_limits'
 
@@ -32,9 +32,9 @@
       = _('Package registry rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set rate limits for package registry API requests that supersede the general user and IP rate limits.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/package_registry_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/package_registry_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render partial: 'network_rate_limits', locals: { anchor: 'js-packages-limits-settings', setting_fragment: 'packages_api' }
 
@@ -44,7 +44,7 @@
       = _('Files API Rate Limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure specific limits for Files API requests that supersede the general user and IP rate limits.')
   .settings-content
     = render partial: 'network_rate_limits', locals: { anchor: 'js-files-limits-settings', setting_fragment: 'files_api' }
@@ -55,7 +55,7 @@
       = _('Search rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set rate limits for searches performed by web or API requests.')
   .settings-content
     = render 'search_limits'
@@ -66,9 +66,9 @@
       = _('Deprecated API rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure specific limits for deprecated API requests that supersede the general user and IP rate limits.')
-      = link_to _('Which API requests are affected?'), help_page_path('user/admin_area/settings/deprecated_api_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Which API requests are affected?'), help_page_path('administration/settings/deprecated_api_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render partial: 'network_rate_limits', locals: { anchor: 'js-deprecated-limits-settings', setting_fragment: 'deprecated_api' }
 
@@ -78,9 +78,9 @@
       = _('Git LFS Rate Limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure specific limits for Git LFS requests that supersede the general user and IP rate limits.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/git_lfs_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/git_lfs_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'git_lfs_limits'
 
@@ -94,7 +94,7 @@
 
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('OutboundRequests|Allow requests to the local network from hooks and integrations.')
       = link_to _('Learn more.'), help_page_path('security/webhooks.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -106,9 +106,9 @@
       = _('Protected paths')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Rate limit access to specified paths.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/protected_paths.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/protected_paths.md'), target: '_blank', rel: 'noopener noreferrer'
 
   .settings-content
     = render 'protected_paths'
@@ -119,9 +119,9 @@
       = _('Issues Rate Limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Limit the number of issues and epics per minute a user can create through web and API requests.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_issues_creation.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limit_on_issues_creation.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'issue_limits'
 
@@ -131,9 +131,9 @@
       = _('Notes rate limit')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set the per-user rate limit for notes created by web or API requests.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_notes_creation.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limit_on_notes_creation.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'note_limits'
 
@@ -143,9 +143,9 @@
       = _('Users API rate limit')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set the per-user rate limit for getting a user by ID via the API.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_users_api.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limit_on_users_api.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'users_api_limits'
 
@@ -157,9 +157,9 @@
       = _('Import and export rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set per-user rate limits for imports and exports of projects and groups.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/import_export_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/import_export_rate_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'import_export_limits'
 
@@ -169,9 +169,9 @@
       = _('Pipeline creation rate limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Limit the number of pipeline creation requests per minute. This limit includes pipelines created through the UI, the API, and by background processing.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/rate_limit_on_pipelines_creation.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/rate_limit_on_pipelines_creation.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'pipeline_limits'
 
diff --git a/app/views/admin/application_settings/preferences.html.haml b/app/views/admin/application_settings/preferences.html.haml
index ab59e05c10f..bea399ee926 100644
--- a/app/views/admin/application_settings/preferences.html.haml
+++ b/app/views/admin/application_settings/preferences.html.haml
@@ -9,7 +9,7 @@
       = _('Email')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Various email settings.')
   .settings-content
     = render 'email'
@@ -20,7 +20,7 @@
       = _("What's new")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Configure %{italic_start}What's new%{italic_end} drawer and content.").html_safe % { italic_start: '<i>'.html_safe, italic_end: '</i>'.html_safe }
   .settings-content
     = render 'whats_new'
@@ -31,9 +31,9 @@
       = _('Sign-in and Help page')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Additional text for the sign-in and Help page.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/settings/help_page.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/settings/help_page.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'help_page'
 
@@ -43,7 +43,7 @@
       = _('Pages')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('AdminSettings|Size and domain settings for Pages static sites.')
   .settings-content
     = render 'pages'
@@ -54,7 +54,7 @@
       = _('Polling interval multiplier')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Adjust how frequently the GitLab UI polls for updates.')
       = link_to _('Learn more.'), help_page_path('administration/polling.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -66,10 +66,10 @@
       = _('Gitaly timeouts')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure Gitaly timeouts.')
       %span
-        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/gitaly_timeouts.md'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('Learn more.'), help_page_path('administration/settings/gitaly_timeouts.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'gitaly'
 
@@ -79,7 +79,7 @@
       = _('Localization')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure the default first day of the week, time tracking units, and default language.')
   .settings-content
     = render 'localization'
@@ -90,10 +90,10 @@
       = _('Sidekiq job size limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Limit the size of Sidekiq jobs stored in Redis.')
       %span
-        = link_to _('Learn more.'), help_page_path('user/admin_area/settings/sidekiq_job_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('Learn more.'), help_page_path('administration/settings/sidekiq_job_limits.md'), target: '_blank', rel: 'noopener noreferrer'
 
   .settings-content
     = render 'sidekiq_job_limits'
@@ -104,8 +104,8 @@
       = s_('TerraformLimits|Terraform limits')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('TerraformLimits|Limits for Terraform features')
-      = link_to s_('TerraformLimits|Learn more about Terraform limits.'), help_page_path('user/admin_area/settings/terraform_limits.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to s_('TerraformLimits|Learn more about Terraform limits.'), help_page_path('administration/settings/terraform_limits.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'terraform_limits'
diff --git a/app/views/admin/application_settings/reporting.html.haml b/app/views/admin/application_settings/reporting.html.haml
index 6ea2fb80505..91fabb505c2 100644
--- a/app/views/admin/application_settings/reporting.html.haml
+++ b/app/views/admin/application_settings/reporting.html.haml
@@ -9,7 +9,7 @@
       = _('Spam and Anti-bot Protection')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure CAPTCHAs, IP address limits, and other anti-spam measures.')
   .settings-content
     = render 'spam'
@@ -23,9 +23,9 @@
       = _('Abuse reports')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Receive notification of abuse reports by email.')
-      = link_to _('Learn more.'), help_page_path('user/admin_area/review_abuse_reports.md'), target: '_blank', rel: 'noopener noreferrer'
+      = link_to _('Learn more.'), help_page_path('administration/review_abuse_reports.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = render 'abuse'
 
diff --git a/app/views/admin/application_settings/repository.html.haml b/app/views/admin/application_settings/repository.html.haml
index 1907544ea14..c7a2fca00ef 100644
--- a/app/views/admin/application_settings/repository.html.haml
+++ b/app/views/admin/application_settings/repository.html.haml
@@ -9,7 +9,7 @@
       = _('Default branch')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('AdminSettings|Set the initial name and protections for the default branch of new repositories created in the instance.')
   .settings-content
     = render 'default_branch'
@@ -20,7 +20,7 @@
       = _('Repository mirroring')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? 'Collapse' : 'Expand'
-    %p
+    %p.gl-text-secondary
       = _('Configure repository mirroring.')
       = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -32,7 +32,7 @@
       = _('Repository storage')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure repository storage.')
       = link_to _('Learn more.'), help_page_path('administration/repository_storage_paths.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -44,7 +44,7 @@
       = _('Repository maintenance')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - repository_checks_link_url = help_page_path('administration/repository_checks.md')
       - repository_checks_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: repository_checks_link_url }
       - housekeeping_link_url = help_page_path('administration/housekeeping.md')
@@ -59,7 +59,7 @@
       = _('External storage for repository static objects')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Serve repository static objects (for example, archives and blobs) from external storage.')
       = link_to _('Learn more.'), help_page_path('administration/static_objects_external_storage.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/admin/application_settings/service_usage_data.html.haml b/app/views/admin/application_settings/service_usage_data.html.haml
index 634d006e736..9f73099465c 100644
--- a/app/views/admin/application_settings/service_usage_data.html.haml
+++ b/app/views/admin/application_settings/service_usage_data.html.haml
@@ -23,9 +23,7 @@
       title: _('Service Ping payload not found in the application cache')) do |c|
 
       - c.with_body do
-        - enable_service_ping_link_url = help_page_path('administration/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics')
-        - enable_service_ping_link = '<a href="%{url}">'.html_safe % { url: enable_service_ping_link_url }
-        - generate_manually_link_url = help_page_path('development/internal_analytics/service_ping/troubleshooting', anchor: 'generate-service-ping')
-        - generate_manually_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: generate_manually_link_url }
+        - enable_service_ping_link = link_to('', help_page_path('administration/settings/usage_statistics', anchor: 'enable-or-disable-usage-statistics'), target: '_blank', rel: 'noopener noreferrer')
+        - generate_manually_link = link_to('', help_page_path('development/internal_analytics/service_ping/troubleshooting', anchor: 'generate-service-ping'), target: '_blank', rel: 'noopener noreferrer')
 
-        = html_escape(s_('%{enable_service_ping_link_start}Enable%{link_end} or %{generate_manually_link_start}generate%{link_end} Service Ping to preview and download service usage data payload.')) % { enable_service_ping_link_start: enable_service_ping_link, generate_manually_link_start: generate_manually_link, link_end: '</a>'.html_safe }
+        = safe_format(s_('%{enable_service_ping_link_start}Enable%{enable_service_ping_link_end} or %{generate_manually_link_start}generate%{generate_manually_link_end} Service Ping to preview and download service usage data payload.'), tag_pair(enable_service_ping_link, :enable_service_ping_link_start, :enable_service_ping_link_end), tag_pair(generate_manually_link, :generate_manually_link_start, :generate_manually_link_end))
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index e32a50e252d..6846fe8f4aa 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -1,52 +1,51 @@
 - page_title s_('AdminArea|Instance OAuth applications')
 
-%h1.page-title.gl-font-size-h-display
-  = s_('AdminArea|Instance OAuth applications')
-%p.light
-  - docs_link_path = help_page_path('integration/oauth_provider')
-  - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
-  = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper.gl-flex-direction-column
+      %h3.gl-new-card-title
+        =  s_('AdminArea|Instance OAuth applications')
+        .gl-new-card-count
+          = sprite_icon('applications', css_class: 'gl-mr-2')
+          = @applications.size
+      %p.gl-new-card-description
+        - docs_link_path = help_page_path('integration/oauth_provider')
+        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
+        = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
 
-- if @applications.empty?
-  %section.empty-state.gl-text-center.gl-display-flex.gl-flex-direction-column
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-admin-apps-md.svg', class: 'gl-max-w-full'
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, href: new_admin_application_path, button_options: { data: { qa_selector: 'new_application_button' } }) do
+        = _('Add new application')
+  - c.with_body do
+    - if @applications.empty?
+      %section.empty-state.gl-my-5.gl-text-center.gl-display-flex.gl-flex-direction-column
+        .svg-content.svg-150
+          = image_tag 'illustrations/empty-state/empty-admin-apps-md.svg', class: 'gl-max-w-full'
 
-    .gl-max-w-full.gl-m-auto
-      %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
-      = render Pajamas::ButtonComponent.new(href: new_admin_application_path, variant: :confirm, button_options: { data: { qa_selector: 'new_application_button' } }) do
-        = _('New application')
-
-- else
-  %hr
-    = render Pajamas::ButtonComponent.new(href: new_admin_application_path, variant: :confirm, button_options: { data: { qa_selector: 'new_application_button' } }) do
-      = _('New application')
-
-  .table-responsive
-    %table.b-table.gl-table.gl-w-full{ role: 'table' }
-      %thead
-        %tr
-          %th
-            = _('Name')
-          %th
-            = _('Callback URL')
-          %th
-            = _('Trusted')
-          %th
-            = _('Confidential')
-          %th
-          %th
-      %tbody.oauth-applications
-        - @applications.each do |application|
-          %tr{ id: "application_#{application.id}" }
-            %td= link_to application.name, admin_application_path(application)
-            %td= application.redirect_uri
-            %td= application.trusted? ? _('Yes'): _('No')
-            %td= application.confidential? ? _('Yes'): _('No')
-            %td
-              = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), variant: :link) do
-                = _('Edit')
-            %td= render 'delete_form', application: application
+        .gl-max-w-full.gl-m-auto
+          %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
+          %p.gl-text-secondary.gl-mt-3= s_('AdminArea|Manage applications for your instance that can use GitLab as an OAuth provider, start by creating a new one above.')
+    - else
+      .table-holder
+        %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+          %thead
+            %tr
+              %th= _('Name')
+              %th= _('Callback URL')
+              %th= _('Trusted')
+              %th= _('Confidential')
+              %th= _('Actions')
+          %tbody.oauth-applications
+            - @applications.each do |application|
+              %tr{ id: "application_#{application.id}" }
+                %td{ data: { label: _('Name') } }= link_to application.name, admin_application_path(application)
+                %td{ data: { label: _('Callback URL') } }= application.redirect_uri
+                %td{ data: { label: _('Trusted') } }= application.trusted? ? _('Yes'): _('No')
+                %td{ data: { label: _('Confidential') } }= application.confidential? ? _('Yes'): _('No')
+                %td{ data: { label: _('Actions') } }
+                  = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), size: :small, button_options: { class: 'gl-mr-3' }) do
+                    = _('Edit')
+                  = render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
 
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index a03d6cb5a94..3d73b255a5e 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -1,11 +1,9 @@
 - page_title _('New Deploy Key')
 %h1.page-title.gl-font-size-h-display= _('New public deploy key')
-%hr
 
-%div
-  = gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
-    = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
-    .form-actions
-      = f.submit 'Create', data: { qa_selector: "add_deploy_key_button" }, pajamas_button: true
-      = render Pajamas::ButtonComponent.new(href: admin_deploy_keys_path) do
-        = _('Cancel')
+= gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
+  = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
+  .gl-display-flex.gl-mt-6.gl-gap-3
+    = f.submit 'Create', data: { qa_selector: "add_deploy_key_button" }, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(href: admin_deploy_keys_path) do
+      = _('Cancel')
diff --git a/app/views/admin/health_check/show.html.haml b/app/views/admin/health_check/show.html.haml
index 662234bf56a..728c748d01a 100644
--- a/app/views/admin/health_check/show.html.haml
+++ b/app/views/admin/health_check/show.html.haml
@@ -12,7 +12,7 @@
       = _("Reset health check access token")
 %p.light
   #{ _('Health information can be retrieved from the following endpoints. More information is available') }
-  = link_to s_('More information is available|here'), help_page_path('user/admin_area/monitoring/health_check')
+  = link_to s_('More information is available|here'), help_page_path('administration/monitoring/health_check')
   %ul
     %li
       %code= readiness_url(token: Gitlab::CurrentSettings.health_check_access_token)
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
index 0208b8ad836..37dd0a68f47 100644
--- a/app/views/admin/impersonation_tokens/index.html.haml
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -6,11 +6,24 @@
 
 = render 'admin/users/head'
 
-.row.gl-mt-3
-  .col-lg-12
-    #js-new-access-token-app{ data: { access_token_type: type } }
+#js-new-access-token-app{ data: { access_token_type: type } }
 
-    = render 'shared/access_tokens/form',
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper.gl-flex-direction-column
+      %h3.gl-new-card-title
+        = _('Impersonation tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_impersonation_tokens.size
+      .gl-new-card-description
+        = _("To see all the user's personal access tokens you must impersonate them first.")
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
+        = _('Add new token')
+  - c.with_body do
+    .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+      = render 'shared/access_tokens/form',
         ajax: true,
         type: type,
         title: _('Add an impersonation token'),
@@ -20,4 +33,4 @@
         scopes: @scopes,
         help_path: help_page_path('api/rest/index', anchor: 'impersonation-tokens')
 
-    #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json, information: _("To see all the user's personal access tokens you must impersonate them first.") } }
+#js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_impersonation_tokens.to_json } }
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index e643ec040a1..3d392a86566 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -1,20 +1,23 @@
 - page_title _("Labels")
 
-.gl-sm-display-flex.gl-border-bottom-0.gl-mt-4.gl-lg-align-items-center
-  .gl-text-gray-600.gl-flex-grow-1
-    = s_('AdminLabels|Labels created here will be automatically added to new projects.')
-  .nav-controls.gl-mt-2.gl-sm-mt-0.gl-display-flex.gl-align-items-center
-    = render Pajamas::ButtonComponent.new(variant: :confirm,
-      href: new_admin_label_path) do
-      = _('New label')
-
-.labels.labels-container.admin-labels.js-admin-labels-container.gl-mt-4
-  .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10
-    .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
-      %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card labels other-labels js-toggle-container js-admin-labels-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper.gl-flex-direction-column
+      %h5.gl-new-card-title
         = _('Labels')
-    %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
-      - if @labels.present?
+        .gl-new-card-count
+          = sprite_icon('label', css_class: 'gl-mr-2')
+          %span.js-admin-labels-count= @labels.count
+      .gl-new-card-description
+        = s_('AdminLabels|Labels created here will be automatically added to new projects.')
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(variant: :default,
+        size: :small,
+        href: new_admin_label_path) do
+        = _('New label')
+  - c.with_body do
+    - if @labels.present?
+      %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
         = render @labels
     .js-admin-labels-empty-state{ class: ('gl-display-none' if @labels.present?) }
       %section.row.empty-state.gl-text-center
@@ -25,10 +28,7 @@
           .gl-mx-auto.gl-my-0.gl-p-5
             %h1.gl-font-size-h-display.gl-line-height-36.h4
               = s_('AdminLabels|Define your default set of project labels')
-            %p
+            %p.gl-text-secondary
               = s_('AdminLabels|They can be used to categorize issues and merge requests.')
-            .gl-display-flex.gl-flex-wrap.gl-justify-content-center
-              = render Pajamas::ButtonComponent.new(href: new_admin_label_path) do
-                = _('New label')
 
-  = paginate @labels, theme: 'gitlab'
+.gl-mt-5= paginate @labels, theme: 'gitlab'
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 0637b0eae47..85dce00752b 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -81,14 +81,20 @@
           - if @project.repository.exists?
             %li{ class: 'gl-px-5!' }
               %span.light
-                = _('Gitaly storage name:')
+                = s_('ProjectSettings|Storage name:')
               %strong
                 = @project.repository.storage
+              %br
+              %small.gl-text-secondary
+                = s_('ProjectSettings|For Gitaly, name of the storage that stores the repository. For Gitaly Cluster, name of the virtual storage that stores the repository.')
             %li{ class: 'gl-px-5!' }
               %span.light
-                = _('Gitaly relative path:')
+                = s_('ProjectSettings|Relative path:')
               %strong
                 = @project.repository.relative_path
+              %br
+              %small.gl-text-secondary
+                = s_('ProjectSettings|For Gitaly, location of data on the storage. For Gitaly Cluster, location of data on the virtual storage.')
 
             %li{ class: 'gl-px-5!' }
               = render 'shared/storage_counter_statistics', storage_size: @project.statistics&.storage_size, storage_details: @project.statistics
@@ -125,8 +131,10 @@
             %span.light
               = _('access:')
             %strong
-              %span{ class: visibility_level_color(@project.visibility_level) }
-                = visibility_level_icon(@project.visibility_level)
+              = visibility_level_content(@project, css_class: visibility_level_color(@project.visibility_level))
+              - if @project.created_and_owned_by_banned_user? && Feature.enabled?(:hide_projects_of_banned_users)
+                = _('This project is hidden because its creator has been banned')
+              - else
                 = visibility_level_label(@project.visibility_level)
 
     = render 'shared/custom_attributes', custom_attributes: @project.custom_attributes
diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
index 472ba2f84a0..4979f7e28e7 100644
--- a/app/views/admin/users/_access_levels.html.haml
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -1,49 +1,49 @@
-.gl-border-b.gl-pb-3.gl-mb-6
-  .row
-    .col-lg-4
-      %h4.gl-mt-0
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
         = s_('AdminUsers|Access')
-    .col-lg-8
-      .form-group.gl-form-group{ role: 'group' }
-        = f.label :projects_limit, class: 'gl-display-block col-form-label'
-        = f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control gl-form-input'
-
-      .form-group.gl-form-group{ role: 'group' }
-        = f.gitlab_ui_checkbox_component :can_create_group, s_('AdminUsers|Can create group')
-        = f.gitlab_ui_checkbox_component :private_profile, s_('AdminUsers|Private profile')
-
-      %fieldset.form-group.gl-form-group
-        %legend.col-form-label.col-form-label
-          = s_('AdminUsers|Access level')
-        - editing_current_user = (current_user == @user)
-
-        = f.gitlab_ui_radio_component :access_level, :regular,
-            s_('AdminUsers|Regular'),
-            radio_options: { disabled: editing_current_user },
-            help_text: s_('AdminUsers|Regular users have access to their groups and projects.')
-
-        = render_if_exists 'admin/users/auditor_access_level_radio', f: f, disabled: editing_current_user
-
-        - help_text = s_('AdminUsers|The user has unlimited access to all groups, projects, users, and features.')
-        - help_text += ' ' + s_('AdminUsers|You cannot remove your own administrator access.') if editing_current_user
-        = f.gitlab_ui_radio_component :access_level, :admin,
-            s_('AdminUsers|Administrator'),
-            radio_options: { disabled: editing_current_user },
-            help_text: help_text
-
-      .form-group.gl-form-group{ role: 'group' }
-        = f.gitlab_ui_checkbox_component :external,
-          s_('AdminUsers|External'),
-          help_text: s_('AdminUsers|External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects, groups, or personal snippets.')
-        .hidden{ data: user_internal_regex_data }
-        .gl-display-flex.gl-align-items-baseline
-          %row.hidden#warning_external_automatically_set
-            = gl_badge_tag s_('AdminUsers|Automatically marked as default internal user'), variant: :warning
-
-      .form-group.gl-form-group{ role: 'group' }
-        - @user.credit_card_validation || @user.build_credit_card_validation
-        = f.fields_for :credit_card_validation do |ff|
-          = ff.gitlab_ui_checkbox_component :credit_card_validated_at,
-            s_('AdminUsers|Validate user account'),
-            help_text: s_('AdminUsers|A user can validate themselves by inputting a credit/debit card, or an admin can manually validate a user. Validated users can use free CI minutes on shared runners.'),
-            checkbox_options: { checked: @user.credit_card_validated_at.present? }
+
+  .form-group.gl-form-group{ role: 'group' }
+    = f.label :projects_limit, class: 'gl-display-block col-form-label'
+    = f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control gl-form-input gl-form-input-sm'
+
+  .form-group.gl-form-group{ role: 'group' }
+    = f.gitlab_ui_checkbox_component :can_create_group, s_('AdminUsers|Can create group')
+    = f.gitlab_ui_checkbox_component :private_profile, s_('AdminUsers|Private profile')
+
+  %fieldset.form-group.gl-form-group
+    %legend.col-form-label.col-form-label
+      = s_('AdminUsers|Access level')
+    - editing_current_user = (current_user == @user)
+
+    = f.gitlab_ui_radio_component :access_level, :regular,
+        s_('AdminUsers|Regular'),
+        radio_options: { disabled: editing_current_user },
+        help_text: s_('AdminUsers|Regular users have access to their groups and projects.')
+
+    = render_if_exists 'admin/users/auditor_access_level_radio', f: f, disabled: editing_current_user
+
+    - help_text = s_('AdminUsers|The user has unlimited access to all groups, projects, users, and features.')
+    - help_text += ' ' + s_('AdminUsers|You cannot remove your own administrator access.') if editing_current_user
+    = f.gitlab_ui_radio_component :access_level, :admin,
+        s_('AdminUsers|Administrator'),
+        radio_options: { disabled: editing_current_user },
+        help_text: help_text
+
+  .form-group.gl-form-group{ role: 'group' }
+    = f.gitlab_ui_checkbox_component :external,
+      s_('AdminUsers|External'),
+      help_text: s_('AdminUsers|External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects, groups, or personal snippets.')
+    .hidden{ data: user_internal_regex_data }
+    .gl-display-flex.gl-align-items-baseline
+      %row.hidden#warning_external_automatically_set
+        = gl_badge_tag s_('AdminUsers|Automatically marked as default internal user'), variant: :warning
+
+  .form-group.gl-form-group{ role: 'group' }
+    - @user.credit_card_validation || @user.build_credit_card_validation
+    = f.fields_for :credit_card_validation do |ff|
+      = ff.gitlab_ui_checkbox_component :credit_card_validated_at,
+        s_('AdminUsers|Validate user account'),
+        help_text: s_('AdminUsers|A user can validate themselves by inputting a credit/debit card, or an admin can manually validate a user. Validated users can use free CI minutes on shared runners.'),
+        checkbox_options: { checked: @user.credit_card_validated_at.present? }
diff --git a/app/views/admin/users/_admin_notes.html.haml b/app/views/admin/users/_admin_notes.html.haml
index dce008afb26..85796246c83 100644
--- a/app/views/admin/users/_admin_notes.html.haml
+++ b/app/views/admin/users/_admin_notes.html.haml
@@ -1,9 +1,9 @@
-.gl-mb-3
-  .row
-    .col-lg-4
-      %h4.gl-mt-0
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
         = _('Admin notes')
-    .col-lg-8
-      .form-group.gl-form-group{ role: 'group' }
-        = f.label :note, s_('Admin|Note')
-        = f.text_area :note, class: 'form-control gl-form-input gl-form-textarea'
+
+  .form-group.gl-form-group{ role: 'group' }
+    = f.label :note, s_('Admin|Note')
+    = f.text_area :note, class: 'form-control gl-form-input gl-form-textarea'
diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml
index 8822d52c3c0..ffe7e128d60 100644
--- a/app/views/admin/users/_form.html.haml
+++ b/app/views/admin/users/_form.html.haml
@@ -2,42 +2,42 @@
   = gitlab_ui_form_for [:admin, @user], html: { class: 'fieldset-form' } do |f|
     = form_errors(@user)
 
-    .gl-border-b.gl-pb-3.gl-mb-6
-      .row
-        .col-lg-4
-          %h4.gl-mt-0
+    .settings-section
+      .settings-sticky-header
+        .settings-sticky-header-inner
+          %h4.gl-my-0
             = _('Account')
-        .col-lg-8
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :name, _('Name'), class: 'gl-display-block col-form-label'
-            = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control gl-form-input'
-
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :username, _('Username'), class: 'gl-display-block col-form-label'
-            = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control gl-form-input'
-
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :email, _('Email'), class: 'gl-display-block col-form-label'
-            = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control gl-form-input'
-
-    .gl-border-b.gl-pb-3.gl-mb-6
-      .row
-        .col-lg-4
-          %h4.gl-mt-0
+
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :name, _('Name'), class: 'gl-display-block col-form-label'
+        = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control gl-form-input gl-form-input-lg'
+
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :username, _('Username'), class: 'gl-display-block col-form-label'
+        = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control gl-form-input gl-form-input-lg'
+
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :email, _('Email'), class: 'gl-display-block col-form-label'
+        = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control gl-form-input gl-form-input-lg'
+
+    .settings-section
+      .settings-sticky-header
+        .settings-sticky-header-inner
+          %h4.gl-my-0
             = _('Password')
-        .col-lg-8
-          - if @user.new_record?
-            = render Pajamas::AlertComponent.new(variant: :info, dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
-              - c.with_body do
-                = s_('AdminUsers|Reset link will be generated and sent to the user. User will be forced to set the password on first sign in.')
-          - else
-            .form-group.gl-form-group{ role: 'group' }
-              = f.label :password, _('Password'), class: 'gl-display-block col-form-label'
-              = f.password_field :password, disabled: f.object.force_random_password, autocomplete: 'new-password', class: 'form-control gl-form-input js-password-complexity-validation'
-              = render_if_exists 'shared/password_requirements_list'
-            .form-group.gl-form-group{ role: 'group' }
-              = f.label :password_confirmation, _('Password confirmation'), class: 'gl-display-block col-form-label'
-              = f.password_field :password_confirmation, disabled: f.object.force_random_password, autocomplete: 'new-password', class: 'form-control gl-form-input'
+
+      - if @user.new_record?
+        = render Pajamas::AlertComponent.new(variant: :info, dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
+          - c.with_body do
+            = s_('AdminUsers|Reset link will be generated and sent to the user. User will be forced to set the password on first sign in.')
+      - else
+        .form-group.gl-form-group{ role: 'group' }
+          = f.label :password, _('Password'), class: 'gl-display-block col-form-label'
+          = f.password_field :password, disabled: f.object.force_random_password, autocomplete: 'new-password', class: 'form-control gl-form-input js-password-complexity-validation gl-form-input-lg'
+          = render_if_exists 'shared/password_requirements_list'
+        .form-group.gl-form-group{ role: 'group' }
+          = f.label :password_confirmation, _('Password confirmation'), class: 'gl-display-block col-form-label'
+          = f.password_field :password_confirmation, disabled: f.object.force_random_password, autocomplete: 'new-password', class: 'form-control gl-form-input gl-form-input-lg'
 
     = render partial: 'access_levels', locals: { f: f }
 
@@ -45,42 +45,42 @@
 
     = render_if_exists 'admin/users/limits', f: f
 
-    .gl-border-b.gl-pb-6.gl-mb-6
-      .row
-        .col-lg-4
+    .settings-section
+      .settings-sticky-header
+        .settings-sticky-header-inner
           %h4.gl-mt-0
             = _('Profile')
-        .col-lg-8
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :avatar, s_('AdminUsers|Avatar'), class: 'gl-display-block col-form-label'
-            = f.file_field :avatar
 
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :skype, s_('AdminUsers|Skype'), class: 'gl-display-block col-form-label'
-            = f.text_field :skype, class: 'form-control gl-form-input'
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :avatar, s_('AdminUsers|Avatar'), class: 'gl-display-block col-form-label gl-form-input-lg'
+        = f.file_field :avatar
+
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :skype, s_('AdminUsers|Skype'), class: 'gl-display-block col-form-label'
+        = f.text_field :skype, class: 'form-control gl-form-input gl-form-input-lg'
 
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :linkedin, s_('AdminUsers|Linkedin'), class: 'gl-display-block col-form-label'
-            = f.text_field :linkedin, class: 'form-control gl-form-input'
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :linkedin, s_('AdminUsers|Linkedin'), class: 'gl-display-block col-form-label'
+        = f.text_field :linkedin, class: 'form-control gl-form-input gl-form-input-lg'
 
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :twitter, _('Twitter'), class: 'gl-display-block col-form-label'
-            = f.text_field :twitter, class: 'form-control gl-form-input'
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :twitter, _('Twitter'), class: 'gl-display-block col-form-label'
+        = f.text_field :twitter, class: 'form-control gl-form-input gl-form-input-lg'
 
-          .form-group.gl-form-group{ role: 'group' }
-            = f.label :website_url, s_('AdminUsers|Website URL'), class: 'gl-display-block col-form-label'
-            = f.text_field :website_url, class: 'form-control gl-form-input'
+      .form-group.gl-form-group{ role: 'group' }
+        = f.label :website_url, s_('AdminUsers|Website URL'), class: 'gl-display-block col-form-label'
+        = f.text_field :website_url, class: 'form-control gl-form-input gl-form-input-lg'
 
     = render_if_exists 'admin/users/custom_attributes', f: f
 
     = render 'admin/users/admin_notes', f: f
 
-    %div
+    .settings-sticky-footer
       - if @user.new_record?
-        = f.submit _('Create user'), pajamas_button: true
+        = f.submit _('Create user'), pajamas_button: true, class: 'gl-mr-3'
         = render Pajamas::ButtonComponent.new(href: admin_users_path) do
           = _('Cancel')
       - else
-        = f.submit _('Save changes'), pajamas_button: true
+        = f.submit _('Save changes'), pajamas_button: true, class: 'gl-mr-3'
         = render Pajamas::ButtonComponent.new(href: admin_user_path(@user)) do
           = _('Cancel')
diff --git a/app/views/ci/variables/_header.html.haml b/app/views/ci/variables/_header.html.haml
index dfcf8f39533..886edbd0687 100644
--- a/app/views/ci/variables/_header.html.haml
+++ b/app/views/ci/variables/_header.html.haml
@@ -6,5 +6,5 @@
 = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
   = expanded ? _('Collapse') : _('Expand')
 
-%p
+%p.gl-text-secondary
   = render "ci/variables/content", entity: @entity, variable_limit: @variable_limit
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 5eed4e92386..65f9e6c2342 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -23,16 +23,10 @@
   maskable_raw_regex: ci_variable_maskable_raw_regex,
   maskable_regex: ci_variable_maskable_regex,
   protected_by_default: ci_variable_protected_by_default?.to_s,
-  aws_logo_svg_path: image_path('aws_logo.svg'),
-  aws_tip_deploy_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'deploy-your-application-to-ecs'),
-  aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'use-an-image-to-run-aws-commands'),
-  aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md'),
   contains_variable_reference_link: help_page_path('ci/variables/index', anchor: 'prevent-cicd-variable-expansion'),
   masked_environment_variables_link: help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'),
   environment_scope_link: help_page_path('ci/environments/index', anchor: 'limit-the-environment-scope-of-a-cicd-variable') } }
 
 - if !@group && @project.group
-  .settings-header.border-top.gl-mt-6
-    = render 'ci/group_variables/header'
-  .settings-content.pr-0
-    = render 'ci/group_variables/index'
+  = render 'ci/group_variables/header'
+  = render 'ci/group_variables/index'
diff --git a/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml b/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
index 88da252f2bb..49b9c4c9ca6 100644
--- a/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
+++ b/app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml
@@ -1,11 +1,8 @@
 - logo_path = local_assigns.fetch(:logo_path)
 - help_path = local_assigns.fetch(:help_path)
 - label = local_assigns.fetch(:label)
-- last = local_assigns.fetch(:last, false)
-- classes = ["btn btn-confirm gl-button btn-confirm-secondary gl-flex-direction-column gl-flex-basis-third "]
-- conditional_classes = [("gl-mr-5" unless last)]
 
-= link_to help_path, class: classes + conditional_classes do
+= render Pajamas::ButtonComponent.new(variant: :confirm, category: :secondary, href: help_path, button_options: { class: "gl-flex-direction-column gl-flex-basis-third" }) do
   %span.gl-display-flex.gl-align-items-center.gl-m-3.gl-h-64
     = image_tag logo_path, alt: label, class: "gl-w-15 gl-max-h-full gl-max-w-full"
   %span.gl-white-space-normal
diff --git a/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml b/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
index 7039ce57bd9..49dab193da8 100644
--- a/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
+++ b/app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml
@@ -9,7 +9,7 @@
 .gl-py-5.gl-md-pl-5.gl-md-pr-5
   %h4.gl-mb-5
     = create_cluster_label
-  .gl-display-flex
+  .gl-display-flex.gl-gap-5
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
       locals: { label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg', help_path: eks_help_path }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
diff --git a/app/views/clusters/clusters/user/_form.html.haml b/app/views/clusters/clusters/user/_form.html.haml
index ed169b2bfd1..4ecef4b76ce 100644
--- a/app/views/clusters/clusters/user/_form.html.haml
+++ b/app/views/clusters/clusters/user/_form.html.haml
@@ -47,7 +47,7 @@
 
     .form-group
       .form-check
-        = platform_kubernetes_field.check_box :authorization_type, { data: { qa_selector: 'rbac_checkbox'}, inline: true, class: 'form-check-input' }, 'rbac', 'abac'
+        = platform_kubernetes_field.check_box :authorization_type, { inline: true, class: 'form-check-input' }, 'rbac', 'abac'
         = platform_kubernetes_field.label :authorization_type, s_('ClusterIntegration|RBAC-enabled cluster'), class: 'form-check-label label-bold'
       %small.form-text.text-muted
         = '%{help_text} %{help_link}'.html_safe % { help_text: rbac_help_text, help_link: rbac_help_link }
@@ -73,4 +73,4 @@
       = render('clusters/clusters/namespace', platform_field: platform_kubernetes_field)
 
   .form-group
-    = field.submit s_('ClusterIntegration|Add Kubernetes cluster'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'add_kubernetes_cluster_button' }
+    = field.submit s_('ClusterIntegration|Add Kubernetes cluster'), pajamas_button: true
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 62ca4a3bab6..2737dede0e9 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -4,7 +4,7 @@
   .page-title-controls.gl-display-flex.gl-align-items-center.gl-gap-5
     = link_to _("Explore groups"), explore_groups_path
     - if current_user.can_create_group?
-      = render Pajamas::ButtonComponent.new(href: new_group_path, variant: :confirm, button_options: { data: { qa_selector: "new_group_button", testid: "new-group-button" } }) do
+      = render Pajamas::ButtonComponent.new(href: new_group_path, variant: :confirm, button_options: { data: { testid: "new-group-button" } }) do
         = _("New group")
 
 .top-area.gl-py-3.gl-justify-content-end.gl-border-bottom-0
diff --git a/app/views/dashboard/projects/_starred_empty_state.html.haml b/app/views/dashboard/projects/_starred_empty_state.html.haml
index dafa3b4dc8d..f49960695f6 100644
--- a/app/views/dashboard/projects/_starred_empty_state.html.haml
+++ b/app/views/dashboard/projects/_starred_empty_state.html.haml
@@ -1,9 +1,5 @@
-.row.empty-state
-  .col-12
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-projects-starred-md.svg'
-    .text-content
-      %h4.gl-text-center
-        = s_("StarredProjectsEmptyState|You don't have starred projects yet.")
-      %p.gl-text-gray-500
-        = s_("StarredProjectsEmptyState|Visit a project page and press on a star icon. Then, you can find the project on this page.")
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-projects-starred-md.svg',
+  title: s_("StarredProjectsEmptyState|You don't have starred projects yet.")) do |c|
+
+  - c.with_description do
+    = s_("StarredProjectsEmptyState|Visit a project page and press on a star icon. Then, you can find the project on this page.")
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index e20fccc218a..1cd8015934e 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -48,6 +48,7 @@
             = first_line_in_markdown(todo, :body, 125, is_todo: true, project: todo.project, group: todo.group)
 
           = render_if_exists "dashboard/todos/diff_summary", local_assigns: { todo: todo }
+          = render_if_exists "dashboard/todos/review_summary", local_assigns: { todo: todo }
 
     .todo-timestamp.gl-white-space-nowrap.gl-sm-ml-3.gl-mt-2.gl-mb-2.gl-sm-my-0.gl-px-2.gl-sm-px-0
       %span.todo-timestamp.gl-font-sm.gl-text-secondary
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
index c22eeba2f01..1760e6e0f84 100644
--- a/app/views/devise/confirmations/almost_there.haml
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -8,6 +8,8 @@
   = render "layouts/bizible"
 = render "layouts/google_tag_manager_body"
 
+= render_if_exists 'devise/shared/delete_unconfirmed_users_flash'
+
 .well-confirmation.gl-text-center.gl-mb-6
   %h1.gl-mt-0
     = _("Almost there...")
diff --git a/app/views/devise/mailer/_confirmation_instructions_account.html.haml b/app/views/devise/mailer/_confirmation_instructions_account.html.haml
index c1655818770..ff5027b8464 100644
--- a/app/views/devise/mailer/_confirmation_instructions_account.html.haml
+++ b/app/views/devise/mailer/_confirmation_instructions_account.html.haml
@@ -1,9 +1,11 @@
 - confirmation_link = confirmation_url(@resource, confirmation_token: @token)
+
 - if @resource.unconfirmed_email.present? || !@resource.created_recently?
   #content
     = email_default_heading(@email)
     %p= _('Click the link below to confirm your email address.')
     #cta
+      = render_if_exists 'devise/shared/delete_unconfirmed_users'
       = link_to _('Confirm your email address'), confirmation_link
 - else
   #content
@@ -13,4 +15,5 @@
       = email_default_heading(_("Welcome, %{name}!") % { name: @resource.name })
     %p= _("To get started, click the link below to confirm your account.")
     #cta
+      = render_if_exists 'devise/shared/delete_unconfirmed_users'
       = link_to _('Confirm your account'), confirmation_link
diff --git a/app/views/devise/mailer/_confirmation_instructions_account.text.erb b/app/views/devise/mailer/_confirmation_instructions_account.text.erb
index 7e4f38885f6..7436da66e63 100644
--- a/app/views/devise/mailer/_confirmation_instructions_account.text.erb
+++ b/app/views/devise/mailer/_confirmation_instructions_account.text.erb
@@ -10,4 +10,6 @@
 <%= _('To get started, use the link below to confirm your account.') %>
 <% end %>
 
+<%= render_if_exists 'devise/shared/delete_unconfirmed_users_text' %>
+
 <%= confirmation_url(@resource, confirmation_token: @token) %>
diff --git a/app/views/devise/mailer/email_changed_gitlab_com.html.haml b/app/views/devise/mailer/email_changed_gitlab_com.html.haml
new file mode 100644
index 00000000000..de91418860d
--- /dev/null
+++ b/app/views/devise/mailer/email_changed_gitlab_com.html.haml
@@ -0,0 +1,11 @@
+= email_default_heading("Hello, #{@resource.name}!")
+
+- if @resource.try(:unconfirmed_email?)
+  %p
+    We're contacting you to notify you that your email is being changed to #{@resource.reset.unconfirmed_email}.
+- else
+  %p
+    We're contacting you to notify you that your email has been changed to #{@resource.email}.
+
+%p
+  If you did not initiate this change, please contact your group owner immediately. If you have a Premium or Ultimate tier subscription, you can also contact GitLab support.
diff --git a/app/views/devise/mailer/email_changed_gitlab_com.text.erb b/app/views/devise/mailer/email_changed_gitlab_com.text.erb
new file mode 100644
index 00000000000..c978d666180
--- /dev/null
+++ b/app/views/devise/mailer/email_changed_gitlab_com.text.erb
@@ -0,0 +1,9 @@
+Hello, <%= @resource.name %>!
+
+<% if @resource.try(:unconfirmed_email?) %>
+We're contacting you to notify you that your email is being changed to <%= @resource.reset.unconfirmed_email %>.
+<% else %>
+We're contacting you to notify you that your email has been changed to <%= @resource.email %>.
+<% end %>
+
+If you did not initiate this change, please contact your group owner immediately. If you have a Premium or Ultimate tier subscription, you can also contact GitLab support.
diff --git a/app/views/devise/sessions/_broadcast.html.haml b/app/views/devise/sessions/_broadcast.html.haml
new file mode 100644
index 00000000000..96e2e2d776d
--- /dev/null
+++ b/app/views/devise/sessions/_broadcast.html.haml
@@ -0,0 +1 @@
+= render "layouts/broadcast"
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 4825f192d4d..345a1cc0225 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -21,7 +21,8 @@
       = recaptcha_tags nonce: content_security_policy_nonce
 
   - if remember_me_enabled?
-    = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { autocomplete: 'off' }
+    .form-group
+      = f.gitlab_ui_checkbox_component :remember_me, _('Remember me'), checkbox_options: { autocomplete: 'off' }
 
   = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, block: true, button_options: { class: "js-sign-in-button #{'js-no-auto-disable' if Feature.enabled?(:arkose_labs_login_challenge)}", data: { qa_selector: 'sign_in_button', testid: 'sign-in-button' } }) do
     = _('Sign in')
diff --git a/app/views/devise/sessions/email_verification.haml b/app/views/devise/sessions/email_verification.haml
index e0b5a266961..085204fb6bf 100644
--- a/app/views/devise/sessions/email_verification.haml
+++ b/app/views/devise/sessions/email_verification.haml
@@ -2,18 +2,7 @@
   = render 'devise/shared/tab_single', tab_title: s_('IdentityVerification|Help us protect your account')
   .login-box.gl-p-5
     .login-body
-      = gitlab_ui_form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'gl-show-field-errors' }) do |f|
-        %p
-          = s_("IdentityVerification|For added security, you'll need to verify your identity. We've sent a verification code to %{email}").html_safe % { email: "<strong>#{sanitize(obfuscated_email(resource.email))}</strong>".html_safe }
-        %div
-          = f.label :verification_token, s_('IdentityVerification|Verification code')
-          = f.text_field :verification_token, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', title: s_('IdentityVerification|Please enter a valid code'), inputmode: 'numeric', maxlength: 6, pattern: '[0-9]{6}'
-          %p.gl-field-error.gl-mt-2
-            = resource.errors.full_messages.to_sentence
-          .gl-mt-5
-            = f.submit s_('IdentityVerification|Verify code'), class: 'gl-w-full', pajamas_button: true
-            - unless send_rate_limited?(resource)
-              = link_to s_('IdentityVerification|Resend code'), users_resend_verification_code_path, method: :post, class: 'form-control gl-button btn-link gl-mt-3 gl-mb-0'
+      .js-email-verification{ data: verification_data(resource) }
   %p.gl-p-5.gl-text-secondary
     - support_link_start = '<a href="https://about.gitlab.com/support/" target="_blank" rel="noopener noreferrer">'.html_safe
     = s_("IdentityVerification|If you've lost access to the email associated to this account or having trouble with the code, %{link_start}here are some other steps you can take.%{link_end}").html_safe % { link_start: support_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index d5f15a72c34..0fd27f7f7e7 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -5,8 +5,7 @@
   = render "layouts/one_trust"
 
 - content_for :sessions_broadcast do
-  - unless Gitlab.com?
-    = render "layouts/broadcast"
+  = render "devise/sessions/broadcast"
 
 = render "layouts/google_tag_manager_body"
 
diff --git a/app/views/devise/shared/_signup_omniauth_provider_list.haml b/app/views/devise/shared/_signup_omniauth_provider_list.haml
index 60c37316c62..e8c82e456ae 100644
--- a/app/views/devise/shared/_signup_omniauth_provider_list.haml
+++ b/app/views/devise/shared/_signup_omniauth_provider_list.haml
@@ -4,7 +4,7 @@
       = _("Register with:")
     .gl-text-center.gl-ml-auto.gl-mr-auto
       - providers.each do |provider|
-        = render Pajamas::ButtonComponent.new(href: omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), method: :post, variant: :default, button_options: { class: "gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label}, id: "oauth-login-#{provider}" }) do
+        = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
           - if provider_has_icon?(provider)
             = provider_image_tag(provider)
           %span.gl-button-text
@@ -14,7 +14,7 @@
     = _("Create an account using:")
   .gl-display-flex.gl-justify-content-between.gl-flex-wrap
     - providers.each do |provider|
-      = render Pajamas::ButtonComponent.new(href: omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), method: :post, variant: :default, button_options: { class: "gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label}, id: "oauth-login-#{provider}" }) do
+      = button_to omniauth_authorize_path(:user, provider, register_omniauth_params(local_assigns)), class: "btn gl-button btn-default gl-w-full gl-mb-4 js-oauth-login #{qa_selector_for_provider(provider)}", data: { provider: provider, track_action: "#{provider}_sso", track_label: tracking_label }, id: "oauth-login-#{provider}" do
         - if provider_has_icon?(provider)
           = provider_image_tag(provider)
         %span.gl-button-text
diff --git a/app/views/devise/shared/_signup_omniauth_providers.haml b/app/views/devise/shared/_signup_omniauth_providers.haml
index 5ec3c7a4150..399c23741a9 100644
--- a/app/views/devise/shared/_signup_omniauth_providers.haml
+++ b/app/views/devise/shared/_signup_omniauth_providers.haml
@@ -1,4 +1,6 @@
 - if Feature.disabled?(:restyle_login_page, @project)
   .omniauth-divider.gl-display-flex.gl-align-items-center
     = _("or")
-= render 'devise/shared/signup_omniauth_provider_list', providers: enabled_button_based_providers, tracking_label: "free_registration"
+= render 'devise/shared/signup_omniauth_provider_list',
+  providers: enabled_button_based_providers,
+  tracking_label: ::Onboarding::Status.tracking_label[:free]
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index cd0c9a016a5..db122fe82b1 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -3,7 +3,7 @@
 - diff_data = {}
 - expanded = discussion.expanded? || local_assigns.fetch(:expanded, nil)
 - unless expanded
-  - diff_data = { lines_path: project_merge_request_discussion_path(discussion.project, discussion.noteable, discussion) }
+  - diff_data = { lines_path: project_discussion_path(discussion.project, discussion.noteable_collection_name, discussion.noteable, discussion) }
 
 .diff-file.file-holder.js-lazy-load-discussion{ class: diff_file_class, data: diff_data }
   .js-file-title.file-title.file-title-flex-parent
@@ -29,7 +29,8 @@
             %td.line_content.js-success-lazy-load
               .js-code-placeholder
             %td.js-error-lazy-load-diff.hidden.diff-loading-error-block
-              - button = button_tag(_("Try again"), class: "btn-link gl-button btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button")
+              - button = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'btn-link-retry gl-p-0 js-toggle-lazy-diff-retry-button' }) do
+                = _("Try again")
               = _("Unable to load the diff. %{button_try_again}").html_safe % { button_try_again: button}
           = render "discussions/diff_discussion", discussions: [discussion], expanded: true
   - else
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index bc69da5775f..fd5088e04b0 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -38,7 +38,8 @@
           = hidden_field_tag :nonce, @pre_auth.nonce
           = hidden_field_tag :code_challenge, @pre_auth.code_challenge
           = hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method
-          = submit_tag _("Deny"), class: "btn btn-default gl-button"
+          = render Pajamas::ButtonComponent.new(type: :submit) do
+            = _("Deny")
         = form_tag oauth_authorization_path, method: :post, class: 'inline' do
           = hidden_field_tag :client_id, @pre_auth.client.uid
           = hidden_field_tag :redirect_uri, @pre_auth.redirect_uri
@@ -48,4 +49,7 @@
           = hidden_field_tag :nonce, @pre_auth.nonce
           = hidden_field_tag :code_challenge, @pre_auth.code_challenge
           = hidden_field_tag :code_challenge_method, @pre_auth.code_challenge_method
-          = submit_tag _("Authorize"), class: "btn btn-danger gl-button gl-ml-3", data: { qa_selector: 'authorization_button' }
+          = render Pajamas::ButtonComponent.new(type: :submit,
+            variant: :danger,
+            button_options: { id: 'commit-changes', class: 'gl-ml-3', qa_selector: 'authorization_button'}) do
+            = _("Authorize")
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index fac0fd3d2a4..ca7798257cb 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -8,7 +8,7 @@
       .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.float-none{ class: 'gl-mr-3!' }
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'logo')
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex{ itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ itemprop: 'name' }
           = @group.name
           %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@group) }
             = visibility_level_icon(@group.visibility_level, options: {class: 'icon'})
diff --git a/app/views/groups/_import_group_from_another_instance_panel.html.haml b/app/views/groups/_import_group_from_another_instance_panel.html.haml
index 9fbb7f3c9ed..8c2434ca4a0 100644
--- a/app/views/groups/_import_group_from_another_instance_panel.html.haml
+++ b/app/views/groups/_import_group_from_another_instance_panel.html.haml
@@ -37,7 +37,7 @@
         required: true,
         title: s_('GroupsNew|Enter the URL for the source instance.'),
         id: 'import_gitlab_url',
-        data: { qa_selector: 'import_gitlab_url' }
+        data: { testid: 'import-gitlab-url' }
     .form-group.gl-display-flex.gl-flex-direction-column
       = f.label :bulk_import_gitlab_access_token, s_('GroupsNew|Personal access token'), for: 'import_gitlab_token'
       .gl-font-weight-normal
@@ -50,6 +50,6 @@
         autocomplete: 'off',
         title: s_('GroupsNew|Please fill in your personal access token.'),
         id: 'import_gitlab_token',
-        data: { qa_selector: 'import_gitlab_token' }
+        data: { testid: 'import-gitlab-token' }
   .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
-    = f.submit s_('GroupsNew|Connect instance'), disabled: bulk_imports_disabled, pajamas_button: true, data: { qa_selector: 'connect_instance_button' }
+    = f.submit s_('GroupsNew|Connect instance'), disabled: bulk_imports_disabled, pajamas_button: true, data: { testid: 'connect-instance-button' }
diff --git a/app/views/groups/_import_group_from_file_panel.html.haml b/app/views/groups/_import_group_from_file_panel.html.haml
index 91f7b574dbf..e3d54e52aab 100644
--- a/app/views/groups/_import_group_from_file_panel.html.haml
+++ b/app/views/groups/_import_group_from_file_panel.html.haml
@@ -20,6 +20,6 @@
         - import_export_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: help_page_path('user/group/import/index') }
         = s_('GroupsNew|To import a group, navigate to the group settings for the GitLab source instance, %{link_start}generate an export file%{link_end}, and upload it here.').html_safe % { link_start: import_export_link_start, link_end: '</a>'.html_safe }
       .gl-mt-3
-        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil, classes: 'gl-button btn-confirm-secondary gl-mr-2'
+        = render 'shared/file_picker_button', f: f, field: :file, help_text: nil
   .gl-border-gray-100.gl-border-solid.gl-border-1.gl-bg-gray-10.gl-p-5
     = f.submit _('Import'), pajamas_button: true
diff --git a/app/views/groups/_new_group_fields.html.haml b/app/views/groups/_new_group_fields.html.haml
index ddf6e52796f..49cc6e66ab8 100644
--- a/app/views/groups/_new_group_fields.html.haml
+++ b/app/views/groups/_new_group_fields.html.haml
@@ -30,6 +30,6 @@
         = recaptcha_tags nonce: content_security_policy_nonce
 .row
   .col-sm-12
-    = f.submit submit_label, pajamas_button: true, data: { qa_selector: 'create_group_button' }
+    = f.submit submit_label, pajamas_button: true, data: { testid: 'create-group-button' }
     = render Pajamas::ButtonComponent.new(href: @parent_group || dashboard_groups_path) do
       = _('Cancel')
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index dedff502a87..c11154cbd75 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -11,7 +11,7 @@
       = _('Naming, visibility')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Collapse')
-    %p
+    %p.gl-text-secondary
       = _('Update your group name, description, avatar, and visibility.')
       = link_to _('Learn more about groups.'), help_page_path('user/group/index')
   .settings-content
@@ -23,7 +23,7 @@
       = _('Permissions and group features')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Configure advanced permissions, Large File Storage, two-factor authentication, and customer relations settings.')
   .settings-content
     = render 'groups/settings/permissions'
@@ -38,7 +38,7 @@
       = s_('GroupSettings|Badges')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('GroupSettings|Customize this group\'s badges.')
       = link_to s_('GroupSettings|What are badges?'), help_page_path('user/project/badges')
   .settings-content
@@ -47,6 +47,7 @@
 = render_if_exists 'groups/compliance_frameworks', expanded: expanded
 = render_if_exists 'groups/custom_project_templates_setting'
 = render_if_exists 'groups/templates_setting', expanded: expanded
+= render_if_exists 'shared/groups/max_pages_size_setting'
 
 %section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
   .settings-header
@@ -54,10 +55,7 @@
       = _('Advanced')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Perform advanced options such as changing path, transferring, exporting, or removing the group.')
   .settings-content
     = render 'groups/settings/advanced'
-
-= render_if_exists 'shared/groups/max_pages_size_setting'
-
diff --git a/app/views/groups/packages/index.html.haml b/app/views/groups/packages/index.html.haml
index 6d0f24bf08c..4fda4e2b447 100644
--- a/app/views/groups/packages/index.html.haml
+++ b/app/views/groups/packages/index.html.haml
@@ -6,7 +6,7 @@
       full_path: @group.full_path,
       endpoint: group_packages_path(@group),
       page_type: 'groups',
-      empty_list_illustration: image_path('illustrations/no-packages.svg'),
+      empty_list_illustration: image_path('illustrations/empty-state/empty-package-md.svg'),
       npm_instance_url: package_registry_instance_url(:npm),
       project_list_url: '',
       settings_path: show_group_package_registry_settings(@group) ? group_settings_packages_and_registries_path(@group) : '',
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index ed078230349..22e9f9f5071 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -2,16 +2,20 @@
 - page_title _("Projects")
 - @force_desktop_expanded_sidebar = true
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-mt-3 js-search-settings-section' }, header_options: { class: 'gl-display-flex' }, body_options: { class: 'gl-py-0' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-search-settings-section' }, header_options: { class: 'gl-new-card-header gl-display-flex' }, body_options: { class: 'gl-new-card-body' }) do |c|
   - c.with_header do
-    .gl-flex-grow-1
-      = html_escape(_("%{strong_open}%{group_name}%{strong_close} projects:")) % { strong_open: '<strong>'.html_safe, group_name: @group.name, strong_close: '</strong>'.html_safe }
-    - if can? current_user, :admin_group, @group
-      .controls
-        = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), size: :small, variant: :confirm) do
+    .gl-new-card-title-wrapper
+      %h3.gl-new-card-title
+        = _('Projects')
+      .gl-new-card-count
+        = sprite_icon('project', css_class: 'gl-mr-2')
+        = @projects.size
+    .gl-new-card-actions
+      - if can? current_user, :admin_group, @group
+        = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), size: :small) do
           = _("New project")
   - c.with_body do
-    %ul.content-list
+    %ul.content-list{ class: 'gl-px-3!' }
       - @projects.each_with_index do |project, idx|
         %li.project-row.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'project_row_container', qa_index: idx } }
           .avatar-container.rect-avatar.s40.gl-flex-shrink-0
@@ -26,22 +30,22 @@
                       \/
                   %span.project-name{ data: { qa_selector: 'project_name_content', qa_project_name: project.name } }
                     = project.name
-                  %span{ class: visibility_level_color(project.visibility_level) }
-                    = visibility_level_icon(project.visibility_level)
+              = visibility_level_content(project, css_class: 'visibility-icon gl-text-secondary gl-ml-2', icon_css_class: 'icon')
 
             - if project.description.present?
               .description
                 = markdown_field(project, :description)
 
-          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
+          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex.gl-gap-3
             = gl_badge_tag storage_counter(project.statistics&.storage_size)
             = render 'project_badges', project: project
-
           .controls.gl-flex-shrink-0.gl-ml-5
             = render Pajamas::ButtonComponent.new(href: project_project_members_path(project),
-              button_options: { data: { qa_selector: 'project_members_button' } }) do
-              = _('Members')
+              variant: :link,
+              button_options: { class: 'gl-mr-2', data: { qa_selector: 'project_members_button' } }) do
+              = _('View members')
             = render Pajamas::ButtonComponent.new(href: edit_project_path(project),
+              size: :small,
               button_options: { data: { qa_selector: 'project_edit_button' } }) do
               = _('Edit')
             = render 'delete_project_button', project: project, data: { qa_selector: 'project_delete_button' }
diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml
index d92a6b08b60..45ee6ea6ad7 100644
--- a/app/views/groups/settings/_advanced.html.haml
+++ b/app/views/groups/settings/_advanced.html.haml
@@ -1,29 +1,32 @@
 - remove_form_id = 'js-remove-group-form'
 = render 'groups/settings/export', group: @group
 
-.sub-section
-  %h4.warning-title= s_('GroupSettings|Change group URL')
-  = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
-    = form_errors(@group)
-    .form-group
-      %p
-        = s_("GroupSettings|Changing a group's URL can have unintended side effects.")
-        = link_to _('Learn more.'), help_page_path('user/group/manage', anchor: 'change-a-groups-path'), target: '_blank', rel: 'noopener noreferrer'
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title= s_('GroupSettings|Change group URL')
+    %p.gl-new-card-description
+      = s_("GroupSettings|Changing a group's URL can have unintended side effects.")
+      = link_to _('Learn more.'), help_page_path('user/group/manage', anchor: 'change-a-groups-path'), target: '_blank', rel: 'noopener noreferrer'
 
-      .input-group.gl-field-error-anchor
-        .group-root-path.input-group-prepend.has-tooltip{ title: group_path(@group), :'data-placement' => 'bottom' }
-          .input-group-text
-            %span>= root_url
-            - if @group.parent
-              %strong= @group.parent.full_path + '/'
-        = f.hidden_field :parent_id
-        = f.text_field :path, placeholder: 'open-source', class: 'form-control',
-          autofocus: local_assigns[:autofocus] || false, required: true,
-          pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
-          title: group_url_error_message,
-          maxlength: ::Namespace::URL_MAX_LENGTH,
-          "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
-    = f.submit s_('GroupSettings|Change group URL'), class: 'btn-danger', pajamas_button: true
+  - c.with_body do
+    = gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors' }, authenticity_token: true do |f|
+      = form_errors(@group)
+      .form-group
+        .input-group.gl-field-error-anchor
+          .group-root-path.input-group-prepend.has-tooltip{ title: group_path(@group), :'data-placement' => 'bottom' }
+            .input-group-text
+              %span>= root_url
+              - if @group.parent
+                %strong= @group.parent.full_path + '/'
+          = f.hidden_field :parent_id
+          = f.text_field :path, placeholder: 'open-source', class: 'form-control',
+            autofocus: local_assigns[:autofocus] || false, required: true,
+            pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
+            title: group_url_error_message,
+            maxlength: ::Namespace::URL_MAX_LENGTH,
+            "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
+      = f.submit s_('GroupSettings|Change group URL'), class: 'btn-danger', pajamas_button: true
 
 = render 'groups/settings/transfer', group: @group
 = render 'groups/settings/remove', group: @group, remove_form_id: remove_form_id
diff --git a/app/views/groups/settings/_export.html.haml b/app/views/groups/settings/_export.html.haml
index 1e80c1846a4..8eb9f8fc5f1 100644
--- a/app/views/groups/settings/_export.html.haml
+++ b/app/views/groups/settings/_export.html.haml
@@ -1,33 +1,38 @@
 - group = local_assigns.fetch(:group)
 
-.sub-section
-  %h4= s_('GroupSettings|Export group')
-  %p= _('Export this group with all related data.')
-  = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
-    - c.with_body do
-      - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index', anchor: 'migrate-groups-by-direct-transfer-recommended') }
-      - docs_link_end = '</a>'.html_safe
-      = s_('GroupsNew|This feature is deprecated and replaced by group migration by direct transfer. %{docs_link_start}Learn more%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
-  %p
-    - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
-    = export_information.html_safe
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
-    - c.with_body do
-      %p.gl-mb-0
-        %p= _('The following items will be exported:')
-        %ul
-          - group_export_descriptions.each do |description|
-            %li= description
-        %p= _('The following items will NOT be exported:')
-        %ul
-          %li= _('Projects')
-          %li= _('Runner tokens')
-          %li= _('SAML discovery tokens')
-  - if group.export_file_exists?
-    = render Pajamas::ButtonComponent.new(href: download_export_group_path(group), button_options: { rel: 'nofollow', data: { method: :get, qa_selector: 'download_export_link' } }) do
-      = _('Download export')
-    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'regenerate_export_group_link' } }) do
-      = _('Regenerate export')
-  - else
-    = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'export_group_link' } }) do
-      = _('Export group')
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title= s_('GroupSettings|Export group')
+    %p.gl-new-card-description
+      = _('Export this group with all related data.')
+
+  - c.with_body do
+    = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
+      - c.with_body do
+        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/import/index', anchor: 'migrate-groups-by-direct-transfer-recommended') }
+        - docs_link_end = '</a>'.html_safe
+        = s_('GroupsNew|This feature is deprecated and replaced by group migration by direct transfer. %{docs_link_start}Learn more%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: docs_link_end }
+    %p
+      - export_information = _('After the export is complete, download the data file from a notification email or from this page. You can then import the data file from the %{strong_text_start}Create new group%{strong_text_end} page of another GitLab instance.') % { strong_text_start: '<strong>'.html_safe, strong_text_end: '</strong>'.html_safe}
+      = export_information.html_safe
+    = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
+      - c.with_body do
+        %p.gl-mb-0
+          %p= _('The following items will be exported:')
+          %ul
+            - group_export_descriptions.each do |description|
+              %li= description
+          %p= _('The following items will NOT be exported:')
+          %ul
+            %li= _('Projects')
+            %li= _('Runner tokens')
+            %li= _('SAML discovery tokens')
+    - if group.export_file_exists?
+      = render Pajamas::ButtonComponent.new(href: download_export_group_path(group), button_options: { rel: 'nofollow', data: { method: :get, qa_selector: 'download_export_link' } }) do
+        = _('Download export')
+      = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'regenerate_export_group_link' } }) do
+        = _('Regenerate export')
+    - else
+      = render Pajamas::ButtonComponent.new(href: export_group_path(group), button_options: { data: { method: :post, qa_selector: 'export_group_link' } }) do
+        = _('Export group')
diff --git a/app/views/groups/settings/_permanent_deletion.html.haml b/app/views/groups/settings/_permanent_deletion.html.haml
index 152cdfc1411..ae440636294 100644
--- a/app/views/groups/settings/_permanent_deletion.html.haml
+++ b/app/views/groups/settings/_permanent_deletion.html.haml
@@ -1,11 +1,15 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
-.sub-section
-  %h4.danger-title= _('Remove group')
-  = form_tag(group, method: :delete, id: remove_form_id) do
-    %p
-      = _('Removing this group also removes all child projects, including archived projects, and their resources.')
-      %br
-      %strong= _('Removed group can not be restored!')
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.danger-title= _('Remove group')
 
-    = render 'groups/settings/remove_button', group: group, remove_form_id: remove_form_id
+  - c.with_body do
+    = form_tag(group, method: :delete, id: remove_form_id) do
+      %p
+        = _('Removing this group also removes all child projects, including archived projects, and their resources.')
+        %br
+        %strong= _('Removed group can not be restored!')
+
+      = render 'groups/settings/remove_button', group: group, remove_form_id: remove_form_id
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
index acf11fd8858..6085bcc149f 100644
--- a/app/views/groups/settings/_remove_button.html.haml
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -1,7 +1,7 @@
 - remove_form_id = local_assigns.fetch(:remove_form_id, nil)
 
 - if group.prevent_delete?
-  = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5', data: { testid: 'group-has-linked-subscription-alert' }}) do |c|
+  = render Pajamas::AlertComponent.new(variant: :tip, dismissible: false, alert_options: { class: 'gl-mb-5', data: { testid: 'group-has-linked-subscription-alert' }}) do |c|
     - c.with_body do
       = html_escape(_("This group can't be removed because it is linked to a subscription. To remove this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/gitlab_com/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
 
diff --git a/app/views/groups/settings/_subgroup_creation_level.html.haml b/app/views/groups/settings/_subgroup_creation_level.html.haml
index d92610367ae..9f0a206312e 100644
--- a/app/views/groups/settings/_subgroup_creation_level.html.haml
+++ b/app/views/groups/settings/_subgroup_creation_level.html.haml
@@ -1,3 +1,4 @@
 .form-group
   = f.label s_('SubgroupCreationLevel|Roles allowed to create subgroups'), class: 'label-bold'
-  = f.select :subgroup_creation_level, options_for_select(::Gitlab::Access.subgroup_creation_options, group.subgroup_creation_level), {}, class: 'form-control'
+  - ::Gitlab::Access.subgroup_creation_options.each do |label, action|
+    = f.gitlab_ui_radio_component :subgroup_creation_level, action, label
diff --git a/app/views/groups/settings/_transfer.html.haml b/app/views/groups/settings/_transfer.html.haml
index 9ebe3a740b3..368e4a981bc 100644
--- a/app/views/groups/settings/_transfer.html.haml
+++ b/app/views/groups/settings/_transfer.html.haml
@@ -1,20 +1,25 @@
 - form_id = "transfer-group-form"
 - initial_data = { button_text: s_('GroupSettings|Transfer group'), group_full_path: @group.full_path, group_name: @group.name, group_id: @group.id, target_form_id: form_id, is_paid_group: group.paid?.to_s }
 
-.sub-section{ data: { qa_selector: 'transfer_group_content' } }
-  %h4.warning-title= s_('GroupSettings|Transfer group')
-  %p= _('Transfer group to another parent group.')
-  = form_for group, url: transfer_group_path(group), method: :put, html: { id: form_id, class: 'js-group-transfer-form' } do |f|
-    %ul
-      - learn_more_link = help_page_url('user/project/repository/index', anchor: 'what-happens-when-a-repository-path-changes')
-      - learn_more_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_link }
-      - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended side effects. %{learn_more_link_start}Learn more.%{learn_more_link_end}") % { learn_more_link_start: learn_more_link_start, learn_more_link_end: '</a>'.html_safe }
-      %li= warning_text.html_safe
-      %li= s_('GroupSettings|You must have the Owner role in the target group')
-      %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
-      %li= s_("GroupSettings|If the parent group's visibility is lower than the group's current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
-    - if group.paid?
-      = render Pajamas::AlertComponent.new(dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
-        - c.with_body do
-          = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/gitlab_com/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
-    .js-transfer-group-form{ data: initial_data }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'transfer_group_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title= s_('GroupSettings|Transfer group')
+    %p.gl-new-card-description
+      = _('Transfer group to another parent group.')
+
+  - c.with_body do
+    = form_for group, url: transfer_group_path(group), method: :put, html: { id: form_id, class: 'js-group-transfer-form' } do |f|
+      %ul
+        - learn_more_link = help_page_url('user/project/repository/index', anchor: 'what-happens-when-a-repository-path-changes')
+        - learn_more_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_link }
+        - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended side effects. %{learn_more_link_start}Learn more.%{learn_more_link_end}") % { learn_more_link_start: learn_more_link_start, learn_more_link_end: '</a>'.html_safe }
+        %li= warning_text.html_safe
+        %li= s_('GroupSettings|You must have the Owner role in the target group')
+        %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
+        %li= s_("GroupSettings|If the parent group's visibility is lower than the group's current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
+      - if group.paid?
+        = render Pajamas::AlertComponent.new(variant: :tip, dismissible: false, alert_options: { class: 'gl-mb-5' }) do |c|
+          - c.with_body do
+            = html_escape(_("This group can't be transferred because it is linked to a subscription. To transfer this group, %{linkStart}link the subscription%{linkEnd} with a different group.")) % { linkStart: "<a href=\"#{help_page_path('subscriptions/gitlab_com/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
+      .js-transfer-group-form{ data: initial_data }
diff --git a/app/views/groups/settings/access_tokens/index.html.haml b/app/views/groups/settings/access_tokens/index.html.haml
index ac3be429461..ef85eab6778 100644
--- a/app/views/groups/settings/access_tokens/index.html.haml
+++ b/app/views/groups/settings/access_tokens/index.html.haml
@@ -25,18 +25,31 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  - if current_user.can?(:create_resource_access_tokens, @group)
-    = render 'shared/access_tokens/form',
-        ajax: true,
-        type: type,
-        path: group_settings_access_tokens_path(@group),
-        resource: @group,
-        token: @resource_access_token,
-        scopes: @scopes,
-        access_levels: GroupMember.access_level_roles,
-        default_access_level: Gitlab::Access::GUEST,
-        prefix: :resource_access_token,
-        help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active group access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      - if current_user.can?(:create_resource_access_tokens, @group)
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
+            = _('Add new token')
+    - c.with_body do
+      - if current_user.can?(:create_resource_access_tokens, @group)
+        .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+          = render 'shared/access_tokens/form',
+              ajax: true,
+              type: type,
+              path: group_settings_access_tokens_path(@group),
+              resource: @group,
+              token: @resource_access_token,
+              scopes: @scopes,
+              access_levels: GroupMember.access_level_roles,
+              default_access_level: Gitlab::Access::GUEST,
+              prefix: :resource_access_token,
+              help_path: help_page_path('user/group/settings/group_access_tokens', anchor: 'scopes-for-a-group-access-token')
 
-  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true
- } }
+  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true } }
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index 7b6e50ffd36..f9ade00a300 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -14,7 +14,7 @@
         = _("General pipelines")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _("Customize your pipeline configuration.")
     .settings-content
       = render 'groups/settings/ci_cd/form', group: @group
@@ -31,7 +31,7 @@
       = _('Runners')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
       = link_to s_('What is GitLab Runner?'), 'https://docs.gitlab.com/runner/', target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -43,7 +43,7 @@
       = _('Auto DevOps')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - auto_devops_url = help_page_path('topics/autodevops/index')
       - quickstart_url = help_page_path('topics/autodevops/cloud_deployments/auto_devops_with_gke')
       - auto_devops_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: auto_devops_url }
diff --git a/app/views/groups/settings/integrations/index.html.haml b/app/views/groups/settings/integrations/index.html.haml
index 3c1a38d9997..d0d3b1bf137 100644
--- a/app/views/groups/settings/integrations/index.html.haml
+++ b/app/views/groups/settings/integrations/index.html.haml
@@ -6,5 +6,5 @@
   %h3= s_('Integrations|Group-level integration management')
 
   - integrations_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: integrations_help_page_path }
-  %p= s_("Integrations|GitLab administrators can set up integrations that all projects in a group inherit and use by default. These integrations apply to all projects that don't already use custom settings. You can override custom settings for a project if the settings are necessary at that level. Learn more about %{integrations_link_start}group-level integration management%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, link_end: "</a>".html_safe }
+  %p.gl-text-secondary= s_("Integrations|GitLab administrators can set up integrations that all projects in a group inherit and use by default. These integrations apply to all projects that don't already use custom settings. You can override custom settings for a project if the settings are necessary at that level. Learn more about %{integrations_link_start}group-level integration management%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, link_end: "</a>".html_safe }
   = render 'shared/integrations/index', integrations: @integrations
diff --git a/app/views/groups/settings/repository/_default_branch.html.haml b/app/views/groups/settings/repository/_default_branch.html.haml
index e8aa809a6ca..b04a3fe50ae 100644
--- a/app/views/groups/settings/repository/_default_branch.html.haml
+++ b/app/views/groups/settings/repository/_default_branch.html.haml
@@ -4,7 +4,7 @@
       = _('Default branch')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded_by_default? ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('GroupSettings|Set the initial name and protections for the default branch of new repositories created in the group.')
   .settings-content
     = gitlab_ui_form_for @group, url: group_path(@group, anchor: 'js-default-branch-name'), html: { class: 'fieldset-form' } do |f|
diff --git a/app/views/groups/work_items/index.html.haml b/app/views/groups/work_items/index.html.haml
new file mode 100644
index 00000000000..2e3d3dda941
--- /dev/null
+++ b/app/views/groups/work_items/index.html.haml
@@ -0,0 +1,4 @@
+- page_title s_('WorkItem|Work items')
+- add_page_specific_style 'page_bundles/issuable_list'
+
+.js-work-items-list-root{ data: { full_path: @group.full_path } }
diff --git a/app/views/help/instance_configuration/_size_limits.html.haml b/app/views/help/instance_configuration/_size_limits.html.haml
index 90501450385..add484feac9 100644
--- a/app/views/help/instance_configuration/_size_limits.html.haml
+++ b/app/views/help/instance_configuration/_size_limits.html.haml
@@ -41,3 +41,9 @@
         %tr
           %td= _('Maximum snippet size')
           %td= instance_configuration_human_size_cell(size_limits[:snippet_size_limit])
+        %tr
+          %td= s_('Import|Maximum import remote file size (MB)')
+          %td= instance_configuration_human_size_cell(size_limits[:max_import_remote_file_size])
+        %tr
+          %td= s_('BulkImport|Direct transfer maximum download file size (MB)')
+          %td= instance_configuration_human_size_cell(size_limits[:bulk_import_max_download_file_size])
diff --git a/app/views/import/bulk_imports/history.html.haml b/app/views/import/bulk_imports/history.html.haml
index 80eb0c7a764..38196f97030 100644
--- a/app/views/import/bulk_imports/history.html.haml
+++ b/app/views/import/bulk_imports/history.html.haml
@@ -3,4 +3,4 @@
 - add_page_specific_style 'page_bundles/import'
 - page_title _('Import history')
 
-#import-history-mount-element
+#import-history-mount-element{ data: { realtime_changes_path: realtime_changes_import_bulk_imports_path(format: :json) } }
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 9d4c0f62134..6aac7aa65af 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -40,4 +40,5 @@
             .js-gitlab-user{ data: { name: "users[#{id}][gitlab_user]" } }
 
   .form-actions
-    = submit_tag _('Continue to the next step'), class: 'gl-button btn btn-confirm'
+    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm) do
+      = _('Continue to the next step')
diff --git a/app/views/import/gitea/new.html.haml b/app/views/import/gitea/new.html.haml
index 4a293bb6f4e..f76e9f3f6ed 100644
--- a/app/views/import/gitea/new.html.haml
+++ b/app/views/import/gitea/new.html.haml
@@ -1,24 +1,25 @@
-- page_title _("Gitea Import")
+- page_title _("Gitea import")
 - header_title _("New project"), new_project_path
 - add_to_breadcrumbs s_('ProjectsNew|Import project'), new_project_path(anchor: 'import_project')
 
 %h1.page-title.gl-font-size-h-display
   = custom_icon('gitea_logo')
-  = _('Import Projects from Gitea')
+  = _('Import projects from Gitea')
 
 %p
-  - link_to_personal_token = link_to(_('Personal Access Token'), 'https://docs.gitea.io/en-us/api-usage/#authentication-via-the-api')
-  = _('To get started, please enter your Gitea Host URL and a %{link_to_personal_token}.').html_safe % { link_to_personal_token: link_to_personal_token }
+  - link_to_personal_token = link_to(_('personal access token'), 'https://docs.gitea.io/en-us/api-usage/#authentication-via-the-api')
+  = _('To get started, please enter your Gitea host URL and a %{link_to_personal_token}.').html_safe % { link_to_personal_token: link_to_personal_token }
 
 = form_tag personal_access_token_import_gitea_path do
   = hidden_field_tag(:namespace_id, params[:namespace_id])
   .form-group.row
-    = label_tag :gitea_host_url, _('Gitea Host URL'), class: 'col-form-label col-sm-2'
+    = label_tag :gitea_host_url, _('Gitea host URL'), class: 'col-form-label col-sm-2'
     .col-sm-4
       = text_field_tag :gitea_host_url, nil, placeholder: 'https://gitea.com', class: 'form-control gl-form-input'
   .form-group.row
-    = label_tag :personal_access_token, _('Personal Access Token'), class: 'col-form-label col-sm-2'
+    = label_tag :personal_access_token, _('Personal access token'), class: 'col-form-label col-sm-2'
     .col-sm-4
       = text_field_tag :personal_access_token, nil, class: 'form-control gl-form-input'
   .form-actions
-    = submit_tag _('List Your Gitea Repositories'), class: 'gl-button btn btn-confirm'
+    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm) do
+      = _('List your Gitea repositories')
diff --git a/app/views/import/gitea/status.html.haml b/app/views/import/gitea/status.html.haml
index c717d4848f4..2dde642d8f0 100644
--- a/app/views/import/gitea/status.html.haml
+++ b/app/views/import/gitea/status.html.haml
@@ -1,6 +1,6 @@
-- page_title _("Gitea Import")
+- page_title _("Gitea import")
 %h1.page-title.gl-font-size-h-display
   = custom_icon('gitea_logo')
-  = _('Import Projects from Gitea')
+  = _('Import projects from Gitea')
 
 = render 'import/githubish_status', provider: 'gitea', default_namespace: @namespace
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 3bb59db32aa..95627c2884a 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -7,7 +7,7 @@
 
     - sidebar_panel = super_sidebar_nav_panel(nav: nav, user: current_user, group: group, project: @project, current_ref: current_ref, ref_type: @ref_type, viewed_user: @user, organization: @organization)
     - sidebar_data = super_sidebar_context(current_user, group: group, project: @project, panel: sidebar_panel, panel_type: nav).to_json
-    %aside.js-super-sidebar.super-sidebar.super-sidebar-loading{ data: { root_path: root_path, sidebar: sidebar_data, toggle_new_nav_endpoint: profile_preferences_url, force_desktop_expanded_sidebar: @force_desktop_expanded_sidebar.to_s, command_palette: command_palette_data(project: @project).to_json } }
+    %aside.js-super-sidebar.super-sidebar.super-sidebar-loading{ data: { root_path: root_path, sidebar: sidebar_data, toggle_new_nav_endpoint: profile_preferences_path, force_desktop_expanded_sidebar: @force_desktop_expanded_sidebar.to_s, command_palette: command_palette_data(project: @project).to_json } }
 
     - if display_whats_new?
       #whats-new-app{ data: { version_digest: whats_new_version_digest } }
@@ -51,4 +51,4 @@
     -# This is needed by [GitLab JH](https://gitlab.com/gitlab-jh/jh-team/gitlab-cn/-/issues/81)
     = render_if_exists "shared/footer/global_footer"
 
-= render "layouts/nav/top_nav_responsive", class: 'layout-page' unless show_super_sidebar?
+= render "layouts/nav/top_nav_responsive", class: 'layout-page' if !show_super_sidebar? || !current_user
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 53e88d95893..28cbdf0a7a1 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -13,10 +13,13 @@
     = header_message
 
     - if show_super_sidebar? # TODO: Move this CSS to a better place
-      :css
-        body {
-          --header-height: 0px;
-        }
+      - if current_user
+        :css
+          body {
+            --header-height: 0px;
+          }
+      - else
+        = render partial: "layouts/header/super_sidebar_logged_out"
     - else
       = render partial: "layouts/header/default", locals: { project: @project, group: @group }
     = render 'layouts/page', sidebar: sidebar, nav: nav
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index c75b02aa6a6..83641fbb184 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -21,7 +21,6 @@
   = render 'groups/invite_members_modal', group: @group
 
 = dispensable_render_if_exists "shared/web_hooks/group_web_hook_disabled_alert"
-= dispensable_render_if_exists "shared/code_suggestions_alert"
 = dispensable_render_if_exists "shared/code_suggestions_third_party_alert", source: @group
 = dispensable_render_if_exists "shared/free_user_cap_alert", source: @group
 = dispensable_render_if_exists "shared/unlimited_members_during_trial_alert", resource: @group
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
index e04ffc2e88a..7ce914cf660 100644
--- a/app/views/layouts/header/_current_user_dropdown.html.haml
+++ b/app/views/layouts/header/_current_user_dropdown.html.haml
@@ -11,7 +11,7 @@
   %li.divider
   - if can?(current_user, :update_user_status, current_user)
     %li
-      %button.gl-button.btn.btn-link.menu-item.js-set-status-modal-trigger{ type: 'button' }
+      = render Pajamas::ButtonComponent.new(button_options: { class: 'menu-item js-set-status-modal-trigger' }) do
         - if current_user.status&.busy? || current_user.status&.customized?
           = s_('SetStatusModal|Edit status')
         - else
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 1c22a853dd0..993094c6889 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,19 +1,12 @@
 - has_impersonation_link = header_link?(:admin_impersonation)
 - user_status_data = user_status_properties(current_user)
 
-%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { testid: 'navbar' } }
+%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar.legacy-top-bar{ data: { testid: 'navbar' } }
   %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
     .header-content.js-header-content
       .title-container.hide-when-top-nav-responsive-open.gl-transition-medium.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
-        .title
-          %span.gl-sr-only GitLab
-          = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
-            = brand_header_logo
-        .gl-display-flex.gl-align-items-center
-          - if Gitlab.com_and_canary?
-            = gl_badge_tag({ variant: :success, size: :sm }, { href: Gitlab::Saas.canary_toggle_com_url, data: { testid: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer', class: 'canary-badge' }) do
-              = _('Next')
+        = render 'layouts/header/title'
 
         - if current_user
           .gl-display-none.gl-sm-display-block
@@ -92,7 +85,7 @@
           - if header_link?(:todos)
             = nav_link(controller: 'dashboard/todos', html_options: { class: "user-counter" }) do
               = link_to dashboard_todos_path, title: _('To-Do List'), aria: { label: _('To-Do List') }, class: 'shortcuts-todos js-prefetch-document',
-                data: { testid: 'todos_shortcut_button', toggle: 'tooltip', placement: 'bottom',
+                data: { testid: 'todos-shortcut-button', toggle: 'tooltip', placement: 'bottom',
                 track_label: 'main_navigation',
                 track_action: 'click_to_do_link',
                 track_property: 'navigation_top',
diff --git a/app/views/layouts/header/_super_sidebar_logged_out.haml b/app/views/layouts/header/_super_sidebar_logged_out.haml
new file mode 100644
index 00000000000..67322aced74
--- /dev/null
+++ b/app/views/layouts/header/_super_sidebar_logged_out.haml
@@ -0,0 +1,47 @@
+%header.navbar.navbar-gitlab.super-sidebar-logged-out{ data: { testid: 'navbar' } }
+  %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
+  .container-fluid
+    .header-content.gl-displax-flex
+      .title-container.gl-display-flex.gl-align-items-stretch.gl-pt-0.gl-mr-3
+        = render 'layouts/header/title'
+
+        %ul.nav.navbar-sub-nav.gl-align-items-center.gl-display-flex.gl-flex-direction-row.gl-flex-grow-1
+          - if Gitlab.com?
+            %li.nav-item.dropdown.gl-mr-3.gl-md-display-none
+              %button{ type: "button", data: { toggle: "dropdown" } }
+                %span.gl-sr-only
+                  = _('Menu')
+                = sprite_icon('hamburger', size: 16)
+              .dropdown-menu
+                %ul
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'why-gitlab') do
+                      = s_('LoggedOutMarketingHeader|Why GitLab')
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'pricing') do
+                      = s_('LoggedOutMarketingHeader|Pricing')
+                  %li
+                    = link_to Gitlab::Utils.append_path(promo_url, 'sales') do
+                      = s_('LoggedOutMarketingHeader|Contact Sales')
+                  %li
+                    = link_to _("Explore"), explore_root_path
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'why-gitlab') do
+                = s_('LoggedOutMarketingHeader|Why GitLab')
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'pricing') do
+                = s_('LoggedOutMarketingHeader|Pricing')
+            %li.nav-item.gl-mr-3.gl-display-none.gl-md-display-inline-block
+              = link_to Gitlab::Utils.append_path(promo_url, 'sales') do
+                = s_('LoggedOutMarketingHeader|Contact Sales')
+          %li.nav-item{ class: ('gl-display-none gl-md-display-inline-block' if Gitlab.com?) }
+            = link_to _("Explore"), explore_root_path, class: ''
+
+      - if header_link?(:sign_in)
+        %ul.nav.navbar-nav.gl-align-items-center.gl-justify-content-end.gl-flex-direction-row
+          %li.nav-item.gl-mr-3
+            = link_to _('Sign in'), new_session_path(:user, redirect_to_referer: 'yes')
+          - if allow_signup?
+            %li
+              = render Pajamas::ButtonComponent.new(href: new_user_registration_path, variant: :confirm) do
+                = _('Register')
diff --git a/app/views/layouts/header/_title.html.haml b/app/views/layouts/header/_title.html.haml
new file mode 100644
index 00000000000..0e57c6809c2
--- /dev/null
+++ b/app/views/layouts/header/_title.html.haml
@@ -0,0 +1,8 @@
+.title
+  %span.gl-sr-only GitLab
+  = link_to root_path, title: _('Homepage'), id: 'logo', class: 'has-tooltip', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation_top') do
+    = brand_header_logo
+  .gl-display-flex.gl-align-items-center
+    - if Gitlab.com_and_canary?
+      = gl_badge_tag({ variant: :success, size: :sm }, { href: Gitlab::Saas.canary_toggle_com_url, data: { testid: 'canary_badge_link' }, target: :_blank, rel: 'noopener noreferrer', class: 'canary-badge' }) do
+        = _('Next')
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 4ecae875056..18ae3353f4d 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -23,7 +23,6 @@
   = render 'projects/invite_members_modal', project: @project
 
 = dispensable_render_if_exists "shared/web_hooks/web_hook_disabled_alert"
-= dispensable_render_if_exists "projects/code_suggestions_alert", project: @project
 = dispensable_render_if_exists "projects/code_suggestions_third_party_alert", project: @project
 = dispensable_render_if_exists "projects/free_user_cap_alert", project: @project
 = dispensable_render_if_exists 'shared/unlimited_members_during_trial_alert', resource: @project
diff --git a/app/views/notify/changed_reviewer_of_merge_request_email.html.haml b/app/views/notify/changed_reviewer_of_merge_request_email.html.haml
index ed7a3285f45..f080a5798f1 100644
--- a/app/views/notify/changed_reviewer_of_merge_request_email.html.haml
+++ b/app/views/notify/changed_reviewer_of_merge_request_email.html.haml
@@ -1,2 +1,4 @@
+= render_if_exists 'notify/address_new_reviewer_with_diff_summary'
+
 %p
   = change_reviewer_notification_text(@merge_request.reviewers, @previous_reviewers, :strong)
diff --git a/app/views/notify/changed_reviewer_of_merge_request_email.text.erb b/app/views/notify/changed_reviewer_of_merge_request_email.text.erb
index b6824966bb9..8db626548d7 100644
--- a/app/views/notify/changed_reviewer_of_merge_request_email.text.erb
+++ b/app/views/notify/changed_reviewer_of_merge_request_email.text.erb
@@ -1 +1,2 @@
+<%= render_if_exists 'notify/address_new_reviewer_with_diff_summary' -%>
 <%= change_reviewer_notification_text(@merge_request.reviewers, @previous_reviewers) %>
diff --git a/app/views/notify/member_about_to_expire_email.html.haml b/app/views/notify/member_about_to_expire_email.html.haml
new file mode 100644
index 00000000000..a9f92d90ae6
--- /dev/null
+++ b/app/views/notify/member_about_to_expire_email.html.haml
@@ -0,0 +1,6 @@
+= email_default_heading(say_hi(@member.user))
+
+%p
+  = member_about_to_expire_text(@member_source, @days_to_expire, format: :html)
+%p
+  = member_about_to_expire_link(@member, @member_source, format: :html)
diff --git a/app/views/notify/member_about_to_expire_email.text.erb b/app/views/notify/member_about_to_expire_email.text.erb
new file mode 100644
index 00000000000..0c6e78bf501
--- /dev/null
+++ b/app/views/notify/member_about_to_expire_email.text.erb
@@ -0,0 +1,5 @@
+<%= say_hi(@member.user) %>
+
+<%= member_about_to_expire_text(@member_source, @days_to_expire) %>
+
+<%= member_about_to_expire_link(@member, @member_source) %>
diff --git a/app/views/notify/new_review_email.html.haml b/app/views/notify/new_review_email.html.haml
index afc1bd68215..8a184aa9696 100644
--- a/app/views/notify/new_review_email.html.haml
+++ b/app/views/notify/new_review_email.html.haml
@@ -22,3 +22,4 @@
                   - discussion.first_note.project = @project if discussion&.first_note
                   - target_url = project_merge_request_url(@project, @merge_request, anchor: "note_#{note.id}")
                   = render 'note_email', note: note, diff_limit: 3, target_url: target_url, note_style: "border-bottom:1px solid #ededed; padding-bottom: 1em;", include_stylesheet_link: false, discussion: discussion, author: @author
+                = render_if_exists 'notify/review_summary'
diff --git a/app/views/notify/new_review_email.text.erb b/app/views/notify/new_review_email.text.erb
index 69cb33b05df..e974c8b6be8 100644
--- a/app/views/notify/new_review_email.text.erb
+++ b/app/views/notify/new_review_email.text.erb
@@ -12,3 +12,5 @@
 --
   <% end %>
 <% end %>
+
+<%= render_if_exists 'notify/review_summary' %>
diff --git a/app/views/notify/request_review_merge_request_email.html.haml b/app/views/notify/request_review_merge_request_email.html.haml
index a8c7df79ff3..d5f5d155f3d 100644
--- a/app/views/notify/request_review_merge_request_email.html.haml
+++ b/app/views/notify/request_review_merge_request_email.html.haml
@@ -1,2 +1,3 @@
 %p
   = html_escape(s_('Notify|%{name} requested a new review on %{mr_link}.')) % {name: sanitize_name(@updated_by.name), mr_link: merge_request_reference_link(@merge_request).html_safe}
+  = render_if_exists 'notify/diff_summary'
diff --git a/app/views/notify/request_review_merge_request_email.text.erb b/app/views/notify/request_review_merge_request_email.text.erb
index 9ab15332c51..dc1746d3a8c 100644
--- a/app/views/notify/request_review_merge_request_email.text.erb
+++ b/app/views/notify/request_review_merge_request_email.text.erb
@@ -1 +1,2 @@
 <%= sanitize_name(@updated_by.name) %> requested a new review on <%= merge_request_reference_link(@merge_request) %>.
+<%= render_if_exists 'notify/diff_summary' -%>
diff --git a/app/views/profiles/_name.html.haml b/app/views/profiles/_name.html.haml
index d798eab7635..b0d9f142d88 100644
--- a/app/views/profiles/_name.html.haml
+++ b/app/views/profiles/_name.html.haml
@@ -4,6 +4,6 @@
   %small.form-text.text-gl-muted
     = s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you.") % { provider_label: attribute_provider_label(:name) }
 - else
-  = form.text_field :name, class: 'gl-form-input form-control', required: true, title: s_("Profiles|Using emojis in names seems fun, but please try to set a status message instead")
+  = form.text_field :name, class: 'gl-form-input form-control', required: true, title: s_("Profiles|Using emoji in names seems fun, but please try to set a status message instead")
   %small.form-text.text-gl-muted
     = s_("Profiles|Enter your name, so people you know can recognize you.")
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 743c26260e4..6dcd661ecdb 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,66 +1,84 @@
 - page_title _('Emails')
+- profile_message = _('Used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "<a href='#{profile_path}' class='gl-text-blue-500!'>".html_safe, closingTag: '</a>'.html_safe}
+- notification_message = _('Used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "<a href='#{profile_notifications_path}' class='gl-text-blue-500!'>".html_safe, closingTag: '</a>'.html_safe}
+- public_email_message = _('Your public email will be displayed on your public profile.')
+- commit_email_message = _('Used for web based operations, such as edits and merges.')
 - @force_desktop_expanded_sidebar = true
 
+
 .settings-section.js-search-settings-section
   .settings-sticky-header
     .settings-sticky-header-inner
       %h4.gl-my-0
-        = _('Add email address')
+        = s_('Profiles|Email addresses')
   %p.gl-text-secondary
-    = _('Control emails linked to your account')
-  %div
-    = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
-      .form-group
-        = f.label :email, _('Email'), class: 'label-bold'
-        = f.text_field :email, class: 'form-control gl-form-input', data: { qa_selector: 'email_address_field' }
-      .gl-mt-3
-        = f.submit _('Add email address'), data: { qa_selector: 'add_email_address_button' }, pajamas_button: true
+    = s_('Profiles|Control emails linked to your account')
 
-.settings-section.js-search-settings-section
-  .settings-sticky-header
-    .settings-sticky-header-inner
-      %h4.gl-my-0
-        = _('Linked emails (%{email_count})') % { email_count: @emails.load.size }
-    .account-well.gl-mb-3
-      %ul
-        %li
-          - profile_message = _('Your primary email is used for avatar detection. You can change it in your %{openingTag}profile settings%{closingTag}.') % { openingTag: "<a href='#{profile_path}'>".html_safe, closingTag: '</a>'.html_safe}
-          = profile_message.html_safe
-        %li
-          = _('Your commit email is used for web based operations, such as edits and merges.')
-        %li
-          - notification_message = _('Your default notification email is used for account notifications if a %{openingTag}group-specific email address%{closingTag} is not set.') % { openingTag: "<a href='#{profile_notifications_path}'>".html_safe, closingTag: '</a>'.html_safe}
-          = notification_message.html_safe
-        %li
-          = _('Your public email will be displayed on your public profile.')
-        %li
-          = _('All email addresses will be used to identify your commits.')
-    %ul.content-list
-      %li
-        = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
-        %ul
-          %li= s_('Profiles|Primary email')
-          - if @primary_email == current_user.commit_email_or_default
-            %li= s_('Profiles|Commit email')
-          - if @primary_email == current_user.public_email
-            %li= s_('Profiles|Public email')
-          - if @primary_email == current_user.notification_email_or_default
-            %li= s_('Profiles|Default notification email')
-      - @emails.reject(&:user_primary_email?).each do |email|
-        %li{ data: { qa_selector: 'email_row_content' } }
-          .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-gap-3
-            %div
-              = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
+  .settings-section.js-search-settings-section
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = s_('Profiles|Linked emails')
+          .gl-new-card-count
+            = sprite_icon('mail', css_class: 'gl-mr-2')
+            = @emails.load.size
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content", data: { testid: 'toggle_email_address_field' } }) do
+            = s_('Profiles|Add new email')
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+          %h4.gl-mt-0
+            = s_('Profiles|Add new email')
+          = gitlab_ui_form_for 'email', url: profile_emails_path do |f|
+            .form-group
+              = f.label :email, s_('Profiles|Email address'), class: 'label-bold'
+              = f.text_field :email, class: 'form-control gl-form-input gl-form-input-xl', data: { qa_selector: 'email_address_field' }
+            .gl-mt-3
+              = f.submit s_('Profiles|Add email address'), data: { qa_selector: 'add_email_address_button' }, pajamas_button: true
+              = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+                = _('Cancel')
+        - if @emails.any?
+          %ul.content-list
+            %li{ class: 'gl-px-5!' }
+              = render partial: 'shared/email_with_badge', locals: { email: @primary_email, verified: current_user.confirmed? }
               %ul
-                - if email.email == current_user.commit_email_or_default
-                  %li= s_('Profiles|Commit email')
-                - if email.email == current_user.public_email
-                  %li= s_('Profiles|Public email')
-                - if email.email == current_user.notification_email_or_default
-                  %li= s_('Profiles|Notification email')
-            .gl-display-flex.gl-justify-content-end.gl-align-items-flex-end.gl-flex-grow-1.gl-flex-wrap-reverse.gl-gap-3
-              - unless email.confirmed?
-                - confirm_title = "#{email.confirmation_sent_at ? _('Resend confirmation email') : _('Send confirmation email')}"
-                = link_button_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, size: :small
+                %li.gl-mt-2
+                  = s_('Profiles|Primary email')
+                  .gl-text-secondary.gl-font-sm= profile_message.html_safe
+                - if @primary_email == current_user.commit_email_or_default
+                  %li.gl-mt-2
+                    = s_('Profiles|Commit email')
+                    .gl-text-secondary.gl-font-sm= commit_email_message
+                - if @primary_email == current_user.public_email
+                  %li.gl-mt-2
+                    = s_('Profiles|Public email')
+                    .gl-text-secondary.gl-font-sm= public_email_message
+                - if @primary_email == current_user.notification_email_or_default
+                  %li.gl-mt-2
+                    = s_('Profiles|Default notification email')
+                    .gl-text-secondary.gl-font-sm= notification_message.html_safe
+            - @emails.reject(&:user_primary_email?).each do |email|
+              %li{ class: 'gl-px-5!', data: { qa_selector: 'email_row_content' } }
+                .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-gap-3
+                  %div
+                    = render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
+                    %ul
+                      - if email.email == current_user.commit_email_or_default
+                        %li.gl-mt-2
+                          = s_('Profiles|Commit email')
+                          .gl-text-secondary.gl-font-sm= commit_email_message
+                      - if email.email == current_user.public_email
+                        %li.gl-mt-2
+                          = s_('Profiles|Public email')
+                          .gl-text-secondary.gl-font-sm= public_email_message
+                      - if email.email == current_user.notification_email_or_default
+                        %li.gl-mt-2
+                          = s_('Profiles|Default notification email')
+                          .gl-text-secondary.gl-font-sm= notification_message.html_safe
+                  .gl-display-flex.gl-sm-justify-content-end.gl-align-items-flex-end.gl-flex-grow-1.gl-flex-wrap-reverse.gl-gap-3
+                    - unless email.confirmed?
+                      - confirm_title = "#{email.confirmation_sent_at ? s_('Profiles|Resend confirmation email') : s_('Profiles|Send confirmation email')}"
+                      = link_button_to confirm_title, resend_confirmation_instructions_profile_email_path(email), method: :put, size: :small
 
-              = link_button_to nil, profile_email_path(email), data: { confirm: _('Are you sure?'), qa_selector: 'delete_email_link'}, method: :delete, variant: :danger, size: :small, icon: 'remove', 'aria-label': _('Remove')
+                    = link_button_to nil, profile_email_path(email), data: { confirm: _('Are you sure?'), confirm_btn_variant: 'danger', qa_selector: 'delete_email_link'}, method: :delete, size: :small, icon: 'remove', 'aria-label': _('Remove')
diff --git a/app/views/profiles/gpg_keys/_form.html.haml b/app/views/profiles/gpg_keys/_form.html.haml
index ffd8bc3de27..2bc977feb24 100644
--- a/app/views/profiles/gpg_keys/_form.html.haml
+++ b/app/views/profiles/gpg_keys/_form.html.haml
@@ -8,3 +8,5 @@
 
     .gl-mt-3
       = f.submit s_('Profiles|Add key'), pajamas_button: true
+      = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+        = _('Cancel')
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index d8b8dda29dc..f8520cb430d 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -1,24 +1,29 @@
-%li.key-list-item
-  .float-left.gl-mr-3
-    = sprite_icon('key', css_class: "settings-list-icon d-none d-sm-block gl-mt-4")
-  .key-list-item-info
+%tr.key-list-item
+  %td{ data: { label: s_('Profiles|Key') } }
+    %div{ class: 'gl-display-flex! gl-pl-0!' }
+      = sprite_icon('key', css_class: "settings-list-icon d-none d-sm-inline gl-mr-2")
+      .gl-display-flex.gl-flex-direction-column.gl-text-truncate
+        %p.gl-text-truncate.gl-m-0
+          %code= key.fingerprint
+        - if key.subkeys.present?
+          .subkeys.gl-mt-3{ class: 'gl-text-left!' }
+            %span.gl-font-sm
+              = _('Subkeys:')
+            %ul.subkeys-list
+              - key.subkeys.each do |subkey|
+                %li
+                  %p.gl-text-truncate.gl-m-0
+                    %code= subkey.fingerprint
+
+  %td{ data: { label: _('Status') } }
     - key.emails_with_verified_status.map do |email, verified|
-      = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
+      %div{ class: 'gl-text-left!' }
+        = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
+
+  %td{ data: { label: _('Created') } }
+    = html_escape(s_('Created %{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at) }
 
-    %span.text-truncate
-      %code= key.fingerprint
-    - if key.subkeys.present?
-      .subkeys
-        %span.bold
-          = _('Subkeys')
-          = ':'
-        %ul.subkeys-list
-          - key.subkeys.each do |subkey|
-            %li
-              %code= subkey.fingerprint
-  .float-right
-    %span.key-created-at
-      = html_escape(s_('Profiles|Created %{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at) }
-    = link_button_to nil, profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.') }, method: :delete, class: 'gl-ml-3', variant: :danger, icon: 'remove', 'aria-label': _('Remove')
-    = link_button_to revoke_profile_gpg_key_path(key), data: { confirm: _('Are you sure? All commits that were signed with this GPG key will be unverified.') }, method: :put, class: 'gl-ml-3', variant: :danger, 'aria-label': _('Revoke') do
+  %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+    = link_button_to nil, profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.'), confirm_btn_variant: 'danger' }, method: :delete, class: 'has-tooltip', icon: 'remove', category: :secondary, 'title': _('Remove'), 'aria-label': _('Remove')
+    = link_button_to revoke_profile_gpg_key_path(key), data: { confirm: _('Are you sure? All commits that were signed with this GPG key will be unverified.'), confirm_btn_variant: 'danger' }, method: :put, class: 'gl-ml-3', category: :secondary, variant: :danger, 'aria-label': _('Revoke') do
       = _('Revoke')
diff --git a/app/views/profiles/gpg_keys/_key_table.html.haml b/app/views/profiles/gpg_keys/_key_table.html.haml
index ebbd1c8f672..0a50ce55b50 100644
--- a/app/views/profiles/gpg_keys/_key_table.html.haml
+++ b/app/views/profiles/gpg_keys/_key_table.html.haml
@@ -1,10 +1,19 @@
 - is_admin = local_assigns.fetch(:admin, false)
+- hide_class = local_assigns.fetch(:hide_class, false)
 
 - if @gpg_keys.any?
-  %ul.content-list
-    = render partial: 'profiles/gpg_keys/key', collection: @gpg_keys, locals: { is_admin: is_admin }
+  .table-holder
+    %table.table.b-table.gl-table.b-table-stacked-md.gl-mt-n1.gl-mb-n2.ssh-keys-list{ data: { qa_selector: 'ssh_keys_list' } }
+      %thead.d-none.d-md-table-header-group
+        %tr
+          %th= s_('Profiles|Key')
+          %th= _('Status')
+          %th= _('Created')
+          %th= _('Actions')
+      = render partial: 'profiles/gpg_keys/key', collection: @gpg_keys, locals: { is_admin: is_admin }
+
 - else
-  %p.settings-message.text-center
+  %p.gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content{ class: hide_class }
     - if is_admin
       = _('There are no GPG keys associated with this account.')
     - else
diff --git a/app/views/profiles/gpg_keys/index.html.haml b/app/views/profiles/gpg_keys/index.html.haml
index 2dfd6c7860f..2714193d1d1 100644
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
@@ -1,6 +1,8 @@
 - page_title _('GPG Keys')
 - add_page_specific_style 'page_bundles/profile'
 - @force_desktop_expanded_sidebar = true
+- add_form_class = 'gl-display-none' if !form_errors(@gpg_key)
+- hide_class = 'gl-display-none' if form_errors(@gpg_key)
 
 .settings-section.js-search-settings-section
   .settings-sticky-header
@@ -10,17 +12,24 @@
   %p.gl-text-secondary
     = _('GPG keys allow you to verify signed commits.')
 
-  %h5.gl-font-lg.gl-mt-0
-    = _('Add a GPG key')
-  %p
-    - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/repository/gpg_signed_commits/index.md') }
-    = _('Add a GPG key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
-  = render 'form'
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Your GPG keys')
+        .gl-new-card-count
+          = sprite_icon('key', css_class: 'gl-mr-2')
+          = @gpg_keys.count
+      .gl-new-card-actions
+        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
+          = _('Add new key')
+    - c.with_body do
+      .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+        %h4.gl-mt-0
+          = _('Add a GPG key')
+        %p
+          - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/repository/gpg_signed_commits/index.md') }
+          = _('Add a GPG key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
+        = render 'form'
 
-.settings-section.js-search-settings-section
-  .settings-sticky-header
-    .settings-sticky-header-inner
-      %h4.gl-my-0
-        = _('Your GPG keys (%{count})') % { count: @gpg_keys.count }
-  .gl-mb-3
-    = render 'key_table'
+      = render 'key_table', hide_class: hide_class
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 5c4ea7b2ecb..b1df63a72ab 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -25,12 +25,13 @@
           %p.form-text.text-muted= ssh_key_expires_field_description
 
     .js-add-ssh-key-validation-warning.hide
-      .bs-callout.bs-callout-warning{ role: 'alert', aria_live: 'assertive' }
+      .bs-callout.bs-callout-warning.gl-mt-0{ role: 'alert', aria_live: 'assertive' }
         %strong= _('Oops, are you sure?')
         %p= s_("Profiles|Publicly visible private SSH keys can compromise your system.")
-
       = render Pajamas::ButtonComponent.new(variant: :confirm,
         button_options: { class: 'js-add-ssh-key-validation-confirm-submit' }) do
         = _("Yes, add it")
-    .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit", pajamas_button: true, data: { qa_selector: 'add_key_button' }
+
+    = f.submit s_('Profiles|Add key'), class: "js-add-ssh-key-validation-original-submit", pajamas_button: true, data: { qa_selector: 'add_key_button' }
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-add-ssh-key-validation-cancel gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 288007ec806..7ba42274f88 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,43 +1,49 @@
 - icon_classes = 'settings-list-icon gl-display-none gl-sm-display-block'
 
-%li.key-list-item
-  .gl-display-flex.gl-align-items-flex-start
-    .key-list-item-info.gl-w-full.float-none
-      = link_to path_to_key(key, is_admin), class: "title text-3" do
-        = key.title
+%tr.key-list-item
+  %td{ data: { label: _('Title'), testid: 'title' } }
+    = link_to path_to_key(key, is_admin) do
+      = key.title
 
-      .gl-display-flex.gl-align-items-center.gl-mt-2
-        - if key.valid? && !key.expired?
-          = sprite_icon('key', css_class: icon_classes)
-        - else
-          %span.gl-display-inline-block.has-tooltip{ title: ssh_key_expiration_tooltip(key) }
-            = sprite_icon('warning-solid', css_class: icon_classes)
+  %td{ data: { label: s_('Profiles|Key'), testid: 'key' } }
+    .gl-align-items-center{ class: 'gl-display-flex! gl-pl-0!' }
+      - if key.valid? && !key.expired?
+        = sprite_icon('key', css_class: icon_classes)
+      - else
+        %span.gl-display-inline-block.has-tooltip{ title: ssh_key_expiration_tooltip(key) }
+          = sprite_icon('warning-solid', css_class: icon_classes)
+      %span.gl-text-truncate.gl-sm-ml-3
+        = key.fingerprint
 
-        %span.gl-text-truncate.gl-sm-ml-3
-          = key.fingerprint
+  %td{ data: { label: s_('Profiles|Usage type'), testid: 'usage-type' } }
+    = ssh_key_usage_types.invert[key.usage_type]
 
-      .gl-mt-3= html_escape(s_('Profiles|Created%{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at, html_class: 'gl-ml-2').html_safe}
+  %td{ data: { label: s_('Profiles|Created'), testid: 'created' } }
+    = html_escape(s_('%{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at).html_safe}
 
-      .key-list-item-dates
-        %span.last-used-at.gl-mr-3
-          = s_('Profiles|Last used:')
-          -# TODO: Remove this conditional when https://gitlab.com/gitlab-org/gitlab/-/issues/324764 is resolved.
-          - if Feature.enabled?(:disable_ssh_key_used_tracking)
-            = _('Unavailable')
-            = link_to sprite_icon('question-o'), help_page_path('user/ssh.md', anchor: 'view-your-accounts-ssh-keys')
-          - else
-            = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
-        %span.expires.gl-mr-3
-          = key.expired? ? s_('Profiles|Expired:') : s_('Profiles|Expires:')
-          = key.expires_at ? key.expires_at.to_date : _('Never')
-        %span.last-used-at.gl-mr-3
-          = s_('Profiles|Usage type:')
-          = ssh_key_usage_types.invert[key.usage_type]
-      .gl-display-flex.gl-float-right
-        - if key.can_delete?
-          - if key.signing? && !is_admin
-            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', data: ssh_key_revoke_modal_data(key, revoke_profile_key_path(key)) }) do
-              = _('Revoke')
-          .gl-pl-3
-            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) }) do
-              = _('Remove')
+  %td{ data: { label: s_('Profiles|Last used'), testid: 'last-used' } }
+    -# TODO: Remove this conditional when https://gitlab.com/gitlab-org/gitlab/-/issues/324764 is resolved.
+    - if Feature.enabled?(:disable_ssh_key_used_tracking)
+      = _('Unavailable')
+      = link_to sprite_icon('question-o'), help_page_path('user/ssh.md', anchor: 'view-your-accounts-ssh-keys')
+    - else
+      = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
+
+  %td{ data: { label: s_('Profiles|Expires'), testid: 'expires' } }
+    - if key.expired?
+      %span.gl-text-red-500
+        = s_('Profiles|Expired')
+        = key.expires_at.to_date
+    - elsif key.expires_at
+      = key.expires_at.to_date
+    - else
+      = _('Never')
+
+  %td{ data: { label: _('Actions'), testid: 'actions' } }
+    %div{ class: 'gl-display-flex! gl-pl-0!' }
+      - if key.can_delete?
+        - if key.signing? && !is_admin
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-confirm-modal-button', 'aria-label' => _('Revoke'), data: ssh_key_revoke_modal_data(key, revoke_profile_key_path(key)) }) do
+            = _('Revoke')
+        .gl-pl-3
+          = render Pajamas::ButtonComponent.new(size: :small, icon: 'remove', button_options: { title: _('Remove'), 'aria-label' => _('Remove'), class: 'js-confirm-modal-button', data: ssh_key_delete_modal_data(key, path_to_key(key, is_admin)) })
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index f1d5a127728..d5193a424ef 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -1,45 +1,70 @@
 - is_admin = defined?(admin) ? true : false
-.row.gl-mt-3
-  .col-md-4
-    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.with_header do
-        = _('SSH Key')
-      - c.with_body do
-        %ul.content-list
-          %li
-            %span.light= _('Title:')
-            %strong= @key.title
-          %li
-            %span.light= s_('Profiles|Usage type:')
-            %strong= ssh_key_usage_types.invert[@key.usage_type]
-          %li
-            %span.light= _('Created on:')
-            %strong= @key.created_at.to_fs(:medium)
-          %li
-            %span.light= _('Expires:')
-            %strong= @key.expires_at&.to_fs(:medium) || _('Never')
-          %li
-            %span.light= _('Last used on:')
-            %strong= @key.last_used_at&.to_fs(:medium) || _('Never')
 
-  .col-md-8
-    = form_errors(@key, type: 'key') unless @key.valid?
-    %pre.well-pre
-      = @key.key
-    = render Pajamas::CardComponent.new(body_options: { class: 'gl-py-0'}) do |c|
-      - c.with_header do
-        = _('Fingerprints')
-      - c.with_body do
-        %ul.content-list
-          %li
-            %span.light= 'MD5:'
-            %code.key-fingerprint= @key.fingerprint
-          - if @key.fingerprint_sha256.present?
-            %li
-              %span.light= 'SHA256:'
-              %code.key-fingerprint= @key.fingerprint_sha256
+%h1.gl-font-size-h-display
+  = s_('Profiles|SSH Key: %{title}').html_safe % { title: @key.title }
 
-  .col-md-12
-    .float-right
-      - if @key.can_delete?
-        = render 'shared/ssh_keys/key_delete', button_data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0'}) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      .gl-new-card-title
+        = _('Key details')
+  - c.with_body do
+    .table-holder
+      %table.table.b-table.gl-table.b-table-stacked-md.ssh-keys-list
+        %thead
+          %th= s_('Profiles|Usage type')
+          %th= s_('Profiles|Created')
+          %th= s_('Profiles|Last used')
+          %th= s_('Profiles|Expires')
+        %tbody
+          %tr
+            %td{ data: { label: s_('Profiles|Usage type'), testid: 'usage' } }
+              = ssh_key_usage_types.invert[@key.usage_type]
+            %td{ data: { label: s_('Profiles|Created'), testid: 'created' } }
+              = @key.created_at.to_fs(:medium)
+            %td{ data: { label: s_('Profiles|Last used'), testid: 'last-used' } }
+              = @key.last_used_at&.to_fs(:medium) || _('Never')
+            %td{ data: { label: s_('Profiles|Expires'), testid: 'expires' } }
+              - if @key.expired?
+                %span.gl-text-red-500
+                  = s_('Profiles|Expired')
+                  = @key.expires_at&.to_fs(:medium)
+              - elsif @key.expires_at
+                = @key.expires_at&.to_fs(:medium)
+              - else
+                = _('Never')
+
+.gl-mt-5
+  = form_errors(@key, type: 'key') unless @key.valid?
+
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0 gl-overflow-hidden'}) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        .gl-new-card-title
+          = _('SSH Key')
+    - c.with_body do
+      .gl-display-flex
+        %pre.well-pre.gl-pl-5.gl-mb-0.gl-border-0
+          = @key.key
+        = clipboard_button(title: s_('Profiles|Copy SSH key'), text: @key.key, class: 'gl-bg-gray-10 gl-px-3! gl-border-none! gl-rounded-top-left-none! gl-rounded-bottom-left-none!')
+
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0'}) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        .gl-new-card-title
+          = _('Fingerprints')
+    - c.with_body do
+      .table-holder
+        %table.table.b-table.gl-table.b-table-stacked-md
+          %tbody
+            %tr
+              %th= _('MD5')
+              %td.gl-font-monospace.key-fingerprint= @key.fingerprint
+            - if @key.fingerprint_sha256.present?
+              %tr
+                %th= _('SHA256')
+                %td.gl-font-monospace.key-fingerprint= @key.fingerprint_sha256
+
+.gl-mt-5.gl-float-right
+  - if @key.can_delete?
+    = render 'shared/ssh_keys/key_delete', button_data: ssh_key_delete_modal_data(@key, path_to_key(@key, is_admin))
diff --git a/app/views/profiles/keys/_key_table.html.haml b/app/views/profiles/keys/_key_table.html.haml
index 176d7a42002..cfe507ad65d 100644
--- a/app/views/profiles/keys/_key_table.html.haml
+++ b/app/views/profiles/keys/_key_table.html.haml
@@ -1,10 +1,21 @@
 - is_admin = local_assigns.fetch(:admin, false)
+- hide_class = local_assigns.fetch(:hide_class, false)
 
 - if @keys.any?
-  %ul.content-list.ssh-keys-list{ data: { qa_selector: 'ssh_keys_list' } }
-    = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
+  .table-holder
+    %table.table.b-table.gl-table.b-table-stacked-md.gl-mt-n1.gl-mb-n2.ssh-keys-list{ data: { qa_selector: 'ssh_keys_list' } }
+      %thead.d-none.d-md-table-header-group
+        %tr
+          %th= _('Title')
+          %th= s_('Profiles|Key')
+          %th= s_('Profiles|Usage type')
+          %th= s_('Profiles|Created')
+          %th= s_('Profiles|Last used')
+          %th= s_('Profiles|Expires')
+          %th= _('Actions')
+      = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
-  %p.settings-message.text-center
+  %p.gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content{ class: hide_class }
     - if is_admin
       = _('There are no SSH keys associated with this account.')
     - else
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index c2e65dcc8ef..0cd41788a53 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,6 +1,8 @@
 - page_title _('SSH Keys')
 - add_page_specific_style 'page_bundles/profile'
 - @force_desktop_expanded_sidebar = true
+- add_form_class = 'gl-display-none' if !form_errors(@key)
+- hide_class = 'gl-display-none' if form_errors(@key)
 
 .settings-section.js-search-settings-section
   .settings-sticky-header
@@ -12,17 +14,24 @@
     - config_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_instance_configuration_url }
     = html_escape(s_('SSH fingerprints verify that the client is connecting to the correct host. Check the %{config_link_start}current instance configuration%{config_link_end}.')) % { config_link_start: config_link_start, config_link_end: '</a>'.html_safe }
 
-  %h5.gl-font-lg.gl-mt-0
-    = _('Add an SSH key')
-  %p
-    - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/ssh.md') }
-    = _('Add an SSH key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
-  = render 'form'
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Your SSH keys')
+        .gl-new-card-count
+          = sprite_icon('key', css_class: 'gl-mr-2')
+          = @keys.count
+      .gl-new-card-actions
+        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
+          = _('Add new key')
+    - c.with_body do
+      .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+        %h4.gl-mt-0
+          = _('Add an SSH key')
+        %p
+          - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/ssh.md') }
+          = _('Add an SSH key for secure access to GitLab. %{help_link_start}Learn more%{help_link_end}.').html_safe % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
+        = render 'form'
 
-.settings-section.js-search-settings-section
-  .settings-sticky-header
-    .settings-sticky-header-inner
-      %h4.gl-my-0
-        = _('Your SSH keys (%{count})') % { count: @keys.count }
-  .gl-mb-3
-    = render 'key_table'
+      = render 'key_table', hide_class: hide_class
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 5020f6cbb22..c12f6907afb 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -16,13 +16,26 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  = render 'shared/access_tokens/form',
-      ajax: true,
-      type: type,
-      path: profile_personal_access_tokens_path,
-      token: @personal_access_token,
-      scopes: @scopes,
-      help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active personal access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      .gl-new-card-actions
+        = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
+          = _('Add new token')
+    - c.with_body do
+      .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+        = render 'shared/access_tokens/form',
+            ajax: true,
+            type: type,
+            path: profile_personal_access_tokens_path,
+            token: @personal_access_token,
+            scopes: @scopes,
+            help_path: help_page_path('user/profile/personal_access_tokens.md', anchor: 'personal-access-token-scopes')
 
   #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json } }
 
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index e5e7c1dc3f4..681d4e087f3 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -3,6 +3,8 @@
 - user_theme_id = Gitlab::Themes.for_user(@user).id
 - user_color_schema_id = Gitlab::ColorSchemes.for_user(@user).id
 - user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
+- fixed_help_text = s_('Preferences|Content will be a maximum of 1280 pixels wide.')
+- fluid_help_text = s_('Preferences|Content will span %{percentage} of the page width.').html_safe % { percentage: '100%' }
 - @themes = Gitlab::Themes::available_themes.to_json
 - data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }
 - @force_desktop_expanded_sidebar = true
@@ -11,6 +13,7 @@
   = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename
 
 = gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
+  = render_if_exists 'profiles/preferences/code_suggestions_settings_self_assignment'
   .settings-section.js-preferences-form.js-search-settings-section.application-theme#navigation-theme
     .settings-sticky-header
       .settings-sticky-header-inner
@@ -18,9 +21,6 @@
           = s_('Preferences|Color theme')
     %p.gl-text-secondary
       = s_('Preferences|Customize the color of GitLab.')
-    - if show_super_sidebar?
-      %p
-        = s_('Preferences|Note: You have the new navigation enabled, so only Dark Mode theme significantly changes GitLab\'s appearance.')
     .application-theme.row
       - Gitlab::Themes.each do |theme|
         %label.col-6.col-sm-4.col-md-3.col-xl-2.gl-mb-5
@@ -37,7 +37,7 @@
     %p.gl-text-secondary
       = s_('Preferences|Customize the appearance of the syntax.')
       = succeed '.' do
-        = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'change-the-syntax-highlighting-theme'), target: '_blank', rel: 'noopener noreferrer'
     .syntax-theme.row
       - Gitlab::ColorSchemes.each do |scheme|
         %label.col-6.col-sm-4.col-md-3.col-lg-auto.gl-mb-5
@@ -68,17 +68,17 @@
     .form-group
       = f.label :layout, class: 'label-bold' do
         = s_('Preferences|Layout width')
-      = f.select :layout, layout_choices, {}, class: 'gl-form-select custom-select'
-      .form-text.text-muted
-        = s_('Preferences|Choose between fixed (max. 1280px) and fluid (%{percentage}) application layout.').html_safe % { percentage: '100%' }
-    .js-listbox-input{ data: { label: s_('Preferences|Homepage'), description: s_('Preferences|Choose what content you want to see by default on your homepage.'), name: 'user[dashboard]', items: dashboard_choices.to_json, value: current_user.dashboard, block: true.to_s, fluid_width: true.to_s } }
+      = f.gitlab_ui_radio_component :layout, layout_choices[0][1], layout_choices[0][0], help_text: fixed_help_text
+      = f.gitlab_ui_radio_component :layout, layout_choices[1][1], layout_choices[1][0], help_text: fluid_help_text
+
+    .js-listbox-input{ data: { label: s_('Preferences|Homepage'), description: s_('Preferences|Choose what content you want to see by default on your homepage.'), name: 'user[dashboard]', items: dashboard_choices.to_json, value: current_user.dashboard, block: true.to_s, toggle_class: 'gl-form-input-xl' } }
 
     = render_if_exists 'profiles/preferences/group_overview_selector', f: f # EE-specific
 
     .form-group
       = f.label :project_view, class: 'label-bold' do
         = s_('Preferences|Project overview content')
-      = f.select :project_view, project_view_choices, {}, class: 'gl-form-select custom-select'
+      = f.select :project_view, project_view_choices, {}, class: 'gl-form-select custom-select gl-form-input-xl gl-display-block'
       .form-text.text-muted
         = s_('Preferences|Choose what content you want to see on a project’s overview page.')
     .form-group
@@ -104,7 +104,7 @@
     .form-group
       = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
       = f.number_field :tab_width,
-                      class: 'form-control gl-form-input',
+                      class: 'form-control gl-form-input gl-max-w-15',
                       min: Gitlab::TabWidth::MIN,
                       max: Gitlab::TabWidth::MAX,
                       required: true
@@ -120,7 +120,8 @@
       = _('Customize language and region related settings.')
       = succeed '.' do
         = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'localization'), target: '_blank', rel: 'noopener noreferrer'
-    .js-listbox-input{ data: { label: _('Language'), description: s_('Preferences|This feature is experimental and translations are not yet complete.'), name: 'user[preferred_language]', items: language_choices.to_json, value: current_user.preferred_language, block: true.to_s, fluid_width: true.to_s } }
+
+    .js-listbox-input{ data: { label: _('Language'), description: s_('Preferences|This feature is experimental and translations are not yet complete.'), name: 'user[preferred_language]', items: language_choices.to_json, value: current_user.preferred_language, block: true.to_s, toggle_class: 'gl-form-input-xl' } }
     %p.gl-mt-n5
       = link_to help_page_url('development/i18n/translation'), class: 'text-nowrap', target: '_blank', rel: 'noopener noreferrer' do
         = _("Help translate GitLab into your language")
@@ -129,7 +130,7 @@
     .form-group
       = f.label :first_day_of_week, class: 'label-bold' do
         = _('First day of the week')
-      = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'gl-form-select custom-select'
+      = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'gl-form-select custom-select gl-display-block gl-form-input-xl'
 
   .settings-section.js-preferences-form.js-search-settings-section#time-preferences
     .settings-sticky-header
@@ -144,19 +145,18 @@
       = f.gitlab_ui_checkbox_component :time_display_relative,
         s_('Preferences|Use relative times'),
         help_text: s_('Preferences|For example: 30 minutes ago.')
-  - if Feature.enabled?(:disable_follow_users, @user)
-    .settings-section.js-preferences-form.js-search-settings-section#enabled_following
-      .settings-sticky-header
-        .settings-sticky-header-inner
-          %h4.gl-my-0
-            = s_('Preferences|Enable follow users feature')
-      %p.gl-text-secondary
-        = s_('Preferences|Turns on or off the ability to follow or be followed by other users.')
-        = succeed '.' do
-          = link_to _('Learn more'), help_page_path('user/profile/index', anchor: 'follow-users'), target: '_blank', rel: 'noopener noreferrer'
-      .form-group
-        = f.gitlab_ui_checkbox_component :enabled_following,
-        s_('Preferences|Enable follow users')
+  .settings-section.js-preferences-form.js-search-settings-section#enabled_following
+    .settings-sticky-header
+      .settings-sticky-header-inner
+        %h4.gl-my-0
+          = s_('Preferences|Enable follow users feature')
+    %p.gl-text-secondary
+      = s_('Preferences|Turns on or off the ability to follow or be followed by other users.')
+      = succeed '.' do
+        = link_to _('Learn more'), help_page_path('user/profile/index', anchor: 'follow-users'), target: '_blank', rel: 'noopener noreferrer'
+    .form-group
+      = f.gitlab_ui_checkbox_component :enabled_following,
+      s_('Preferences|Enable follow users')
   = render_if_exists 'profiles/preferences/code_suggestions_settings', form: f
   = render_if_exists 'profiles/preferences/zoekt_settings', form: f
 
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index ebdea5786f5..4da48771ba3 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -5,7 +5,7 @@
 - @force_desktop_expanded_sidebar = true
 
 - if Feature.enabled?(:edit_user_profile_vue, current_user)
-  .js-user-profile
+  .js-user-profile{ data: user_profile_data(@user) }
 - else
   = gitlab_ui_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user js-edit-user js-quick-submit gl-show-field-errors js-password-prompt-form', remote: true }, authenticity_token: true do |f|
     .settings-section.js-search-settings-section
diff --git a/app/views/projects/_deletion_failed.html.haml b/app/views/projects/_deletion_failed.html.haml
index 29551505a7e..7ddb80c90f9 100644
--- a/app/views/projects/_deletion_failed.html.haml
+++ b/app/views/projects/_deletion_failed.html.haml
@@ -5,5 +5,7 @@
   dismissible: false,
   alert_options: { class: 'project-deletion-failed-message' }) do |c|
   - c.with_body do
-    This project was scheduled for deletion, but failed with the following message:
+    = _('This project was scheduled for deletion, but failed with the following message:')
     = project.delete_error
+    %br
+    = _('The project visibility may have been made more restrictive if the parent group\'s visibility changed while the deletion was scheduled.')
diff --git a/app/views/projects/_export.html.haml b/app/views/projects/_export.html.haml
index 3ef2c722e98..20fb2b43c63 100644
--- a/app/views/projects/_export.html.haml
+++ b/app/views/projects/_export.html.haml
@@ -2,30 +2,35 @@
 
 - project = local_assigns.fetch(:project)
 
-.sub-section{ data: { qa_selector: 'export_project_content' } }
-  %h4= _('Export project')
-  - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/import_export') }
-  %p= _('Export this project with all its related data in order to move it to a new GitLab instance. When the exported file is ready, you can download it from this page or from the download link in the email notification you will receive. You can then import it when creating a new project. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-  %p.gl-mb-0
-    %p= _('The following items will be exported:')
-    %ul
-      - project_export_descriptions.each do |desc|
-        %li= desc
-    %p= _('The following items will NOT be exported:')
-    %ul
-      %li= _('Job logs and artifacts')
-      %li= _('Container registry images')
-      %li= _('CI variables')
-      %li= _('Pipeline triggers')
-      %li= _('Webhooks')
-      %li= _('Any encrypted tokens')
-  - if project.export_status == :finished
-    = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
-      method: :get,
-      button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
-      = _('Download export')
-    = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
-      = _('Generate new export')
-  - else
-    = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
-      = _('Export project')
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'export_project_content' } }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title= _('Export project')
+
+  - c.with_body do
+    %p
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/import_export') }
+      = _('Export this project with all its related data in order to move it to a new GitLab instance. When the exported file is ready, you can download it from this page or from the download link in the email notification you will receive. You can then import it when creating a new project. %{link_start}Learn more.%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    .gl-mb-0
+      %p.gl-font-weight-bold= _('The following items will be exported:')
+      %ul
+        - project_export_descriptions.each do |desc|
+          %li= desc
+      %p.gl-font-weight-bold= _('The following items will NOT be exported:')
+      %ul
+        %li= _('Job logs and artifacts')
+        %li= _('Container registry images')
+        %li= _('CI variables')
+        %li= _('Pipeline triggers')
+        %li= _('Webhooks')
+        %li= _('Any encrypted tokens')
+    - if project.export_status == :finished
+      = render Pajamas::ButtonComponent.new(href: download_export_project_path(project),
+        method: :get,
+        button_options: { ref: 'nofollow', download: '', data: { qa_selector: 'download_export_link' } }) do
+        = _('Download export')
+      = render Pajamas::ButtonComponent.new(href: generate_new_export_project_path(project), method: :post) do
+        = _('Generate new export')
+    - else
+      = render Pajamas::ButtonComponent.new(href: export_project_path(project), method: :post, button_options: { data: { qa_selector: 'export_project_link' } }) do
+        = _('Export project')
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index b5bbb57d58f..cb341ede9de 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -3,19 +3,19 @@
 - ref = local_assigns.fetch(:ref) { current_ref }
 - project = local_assigns.fetch(:project) { @project }
 - has_project_shortcut_buttons = !current_user || current_user.project_shortcut_buttons
-- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0)
+- add_page_startup_api_call logs_file_project_ref_path(@project, ref, @path, format: "json", offset: 0, ref_type: @ref_type)
 - if readme_path = @project.repository.readme_path
   - add_page_startup_api_call project_blob_path(@project, tree_join(@ref, readme_path), viewer: "rich", format: "json")
 
 #tree-holder.tree-holder.clearfix.js-per-page{ data: { blame_per_page: Gitlab::Git::BlamePagination::PAGINATION_PER_PAGE } }
   .info-well.gl-display-none.gl-sm-display-flex.project-last-commit.gl-flex-direction-column.gl-mt-5
-    #js-last-commit.gl-m-auto
+    #js-last-commit.gl-m-auto{ data: {ref_type: @ref_type.to_s} }
       = gl_loading_icon(size: 'md')
     - if project.licensed_feature_available?(:code_owners)
       #js-code-owners{ data: { branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
 
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
-    = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
+    = render 'projects/tree/tree_header', tree: @tree
 
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 59147138834..4ac30547ce3 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -8,10 +8,9 @@
       %div{ class: 'avatar-container rect-avatar s64 home-panel-avatar gl-flex-shrink-0 gl-w-11 gl-h-11 gl-mr-3! float-none' }
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64, itemprop: 'image')
       %div
-        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+        %h1.home-panel-title.gl-font-size-h1.gl-mt-3.gl-mb-2.gl-display-flex.gl-word-break-word{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
           = @project.name
-          %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(@project) }
-            = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
+          = visibility_level_content(@project, css_class: 'visibility-icon gl-text-secondary gl-ml-2', icon_css_class: 'icon')
           = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project, additional_classes: 'gl-align-self-center gl-ml-2'
           - if @project.group
             = render_if_exists 'shared/tier_badge', source: @project, source_type: 'Project'
diff --git a/app/views/projects/_merge_request_settings_description_text.html.haml b/app/views/projects/_merge_request_settings_description_text.html.haml
index dc9dc92675d..123520acad8 100644
--- a/app/views/projects/_merge_request_settings_description_text.html.haml
+++ b/app/views/projects/_merge_request_settings_description_text.html.haml
@@ -1 +1 @@
-%p= s_('ProjectSettings|Choose your merge method, merge options, merge checks, and merge suggestions.')
+%p.gl-text-secondary= s_('ProjectSettings|Choose your merge method, merge options, merge checks, and merge suggestions.')
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 983b8056358..ca1fef6eb32 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -9,7 +9,7 @@
   .form-group.gl-form-group.project-name.col-sm-12
     = f.label :name, class: 'label-bold' do
       %span= _("Project name")
-    = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { qa_selector: 'project_name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
+    = f.text_field :name, placeholder: "My awesome project", class: "form-control gl-form-input input-lg", data: { testid: 'project-name', track_label: "#{track_label}", track_action: "activate_form_input", track_property: "project_name", track_value: "" }, required: true, aria: { required: true }
     %small#js-project-name-description.form-text.text-gl-muted
       = s_("ProjectsNew|Must start with a lowercase or uppercase letter, digit, emoji, or underscore. Can also contain dots, pluses, dashes, or spaces.")
     #js-project-name-error.gl-field-error.gl-mt-2.gl-display-none
@@ -35,7 +35,7 @@
   .form-group.project-path.col-sm-6
     = f.label :path, class: 'label-bold' do
       %span= _("Project slug")
-    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }, data: { qa_selector: 'project_path', username: current_user.username }
+    = f.text_field :path, placeholder: "my-awesome-project", class: "form-control gl-form-input", required: true, aria: { required: true }, data: { testid: 'project-path', username: current_user.username }
 .js-group-namespace-error.form-text.gl-text-red-500.gl-display-none
   = s_('ProjectsNew|Pick a group or namespace where you want to create this project.')
 - if current_user.can_create_group?
@@ -59,7 +59,7 @@
       class: "form-control gl-form-input",
       rows: 3,
       maxlength: 250,
-      data: { qa_selector: 'project_description',
+      data: { testid: 'project-description',
               track_label: track_label,
               track_action: "activate_form_input",
               track_property: "project_description" }
@@ -71,7 +71,7 @@
   = f.label :visibility_level, class: 'label-bold' do
     = s_('ProjectsNew|Visibility Level')
     = link_to sprite_icon('question-o'), help_page_path('user/public_access'), aria: { label: 'Documentation for Visibility Level' }, target: '_blank', rel: 'noopener noreferrer'
-  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false, data: { qa_selector: 'visibility_radios'}
+  = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false, data: { testid: 'visibility-radios'}
 
 - if !hide_init_with_readme
   = f.label :project_configuration, class: 'label-bold' do
@@ -80,7 +80,7 @@
   .form-group
     = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_readme]',
       checked: true,
-      checkbox_options: { data: { qa_selector: 'initialize_with_readme_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' } }) do |c|
+      checkbox_options: { data: { testid: 'initialize-with-readme-checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_readme' } }) do |c|
       - c.with_label do
         = s_('ProjectsNew|Initialize repository with a README')
       - c.with_help_text do
@@ -88,7 +88,7 @@
 
   .form-group
     = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
-      checkbox_options: { data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
+      checkbox_options: { data: { testid: 'initialize-with-sast-checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
       - c.with_label do
         = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
       - c.with_help_text do
@@ -97,5 +97,5 @@
 
 -# this partial is from JiHu, see details in https://jihulab.com/gitlab-cn/gitlab/-/merge_requests/675
 = render_if_exists 'shared/other_project_options', f: f, visibility_level: visibility_level, track_label: track_label
-= f.submit _('Create project'), class: "js-create-project-button", data: { qa_selector: 'project_create_button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
+= f.submit _('Create project'), class: "js-create-project-button", data: { testid: 'project-create-button', track_label: "#{track_label}", track_action: "click_button", track_property: "create_project", track_value: "" }, pajamas_button: true
 = link_button_to _('Cancel'), @parent_group || dashboard_groups_path, data: { track_label: "#{track_label}", track_action: "click_button", track_property: "cancel", track_value: "" }
diff --git a/app/views/projects/_remove.html.haml b/app/views/projects/_remove.html.haml
index dec3199ffe1..12b310f8ba0 100644
--- a/app/views/projects/_remove.html.haml
+++ b/app/views/projects/_remove.html.haml
@@ -3,10 +3,14 @@
 - issues_count = Projects::AllIssuesCountService.new(project).count
 - forks_count = Projects::ForksCountService.new(project).count
 
-.sub-section
-  %h4.danger-title= _('Delete project')
-  %p
-    %strong= _('Deleting the project will delete its repository and all related resources, including issues and merge requests.')
-  %p
-    %strong= _('Deleted projects cannot be restored!')
-  #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-bg-red-50 gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.danger-title= _('Delete project')
+
+  - c.with_body do
+    %p
+      %strong= _('Deleting the project will delete its repository and all related resources, including issues and merge requests.')
+    %p
+      %strong= _('Deleted projects cannot be restored!')
+    #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
diff --git a/app/views/projects/_remove_fork.html.haml b/app/views/projects/_remove_fork.html.haml
index 260c2b2272e..2db78d0f62a 100644
--- a/app/views/projects/_remove_fork.html.haml
+++ b/app/views/projects/_remove_fork.html.haml
@@ -1,11 +1,15 @@
 - return unless @project.forked? && can?(current_user, :remove_fork_project, @project)
 - remove_form_id = "js-remove-project-fork-form"
 
-.sub-section
-  %h4.danger-title= _('Remove fork relationship')
-  %p= remove_fork_project_description_message(@project)
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.danger-title= _('Remove fork relationship')
+    %p.gl-new-card-description
+      = remove_fork_project_description_message(@project)
 
-  = form_for @project, url: remove_fork_project_path(@project), method: :delete, html: { id: remove_form_id } do |f|
-    %p
-      %strong= _('After it is removed, the fork relationship can only be restored by using the API. This project will no longer be able to receive or send merge requests to the upstream project or other forks.')
-    .js-confirm-danger{ data: remove_fork_project_confirm_json(@project, remove_form_id) }
+  - c.with_body do
+    = form_for @project, url: remove_fork_project_path(@project), method: :delete, html: { id: remove_form_id } do |f|
+      %p
+        %strong= _('After it is removed, the fork relationship can only be restored by using the API. This project will no longer be able to receive or send merge requests to the upstream project or other forks.')
+      .js-confirm-danger{ data: remove_fork_project_confirm_json(@project, remove_form_id) }
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 0a83efdb3b8..c2382a66132 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -5,7 +5,7 @@
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
     - link_start = "<a href='#{help_page_path('user/project/service_desk')}' target='_blank' rel='noopener noreferrer'>".html_safe
-    %p= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    %p.gl-text-secondary= _('Enable and disable Service Desk. Some additional configuration might be required. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
     - if ::Gitlab::ServiceDesk.supported?
       .js-service-desk-setting-root{ data: { endpoint: project_service_desk_path(@project),
@@ -19,6 +19,7 @@
         outgoing_name: "#{@project.service_desk_setting&.outgoing_name}",
         project_key: "#{@project.service_desk_setting&.project_key}",
         templates: available_service_desk_templates_for(@project),
-        public_project: "#{@project.public?}" } }
+        public_project: "#{@project.public?}",
+        custom_email_endpoint: project_service_desk_custom_email_path(@project) } }
     - elsif show_callout?('promote_service_desk_dismissed')
       = render 'shared/promotions/promote_servicedesk'
diff --git a/app/views/projects/_transfer.html.haml b/app/views/projects/_transfer.html.haml
index 93fc8d12960..fe84a83c43c 100644
--- a/app/views/projects/_transfer.html.haml
+++ b/app/views/projects/_transfer.html.haml
@@ -3,21 +3,29 @@
 - hidden_input_id = "new_namespace_id"
 - initial_data = { button_text: s_('ProjectSettings|Transfer project'), confirm_danger_message: transfer_project_message(@project), phrase: @project.name, target_form_id: form_id, target_hidden_input_id: hidden_input_id, project_id: @project.id }
 
-.sub-section{ data: { qa_selector: 'transfer_project_content' } }
-  %h4.danger-title= _('Transfer project')
-  = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
-    .form-group
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'transfer_project_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title= _('Transfer project')
+    %p.gl-new-card-description
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'transfer-a-project-to-another-namespace') }
-      %p= _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-      %p= _('When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, pipeline minutes, and users, and start a trial or upgrade to a paid tier.')
-      %p
-        = _("Don't have a group?")
-        = link_to _('Create one'), new_group_path, target: '_blank'
-      = _('Things to be aware of before transferring:')
-      %ul
-        %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
-        %li= _('You can only transfer the project to namespaces you manage.')
-        %li= _('You will need to update your local repositories to point to the new location.')
-        %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
-      = hidden_field_tag(hidden_input_id)
-      .js-transfer-project-form{ data: initial_data }
+      = _("Transfer your project into another namespace. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
+  - c.with_body do
+    = form_for @project, url: transfer_project_path(@project), method: :put, html: { class: 'js-project-transfer-form', id: form_id } do |f|
+      .form-group.gl-mb-0
+        %p
+          - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'rename-a-repository') }
+          = _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+        %p= _('When you transfer your project to a group, you can easily manage multiple projects, view usage quotas for storage, pipeline minutes, and users, and start a trial or upgrade to a paid tier.')
+        %p
+          = _("Don't have a group?")
+          = link_to _('Create one'), new_group_path, target: '_blank'
+        %p.gl-font-weight-bold= _('Things to be aware of before transferring:')
+        %ul
+          %li= _("Be careful. Changing the project's namespace can have unintended side effects.")
+          %li= _('You can only transfer the project to namespaces you manage.')
+          %li= _('You will need to update your local repositories to point to the new location.')
+          %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
+        = hidden_field_tag(hidden_input_id)
+        .js-transfer-project-form{ data: initial_data }
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index e82e0972d82..82cfb0435c7 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -7,7 +7,7 @@
   .landing{ class: [('row-content-block row p-0 align-items-center' if can_create_wiki), ('content-block' unless can_create_wiki)] }
     .col-12.col-md-3.p-0
       .svg-content
-        = image_tag 'illustrations/wiki_login_empty.svg'
+        = image_tag 'illustrations/empty-state/empty-wiki-md.svg'
     .col-12.col-md-9.text-center.text-md-left.pl-md-0.pl-sm-3.mb-4
       %h4
         = _("This project does not have a wiki homepage yet")
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index e5566882371..543bdaf46df 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -24,7 +24,7 @@
   - if !expanded
     -# Data info will be removed once we migrate this to use GraphQL
     -# Follow-up issue: https://gitlab.com/gitlab-org/gitlab/-/issues/330406
-    #js-view-blob-app{ data: vue_blob_app_data(project, blob, ref) }
+    #js-view-blob-app{ data: vue_blob_app_data(project, blob, ref).merge(ref_type: @ref_type.to_s) }
       = gl_loading_icon(size: 'md')
   - else
     %article.file-holder
diff --git a/app/views/projects/blob/_breadcrumb.html.haml b/app/views/projects/blob/_breadcrumb.html.haml
index 417c11ba37a..539453bf6af 100644
--- a/app/views/projects/blob/_breadcrumb.html.haml
+++ b/app/views/projects/blob/_breadcrumb.html.haml
@@ -1,21 +1,21 @@
 - blame = local_assigns.fetch(:blame, false)
 .nav-block
   .tree-ref-container
-    .tree-ref-holder
+    .tree-ref-holder.gl-max-w-26
       #js-tree-ref-switcher{ data: { project_id: @project.id, project_root_path: project_path(@project), ref: current_ref, ref_type: @ref_type.to_s } }
 
     %ul.breadcrumb.repo-breadcrumb
       %li.breadcrumb-item
-        = link_to project_tree_path(@project, @ref) do
+        = link_to project_tree_path(@project, @ref, ref_type: @ref_type) do
           = @project.path
       - path_breadcrumbs do |title, path|
         - title = truncate(title, length: 40)
         %li.breadcrumb-item
           - if path == @path
-            = link_to project_blob_path(@project, tree_join(@ref, path)) do
+            = link_to project_blob_path(@project, tree_join(@ref, path), ref_type: @ref_type) do
               %strong= title
           - else
-            = link_to title, project_tree_path(@project, tree_join(@ref, path))
+            = link_to title, project_tree_path(@project, tree_join(@ref, path), ref_type: @ref_type)
 
   .tree-controls.gl-children-ml-sm-3<
     = render 'projects/find_file_link'
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 68520d36858..49a29e1dcb7 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -8,23 +8,17 @@
       = sprite_icon('branch', size: 12)
       = ref
     - if current_action?(:edit) || current_action?(:update)
-      %span.float-left.gl-mr-3
-      = text_field_tag 'file_path', (params[:file_path] || @path),
-        class: 'form-control gl-form-input new-file-path js-file-path-name-input'
-      = render 'template_selectors'
+      - input_options = { id: 'file_path', name: 'file_path', value: (params[:file_path] || @path), class: 'new-file-path js-file-path-name-input' }
+      = render 'filepath_form', input_options: input_options
 
     - if current_action?(:new) || current_action?(:create)
-      %span.float-left.gl-mr-3
-        \/
-      = text_field_tag 'file_name', params[:file_name], placeholder: "Filename", data: { qa_selector: 'file_name_field' },
-        required: true, class: 'form-control gl-form-input new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
-      = render 'template_selectors'
+      - input_options = { id: 'file_name', name: 'file_name', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : ''), required: true, placeholder: "Filename", testid: 'file_name_field', class: 'new-file-name js-file-path-name-input' }
+      = render 'filepath_form', input_options: input_options
       - if should_suggest_gitlab_ci_yml?
-        .js-suggest-gitlab-ci-yml{ data: { target: '#gitlab-ci-yml-selector',
-          track_label: 'suggest_gitlab_ci_yml',
-          merge_request_path: params[:mr_path],
-          dismiss_key: @project.id,
-          human_access: human_access } }
+        .js-suggest-gitlab-ci-yml{ data: { track_label: 'suggest_gitlab_ci_yml',
+              merge_request_path: params[:mr_path],
+              dismiss_key: @project.id,
+              human_access: human_access } }
 
     - if Feature.enabled?(:source_editor_toolbar, current_user)
       #editor-toolbar
diff --git a/app/views/projects/blob/_filepath_form.html.haml b/app/views/projects/blob/_filepath_form.html.haml
new file mode 100644
index 00000000000..53c681fd264
--- /dev/null
+++ b/app/views/projects/blob/_filepath_form.html.haml
@@ -0,0 +1 @@
+= dropdown_data_attr(options: { data: { templates: { licenses: licenses_for_select(@project), gitignore_names: gitignore_names(@project), gitlab_ci_ymls: gitlab_ci_ymls(@project), dockerfile_names: dockerfile_names(@project) }, selected: params[:template], input_options: input_options }})
diff --git a/app/views/projects/blob/_pipeline_tour_success.html.haml b/app/views/projects/blob/_pipeline_tour_success.html.haml
index 0fa4a90e28b..f645d23aa1c 100644
--- a/app/views/projects/blob/_pipeline_tour_success.html.haml
+++ b/app/views/projects/blob/_pipeline_tour_success.html.haml
@@ -1,6 +1,6 @@
 .js-success-pipeline-modal{ data: { 'commit-cookie': suggest_pipeline_commit_cookie_name,
   'go-to-pipelines-path': project_pipelines_path(@project),
   'project-merge-requests-path': project_merge_requests_path(@project),
-  'example-link': help_page_path('ci/examples/index.md', anchor: 'gitlab-cicd-examples'),
+  'example-link': help_page_path('ci/examples/index.md'),
   'code-quality-link': help_page_path('ci/testing/code_quality'),
   'human-access': @project.team.human_max_access(current_user&.id) } }
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
deleted file mode 100644
index 0bd29ceb563..00000000000
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-.template-selectors-menu.gl-pl-3
-  .template-selector-dropdowns-wrap
-    .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-license-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: licenses_for_select(@project), project: @project.name, fullname: @project.namespace.human_name, qa_selector: 'license_dropdown' } })
-    .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitignore-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitignore_names(@project), qa_selector: 'gitignore_dropdown' } })
-    #gitlab-ci-yml-selector.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitlab-ci-yml-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project), selected: params[:template], qa_selector: 'gitlab_ci_yml_dropdown' } })
-    .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
-      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-dockerfile-selector', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: dockerfile_names(@project), qa_selector: 'dockerfile_dropdown' } })
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index c8cf12c36f9..9ec824f64d4 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -4,13 +4,13 @@
 - signatures_path = namespace_project_signatures_path(namespace_id: @project.namespace.full_path, project_id: @project.path, id: @last_commit, limit: 1)
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
-- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
+- add_page_startup_graphql_call('repository/blob_info', { projectPath: @project.full_path, ref: current_ref, refType: @ref_type.to_s, filePath: @blob.path, shouldFetchRawText: @blob.rendered_as_text? && !@blob.rich_viewer })
 
 .js-signature-container{ data: { 'signatures-path': signatures_path } }
 
 = render 'projects/last_push'
 
-#tree-holder.tree-holder
+#tree-holder.tree-holder.gl-pt-4
   = render 'blob', blob: @blob
 
 = render partial: 'pipeline_tour_success' if show_suggest_pipeline_creation_celebration?
diff --git a/app/views/projects/branch_defaults/_show.html.haml b/app/views/projects/branch_defaults/_show.html.haml
index 4ecbc3b7fc8..5906cd34c17 100644
--- a/app/views/projects/branch_defaults/_show.html.haml
+++ b/app/views/projects/branch_defaults/_show.html.haml
@@ -5,7 +5,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Branch defaults')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ProjectSettings|Select the default branch for this project, and configure the template for branch names.')
 
   .settings-content
diff --git a/app/views/projects/branch_rules/_show.html.haml b/app/views/projects/branch_rules/_show.html.haml
index 605715e2899..c16c03953c6 100644
--- a/app/views/projects/branch_rules/_show.html.haml
+++ b/app/views/projects/branch_rules/_show.html.haml
@@ -8,9 +8,9 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Branch rules')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Define rules for who can push, merge, and the required approvals for each branch.')
       = link_to(_('Leave feedback.'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/388149', target: '_blank', rel: 'noopener noreferrer')
 
-  .settings-content.gl-pr-0
+  .settings-content
     #js-branch-rules{ data: { project_path: @project.full_path, branch_rules_path: project_settings_repository_branch_rules_path(@project), show_code_owners: show_code_owners.to_s, show_status_checks: show_status_checks.to_s, show_approvers: show_approvers.to_s } }
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index ae8d230f356..7c52350f101 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -4,10 +4,10 @@
 - mr_status = merge_request_status(related_merge_request)
 - is_default_branch = branch.name == @repository.root_ref
 
-%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-3!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
+%li{ class: "branch-item gl-display-flex! gl-align-items-center! js-branch-item js-branch-#{branch.name} gl-pl-5! gl-pr-2!", data: { name: branch.name, qa_selector: 'branch_container', qa_name: branch.name } }
   .branch-info
     .gl-display-flex.gl-align-items-center
-      = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
+      = link_to project_tree_path(@project, branch.name, ref_type: 'heads'), class: 'item-title str-truncated-100 ref-name', data: { qa_selector: 'branch_link' } do
         = branch.name
       = clipboard_button(text: branch.name, title: _("Copy branch name"))
       - if is_default_branch
diff --git a/app/views/projects/branches/_panel.html.haml b/app/views/projects/branches/_panel.html.haml
index c01e3677c19..8ef7d435420 100644
--- a/app/views/projects/branches/_panel.html.haml
+++ b/app/views/projects/branches/_panel.html.haml
@@ -7,7 +7,7 @@
 
 - return unless branches.any?
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }, footer_options: { class: 'gl-new-card-footer' }) do |c|
   - c.with_header do
     %h3.gl-new-card-title.h5
       = panel_title
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index c9dcfaff8c6..963c416ed42 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -1,16 +1,3 @@
 - unless @project.empty_repo?
   - if current_user
-    .count-badge.btn-group
-      - if current_user.already_forked?(@project) && current_user.forkable_namespaces.size < 2
-        = link_button_to namespace_project_path(current_user, current_user.fork_of(@project)), title: s_('ProjectOverview|Go to your fork'), class: 'has-tooltip fork-btn', icon: 'fork' do
-          = s_('ProjectOverview|Fork')
-      - else
-        - disabled_tooltip = fork_button_disabled_tooltip(@project)
-        - count_class = 'disabled' unless can?(current_user, :read_code, @project)
-        - button_class = 'disabled' if disabled_tooltip
-
-        %span.btn-group{ class: ('has-tooltip' if disabled_tooltip), title: disabled_tooltip }
-          = link_button_to new_project_fork_path(@project), class: "fork-btn #{button_class}", data: { qa_selector: 'fork_button' }, icon: 'fork' do
-            = s_('ProjectOverview|Fork')
-      = link_button_to project_forks_path(@project), title: n_(s_('ProjectOverview|Forks'), s_('ProjectOverview|Forks'), @project.forks_count), class: "count has-tooltip fork-count #{count_class}" do
-        = @project.forks_count
+    #js-forks-button{ data: fork_button_data_attributes(@project) }
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index d00d9f62999..fffa1ff36b9 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -5,7 +5,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Repository cleanup')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - link_url = 'https://github.com/newren/git-filter-repo'
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: link_url }
       - link_end = '</a>'.html_safe
@@ -21,7 +21,7 @@
         .gl-mb-3
           %h5.gl-mt-0
             = _("Upload object map")
-          %button.gl-button.btn.btn-default.js-choose-file{ type: "button" }
+          = render Pajamas::ButtonComponent.new(button_options: { class: 'js-choose-file' }) do
             = _("Choose a file")
           %span.gl-ml-3.js-filename
             = _("No file selected")
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index a0f47f375f7..010f15ec6f2 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -7,7 +7,7 @@
 - context_commits = @context_commits&.map { |commit| commit.present(current_user: current_user) }
 - hidden = @hidden_commit_count
 
-- commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, daily_commits|
+- commits.chunk { |commit| local_committed_date(commit, current_user) }.each do |day, daily_commits|
   %li.js-commit-header.gl-py-2.gl-border-b{ data: { day: day } }
     %span.day.font-weight-bold= l(day, format: '%b %d, %Y')
 
@@ -44,7 +44,8 @@
 
 - if commits.size == 0 && context_commits.nil?
   .commits-empty.gl-mt-6
-    = custom_icon('illustration_no_commits')
+    .svg-content.svg-150
+      = image_tag('illustrations/empty-state/empty-search-md.svg')
     %h4
       = _('Your search didn\'t match any commits.')
     %p
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 8afc9ade3e1..1034f06f722 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title _("Commits")
 - add_page_specific_style 'page_bundles/tree'
+- add_page_specific_style 'page_bundles/merge_request'
 - page_title _("Commits"), @ref
 
 = content_for :meta_tags do
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 5b6f7c392dd..69c7a497c7d 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -1,13 +1,14 @@
 - add_to_breadcrumbs s_("CompareRevisions|Compare revisions"), project_compare_index_path(@project)
 - page_title "#{params[:from]} to #{params[:to]}"
+- has_diff = @commits.present? || @diffs.present? && @diffs.diff_files.present?
+-# Only show commit list in the first page
+- hide_commit_list = params[:page].present? && params[:page] != '1'
 
 .sub-header-block.gl-border-b-0.gl-mb-0.gl-pt-4
   .js-signature-container{ data: { 'signatures-path' => signatures_namespace_project_compare_index_path } }
     #js-compare-selector{ data: project_compare_selector_data(@project, @merge_request, params) }
 
-- if @commits.present? || @diffs.present?
-  -# Only show commit list in the first page
-  - hide_commit_list = params[:page].present? && params[:page] != '1'
+- if has_diff
   = render "projects/commits/commit_list" unless hide_commit_list
   = render "projects/diffs/diffs",
     diffs: @diffs,
diff --git a/app/views/projects/confluences/show.html.haml b/app/views/projects/confluences/show.html.haml
index 283408ffa63..cdf3562a8ed 100644
--- a/app/views/projects/confluences/show.html.haml
+++ b/app/views/projects/confluences/show.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title _('Confluence')
 - page_title _('Confluence')
 - add_page_specific_style 'page_bundles/wiki'
-= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
   %h4
     = s_('WikiEmpty|Confluence is enabled')
   %p
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 997443d5fa9..0044ff4dc24 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -1,10 +1,8 @@
 - page_title _('Edit Deploy Key')
 %h1.page-title.gl-font-size-h-display= _('Edit Deploy Key')
-%hr
 
-%div
-  = gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
-    = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
-    .form-actions
-      = f.submit _('Save changes'), pajamas_button: true
-      = link_button_to _('Cancel'), project_settings_repository_path(@project)
+= gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
+  = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
+  .gl-display-flex.gl-mt-6.gl-gap-3
+    = f.submit _('Save changes'), pajamas_button: true
+    = link_button_to _('Cancel'), project_settings_repository_path(@project, anchor: 'js-deploy-keys-settings')
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 98e8c2dd61b..662f1bb158d 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -17,7 +17,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Collapse')
-    %p= _('Update your project name, topics, description, and avatar.')
+    %p.gl-text-secondary= _('Update your project name, topics, description, and avatar.')
   .settings-content= render 'projects/settings/general'
 
 %section.settings.sharing-permissions.no-animate#js-shared-permissions{ class: ('expanded' if expanded), data: { qa_selector: 'visibility_features_permissions_content' } }
@@ -25,7 +25,7 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Visibility, project features, permissions')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
+    %p.gl-text-secondary= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default emoji reactions.')
 
   .settings-content
     = form_for @project, html: { multipart: true, class: "sharing-permissions-form", id: reduce_visibility_form_id }, authenticity_token: true do |f|
@@ -40,15 +40,13 @@
       - c.with_body do
         = _('On the left sidebar, select %{merge_requests_link} to view them.').html_safe % { merge_requests_link: link_to('Settings > Merge requests', project_settings_merge_requests_path(@project)).html_safe }
 
-= render_if_exists 'projects/settings/analytics', expanded: expanded
-
 %section.settings.no-animate{ class: ('expanded' if expanded), data: { qa_selector: 'badges_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = s_('ProjectSettings|Badges')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_('ProjectSettings|Customize this project\'s badges.')
       = link_to s_('ProjectSettings|What are badges?'), help_page_path('user/project/badges')
   .settings-content
@@ -60,52 +58,59 @@
 
 = render 'projects/service_desk_settings'
 
-= render_if_exists 'product_analytics/project_settings', expanded: expanded
-
 %section.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded), data: { qa_selector: 'advanced_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Advanced')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
+    %p.gl-text-secondary= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
 
   .settings-content
     = render_if_exists 'projects/settings/restore', project: @project
 
-    .sub-section
-      %h4= _('Housekeeping')
-      %p
-        = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
-        = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
-      = render Pajamas::ButtonComponent.new(method: :post, href: housekeeping_project_path(@project)) do
-        = _('Run housekeeping')
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-mt-0' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h4.gl-new-card-title= _('Housekeeping')
+        %p.gl-new-card-description
+          = _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
+          = link_to _('Learn more.'), help_page_path('administration/housekeeping'), target: '_blank', rel: 'noopener noreferrer'
 
-      .gl-display-inline-flex
-        #js-project-prune-unreachable-objects-button{ data: { prune_objects_path: housekeeping_project_path(@project, prune: true), prune_objects_doc_path: help_page_path('administration/housekeeping', anchor: 'prune-unreachable-objects') } }
+      - c.with_body do
+        .gl-display-flex.gl-flex-wrap.gl-gap-3
+          = render Pajamas::ButtonComponent.new(method: :post, href: housekeeping_project_path(@project)) do
+            = _('Run housekeeping')
+          #js-project-prune-unreachable-objects-button{ data: { prune_objects_path: housekeeping_project_path(@project, prune: true), prune_objects_doc_path: help_page_path('administration/housekeeping', anchor: 'prune-unreachable-objects') } }
 
     = render 'export', project: @project
 
     = render_if_exists 'projects/settings/archive'
-    .sub-section.rename-repository
-      %h4.warning-title= _('Change path')
-      = render 'projects/errors'
-      = gitlab_ui_form_for @project do |f|
-        .form-group
+
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card rename-repository' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h4.gl-new-card-title.warning-title= _('Change path')
+        %p.gl-new-card-description
           - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'rename-a-repository') }
-          %p= _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-          %ul
-            %li= _("Be careful. Renaming a project's repository can have unintended side effects.")
-            %li= _('You will need to update your local repositories to point to the new location.')
-            - if @project.deployment_platform.present?
-              %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
-          = f.label :path, _('Path'), class: 'label-bold'
+          = _("A project’s repository name defines its URL (the one you use to access the project via a browser) and its place on the file disk where GitLab is installed. %{link_start}Learn more.%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
+      - c.with_body do
+        = render 'projects/errors'
+        = gitlab_ui_form_for @project do |f|
           .form-group
-            .input-group
-              .input-group-prepend
-                .input-group-text
-                  #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
-              = f.text_field :path, class: 'form-control', data: { qa_selector: 'project_path_field' }
-        = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
+            %p
+              %span.gl-font-weight-bold= _("Be careful. Renaming a project's repository can have unintended side effects.")
+              = _('You will need to update your local repositories to point to the new location.')
+            - if @project.deployment_platform.present?
+              %p= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
+            = f.label :path, _('Path'), class: 'label-bold'
+            .form-group
+              .input-group
+                .input-group-prepend
+                  .input-group-text
+                    #{Gitlab::Utils.append_path(root_url, @project.namespace.full_path)}/
+                = f.text_field :path, class: 'form-control gl-form-input-xl', data: { qa_selector: 'project_path_field' }
+          = f.submit _('Change path'), class: "btn-danger", data: { qa_selector: 'change_path_button' }, pajamas_button: true
 
     = render 'transfer', project: @project
 
diff --git a/app/views/projects/feature_flags/index.html.haml b/app/views/projects/feature_flags/index.html.haml
index e473a6f3cfd..ec0830ad153 100644
--- a/app/views/projects/feature_flags/index.html.haml
+++ b/app/views/projects/feature_flags/index.html.haml
@@ -3,7 +3,7 @@
 #feature-flags-vue{ data: { endpoint: project_feature_flags_path(@project, format: :json),
   "project-id" => @project.id,
   "project-name" => @project.name,
-  "error-state-svg-path" => image_path('illustrations/feature_flag.svg'),
+  "error-state-svg-path" => image_path('illustrations/empty-state/empty-feature-flag-md.svg'),
   "feature-flags-help-page-path" => help_page_path("operations/feature_flags"),
   "feature-flags-client-libraries-help-page-path" => help_page_path("operations/feature_flags", anchor: "choose-a-client-library"),
   "feature-flags-client-example-help-page-path" => help_page_path("operations/feature_flags", anchor: "go-application-example"),
diff --git a/app/views/projects/feature_flags_user_lists/index.html.haml b/app/views/projects/feature_flags_user_lists/index.html.haml
index c0e98b27d29..2e279d71758 100644
--- a/app/views/projects/feature_flags_user_lists/index.html.haml
+++ b/app/views/projects/feature_flags_user_lists/index.html.haml
@@ -5,4 +5,4 @@
 #js-user-lists{ data: { project_id: @project.id,
   feature_flags_help_page_path: help_page_path("operations/feature_flags"),
   new_user_list_path: can?(current_user, :create_feature_flag, @project) ? new_project_feature_flags_user_list_path(@project): nil,
-  error_state_svg_path: image_path('illustrations/feature_flag.svg') } }
+  error_state_svg_path: image_path('illustrations/empty-state/empty-feature-flag-md.svg') } }
diff --git a/app/views/projects/feature_flags_user_lists/show.html.haml b/app/views/projects/feature_flags_user_lists/show.html.haml
index 5c4e93e7707..58276eedc09 100644
--- a/app/views/projects/feature_flags_user_lists/show.html.haml
+++ b/app/views/projects/feature_flags_user_lists/show.html.haml
@@ -5,4 +5,4 @@
 
 #js-edit-user-list{ data: { project_id: @project.id,
   user_list_iid: @user_list.iid,
-  empty_state_path: image_path('illustrations/feature_flag.svg') } }
+  empty_state_path: image_path('illustrations/empty-state/empty-feature-flag-md.svg') } }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 7e93e44c463..541b8c1147d 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -1,9 +1,9 @@
 - page_title _("Find File"), @ref
 - add_page_specific_style 'page_bundles/tree'
 
-.file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
+.file-finder-holder.tree-holder.clearfix.js-file-finder.gl-pt-4{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
   .nav-block.gl-xs-mr-0
-    .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full
+    .tree-ref-holder.gl-xs-mb-3.gl-xs-w-full.gl-max-w-26
       #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
     %ul.breadcrumb.repo-breadcrumb.gl-flex-nowrap
       %li.breadcrumb-item.gl-white-space-nowrap
diff --git a/app/views/projects/hook_logs/show.html.haml b/app/views/projects/hook_logs/show.html.haml
index 30084e3310b..2eaf89be4ef 100644
--- a/app/views/projects/hook_logs/show.html.haml
+++ b/app/views/projects/hook_logs/show.html.haml
@@ -7,7 +7,8 @@
 %hr
 
 - if @hook_log.oversize?
-  = button_tag _("Resend Request"), class: "btn gl-button btn-default float-right gl-ml-3 has-tooltip", disabled: true, title: _("Request data is too large")
+  = render Pajamas::ButtonComponent.new(button_options: { class: "float-right gl-ml-3 has-tooltip", disabled: true, title: _("Request data is too large") }) do
+    = _("Resend Request")
 - else
   = link_button_to _("Resend Request"), @hook_log.present.retry_path, method: :post, class: 'float-right gl-ml-3'
 
diff --git a/app/views/projects/integrations/shimos/show.html.haml b/app/views/projects/integrations/shimos/show.html.haml
index e6cd8c15809..165e414f75b 100644
--- a/app/views/projects/integrations/shimos/show.html.haml
+++ b/app/views/projects/integrations/shimos/show.html.haml
@@ -1,7 +1,7 @@
 - breadcrumb_title s_('Shimo|Shimo Workspace')
 - page_title s_('Shimo|Shimo Workspace')
 - add_page_specific_style 'page_bundles/wiki'
-= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+= render layout: 'shared/empty_states/wikis_layout', locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
   %h4
     = s_('Shimo|Shimo Workspace integration is enabled')
   %p
diff --git a/app/views/projects/issuable/_show.html.haml b/app/views/projects/issuable/_show.html.haml
index ec233bc9aff..e502457808d 100644
--- a/app/views/projects/issuable/_show.html.haml
+++ b/app/views/projects/issuable/_show.html.haml
@@ -7,5 +7,4 @@
 
 = render "projects/issues/service_desk/alert_moved_from_service_desk", issue: issuable
 
-= render 'shared/issue_type/details_header', issuable: issuable
 = render 'shared/issue_type/details_content', issuable: issuable, api_awards_path: api_awards_path
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index f8f57934303..8bfad64c369 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -1,6 +1,7 @@
 - page_title _('Issues')
 - add_page_specific_style 'page_bundles/issuable_list'
 - add_page_specific_style 'page_bundles/issues_list'
+- add_page_specific_style 'page_bundles/work_items'
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")
 
diff --git a/app/views/projects/issues/new.html.haml b/app/views/projects/issues/new.html.haml
index d344ae6a4e6..64143502b77 100644
--- a/app/views/projects/issues/new.html.haml
+++ b/app/views/projects/issues/new.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/merge_request'
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - breadcrumb_title _("New")
 - page_title _("New Issue")
diff --git a/app/views/projects/issues/service_desk.html.haml b/app/views/projects/issues/service_desk.html.haml
index 9793f21e4a9..2d17719a8c2 100644
--- a/app/views/projects/issues/service_desk.html.haml
+++ b/app/views/projects/issues/service_desk.html.haml
@@ -15,7 +15,7 @@
       can_edit_project_settings: can?(current_user, :admin_project, @project).to_s,
       service_desk_callout_svg_path: image_path('service_desk_callout.svg'),
       service_desk_settings_path: edit_project_path(@project, anchor: 'js-service-desk'),
-      service_desk_help_path: help_page_path('user/project/service_desk'),
+      service_desk_help_path: help_page_path('user/project/service_desk/index'),
       is_service_desk_supported: Gitlab::ServiceDesk.supported?.to_s,
       is_service_desk_enabled: @project.service_desk_enabled?.to_s } }
   - else
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index d39d292fb53..0073c6b89cd 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -1,5 +1,6 @@
 - page_title _("Jobs")
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 - admin = local_assigns.fetch(:admin, false)
 
 #js-jobs-table{ data: { admin: admin, full_path: @project.full_path, job_statuses: job_statuses.to_json, pipeline_editor_path: project_ci_pipeline_editor_path(@project), empty_state_svg_path: image_path('jobs-empty-state.svg') } }
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index b151c355b3e..d81855b12ed 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -4,6 +4,7 @@
 - add_page_specific_style 'page_bundles/build'
 - add_page_specific_style 'page_bundles/xterm'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = render_if_exists "shared/shared_runners_minutes_limit_flash_message"
 
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index e1c904d000f..8855e8024b3 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -23,7 +23,7 @@
             = _('Prioritized labels')
           .gl-new-card-description
             = _('Drag to reorder prioritized labels and change their relative priority.')
-      .js-prioritized-labels.gl-px-3.gl-rounded-base.manage-labels-list{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
+      .js-prioritized-labels.gl-rounded-base.manage-labels-list{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
         #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
           = render 'shared/empty_states/priority_labels'
         - if @prioritized_labels.any?
@@ -37,8 +37,8 @@
         .gl-new-card-header
           .gl-new-card-title-wrapper
             %h3.gl-new-card-title{ class: ('hide' if hide) }= _('Other labels')
-        .gl-new-card-body
-          .js-other-labels.manage-labels-list.gl-new-card-content
+        .gl-new-card-body.gl-px-0
+          .js-other-labels.manage-labels-list
             = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
             = paginate @labels, theme: 'gitlab'
 
diff --git a/app/views/projects/merge_requests/_page.html.haml b/app/views/projects/merge_requests/_page.html.haml
index 5ea67376a86..69e2487152e 100644
--- a/app/views/projects/merge_requests/_page.html.haml
+++ b/app/views/projects/merge_requests/_page.html.haml
@@ -106,7 +106,7 @@
 - if @merge_request.can_be_cherry_picked?
   = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit
 
-#js-review-bar{ data: { new_comment_template_path: profile_comment_templates_path } }
+#js-review-bar{ data: review_bar_data(@merge_request, current_user) }
 
 - if current_user && Feature.enabled?(:mr_experience_survey, current_user)
   #js-mr-experience-survey{ data: { account_age: current_user.account_age_in_days } }
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 606d4e06d33..9ec4363fa9a 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -13,7 +13,7 @@
     window.gl.mrWidgetData.pipeline_must_succeed_docs_path = '#{help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds.md', anchor: 'require-a-successful-pipeline-for-merge')}';
     window.gl.mrWidgetData.code_coverage_check_help_page_path = '#{help_page_path('ci/testing/code_coverage.md', anchor: 'coverage-check-approval-rule')}';
     window.gl.mrWidgetData.security_configuration_path = '#{project_security_configuration_path(@project)}';
-    window.gl.mrWidgetData.license_compliance_docs_path = '#{help_page_path('user/compliance/license_compliance/index.md')}';
+    window.gl.mrWidgetData.license_compliance_docs_path = '#{help_page_path('user/compliance/license_scanning_of_cyclonedx_files')}';
     window.gl.mrWidgetData.eligible_approvers_docs_path = '#{help_page_path('user/project/merge_requests/approvals/rules.md', anchor: 'eligible-approvers')}';
     window.gl.mrWidgetData.approvals_help_path = '#{help_page_path("user/project/merge_requests/approvals/index.md")}';
     window.gl.mrWidgetData.pipelines_empty_svg_path = '#{image_path('illustrations/empty-state/empty-pipeline-md.svg')}';
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index 3facca4d4f7..f8d0e2d2a15 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -3,6 +3,7 @@
 - breadcrumb_title _("Merge conflicts")
 - page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
 - add_page_specific_style 'page_bundles/merge_conflicts'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = render "projects/merge_requests/mr_title", hide_gutter_toggle: true
 
diff --git a/app/views/projects/merge_requests/creations/new.html.haml b/app/views/projects/merge_requests/creations/new.html.haml
index 6a8894384df..f2c2700b012 100644
--- a/app/views/projects/merge_requests/creations/new.html.haml
+++ b/app/views/projects/merge_requests/creations/new.html.haml
@@ -3,8 +3,15 @@
 - page_title _("New merge request")
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
-- if @merge_request.can_be_created && !params[:change_branches]
+- conflicting_mr = @merge_request.existing_mrs_targeting_same_branch.first
+
+- if @merge_request.can_be_created && !params[:change_branches] && !conflicting_mr
   = render 'new_submit'
 - else
+  - if conflicting_mr
+    - link_to_mr = link_to(conflicting_mr.to_reference, project_merge_request_path(@project, conflicting_mr))
+    - flash.now[:alert] = safe_format(s_("These branches already have an open merge request: %{link_to_mr}. Select a different source or target branch."), link_to_mr: link_to_mr)
+
   = render 'new_compare'
diff --git a/app/views/projects/merge_requests/diffs.html.haml b/app/views/projects/merge_requests/diffs.html.haml
index 1ef212ee5ce..03306e98407 100644
--- a/app/views/projects/merge_requests/diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs.html.haml
@@ -1 +1,3 @@
+- add_page_specific_style 'page_bundles/merge_request'
+
 = render 'page'
diff --git a/app/views/projects/merge_requests/edit.html.haml b/app/views/projects/merge_requests/edit.html.haml
index 77cc69f32ab..3aca4783241 100644
--- a/app/views/projects/merge_requests/edit.html.haml
+++ b/app/views/projects/merge_requests/edit.html.haml
@@ -1,3 +1,4 @@
+- add_page_specific_style 'page_bundles/merge_request'
 - add_to_breadcrumbs _("Merge requests"), project_merge_requests_path(@project)
 - breadcrumb_title @merge_request.to_reference
 - page_title _("Edit"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 79da09c5205..e2d3e082289 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -6,6 +6,7 @@
 - page_title _("Merge requests")
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 - add_page_specific_style 'page_bundles/issuable_list'
+- add_page_specific_style 'page_bundles/merge_request'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} merge requests")
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 1ef212ee5ce..03306e98407 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1 +1,3 @@
+- add_page_specific_style 'page_bundles/merge_request'
+
 = render 'page'
diff --git a/app/views/projects/mirrors/_mirror_repos.html.haml b/app/views/projects/mirrors/_mirror_repos.html.haml
index 110bc8d82f8..a1c89a9dd30 100644
--- a/app/views/projects/mirrors/_mirror_repos.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos.html.haml
@@ -8,32 +8,49 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Mirroring repositories')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Set up your project to automatically push and/or pull changes to/from another repository. Branches, tags, and commits will be synced automatically.')
       = link_to _('How do I mirror repositories?'), help_page_path('user/project/repository/mirror/index.md'), target: '_blank', rel: 'noopener noreferrer'
 
-  .settings-content
-    - if mirror_settings_enabled
-      = gitlab_ui_form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
-        .panel.panel-default
-          .panel-body
-            %div= form_errors(@project)
-
-            .form-group.has-feedback
-              = label_tag :url, _('Git repository URL'), class: 'label-light'
-              = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password', data: { qa_selector: 'mirror_repository_url_field' }
-
-            = render 'projects/mirrors/instructions'
-
-            = render 'projects/mirrors/mirror_repos_form', f: f
 
-            = render 'projects/mirrors/branch_filter'
-
-          .panel-footer
-            = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
-    - else
-      = render Pajamas::AlertComponent.new(dismissible: false) do |c|
-        - c.with_body do
-          = _('Mirror settings are only available to GitLab administrators.')
-
-    = render 'projects/mirrors/mirror_repos_list'
+  .settings-content
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h5.gl-new-card-title
+            = _('Mirrored repositories')
+          .gl-new-card-count
+            = sprite_icon('earth', css_class: 'gl-mr-2')
+            %span.js-mirrored-repo-count
+              = mirrored_repositories_count
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content", data: { testid: 'add-new-mirror' } }) do
+            = _('Add new')
+      - c.with_body do
+        - if mirror_settings_enabled
+          .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+            %h4.gl-mt-0
+              = s_('Profiles|Add new mirror repository')
+            = gitlab_ui_form_for @project, url: project_mirror_path(@project), html: { class: 'gl-show-field-errors js-mirror-form', autocomplete: 'new-password', data: mirrors_form_data_attributes } do |f|
+              %div= form_errors(@project)
+              .form-group.has-feedback
+                = label_tag :url, _('Git repository URL'), class: 'label-light'
+                = text_field_tag :url, nil, class: 'form-control gl-form-input js-mirror-url js-repo-url', placeholder: _('Input the remote repository URL'), required: true, pattern: "(#{protocols}):\/\/.+", autocomplete: 'new-password', data: { qa_selector: 'mirror_repository_url_field' }
+
+              = render 'projects/mirrors/instructions'
+
+              = render 'projects/mirrors/mirror_repos_form', f: f
+
+              = render 'projects/mirrors/branch_filter'
+
+              = f.submit _('Mirror repository'), class: 'js-mirror-submit', name: :update_remote_mirror, pajamas_button: true, data: { qa_selector: 'mirror_repository_button' }
+
+              = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+                = _('Cancel')
+
+        - else
+          = render Pajamas::AlertComponent.new(dismissible: false) do |c|
+            - c.with_body do
+              = _('Mirror settings are only available to GitLab administrators.')
+
+        = render 'projects/mirrors/mirror_repos_list'
diff --git a/app/views/projects/mirrors/_mirror_repos_list.html.haml b/app/views/projects/mirrors/_mirror_repos_list.html.haml
index 185d86245c5..0debd13709d 100644
--- a/app/views/projects/mirrors/_mirror_repos_list.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_list.html.haml
@@ -1,49 +1,41 @@
 - mirror_settings_enabled = can?(current_user, :admin_remote_mirror, @project)
 
-.panel.panel-default
-  .table-responsive
-    - if !@project.mirror? && @project.remote_mirrors.count == 0
-      = render Pajamas::CardComponent.new(card_options: { class: 'gl-mt-5' }) do |c|
-        - c.with_header do
-          %strong
-            = _('Mirrored repositories') + ' (0)'
-        - c.with_body do
-          = _('There are currently no mirrored repositories.')
-    - else
-      %table.table.gl-table.gl-mt-5
-        %thead
-          %tr
-            %th
-              = _('Mirrored repositories')
-              = render_if_exists 'projects/mirrors/mirrored_repositories_count'
-            %th= _('Direction')
-            %th= _('Last update attempt')
-            %th= _('Last successful update')
-            %th
-            %th
-        %tbody.js-mirrors-table-body
-          = render_if_exists 'projects/mirrors/table_pull_row'
-          - @project.remote_mirrors.each_with_index do |mirror, index|
-            - next if mirror.new_record?
-            %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
-              %td{ data: { qa_selector: 'mirror_repository_url_content' } }
-                = mirror.safe_url || _('Invalid URL')
-                = render_if_exists 'projects/mirrors/mirror_branches_setting_badge', record: mirror
-              %td= _('Push')
-              %td
-                = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
-              %td{ data: { qa_selector: 'mirror_last_update_at_content' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
-              %td
-                - if mirror.disabled?
-                  = render 'projects/mirrors/disabled_mirror_badge'
-                - if mirror.last_error.present?
-                  = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge_content' }, title: html_escape(mirror.last_error.try(:strip)) }
-              %td.gl-display-flex
-                - if mirror_settings_enabled
-                  .btn-group.mirror-actions-group{ role: 'group' }
-                    - if mirror.ssh_key_auth?
-                      = clipboard_button(text: mirror.ssh_public_key, class: 'gl-button btn btn-default btn-icon', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
-                    = render 'shared/remote_mirror_update_button', remote_mirror: mirror
-                    = render Pajamas::ButtonComponent.new(variant: :danger,
-                      icon: 'remove',
-                      button_options: { class: 'js-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
+.table-responsive.gl-mb-0
+  - if !@project.mirror? && @project.remote_mirrors.count == 0
+    .gl-new-card-empty.gl-px-5.gl-py-4= _('There are currently no mirrored repositories.')
+  - else
+    %table.table.b-table.gl-table.b-table-stacked-md
+      %thead.d-none.d-md-table-header-group
+        %tr
+          %th= _('Repository')
+          %th= _('Direction')
+          %th= _('Last update attempt')
+          %th= _('Last successful update')
+          %th
+          %th
+      %tbody.js-mirrors-table-body
+        = render_if_exists 'projects/mirrors/table_pull_row'
+        - @project.remote_mirrors.each_with_index do |mirror, index|
+          - next if mirror.new_record?
+          %tr.rspec-mirrored-repository-row{ class: ('bg-secondary' if mirror.disabled?), data: { qa_selector: 'mirrored_repository_row_container' } }
+            %td{ data: { qa_selector: 'mirror_repository_url_content' } }
+              = mirror.safe_url || _('Invalid URL')
+              = render_if_exists 'projects/mirrors/mirror_branches_setting_badge', record: mirror
+            %td= _('Push')
+            %td
+              = mirror.last_update_started_at.present? ? time_ago_with_tooltip(mirror.last_update_started_at) : _('Never')
+            %td{ data: { qa_selector: 'mirror_last_update_at_content' } }= mirror.last_update_at.present? ? time_ago_with_tooltip(mirror.last_update_at) : _('Never')
+            %td
+              - if mirror.disabled?
+                = render 'projects/mirrors/disabled_mirror_badge'
+              - if mirror.last_error.present?
+                = gl_badge_tag _('Error'), { variant: :danger }, { data: { toggle: 'tooltip', html: 'true', qa_selector: 'mirror_error_badge_content' }, title: html_escape(mirror.last_error.try(:strip)) }
+            %td
+              - if mirror_settings_enabled
+                .btn-group.mirror-actions-group{ role: 'group' }
+                  - if mirror.ssh_key_auth?
+                    = clipboard_button(text: mirror.ssh_public_key, class: 'gl-button btn btn-default btn-icon', title: _('Copy SSH public key'), qa_selector: 'copy_public_key_button')
+                  = render 'shared/remote_mirror_update_button', remote_mirror: mirror
+                  = render Pajamas::ButtonComponent.new(variant: :danger,
+                    icon: 'remove',
+                    button_options: { class: 'js-delete-mirror rspec-delete-mirror', title: _('Remove'), data: { mirror_id: mirror.id, toggle: 'tooltip', container: 'body' } })
diff --git a/app/views/projects/ml/models/index.html.haml b/app/views/projects/ml/models/index.html.haml
index 2caba2ae9be..a1c6376e9b4 100644
--- a/app/views/projects/ml/models/index.html.haml
+++ b/app/views/projects/ml/models/index.html.haml
@@ -1,5 +1,4 @@
 - breadcrumb_title s_('ModelRegistry|Model registry')
 - page_title s_('ModelRegistry|Model registry')
-- presenter = ::Ml::ModelsIndexPresenter.new(@models)
 
-#js-index-ml-models{ data: { view_model: presenter.present } }
+= render(Projects::Ml::ModelsIndexComponent.new(models: @models))
diff --git a/app/views/projects/notes/_more_actions_dropdown.html.haml b/app/views/projects/notes/_more_actions_dropdown.html.haml
index 8c94a18e1b0..e3cc9199352 100644
--- a/app/views/projects/notes/_more_actions_dropdown.html.haml
+++ b/app/views/projects/notes/_more_actions_dropdown.html.haml
@@ -2,8 +2,7 @@
 
 - if note_editable || !is_current_user
   %div{ class: "dropdown more-actions note-actions-item gl-ml-0!" }
-    = button_tag title: 'More actions', class: 'note-action-button more-actions-toggle has-tooltip btn gl-button btn-default-tertiary btn-icon', data: { toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' } do
-      = sprite_icon('ellipsis_v', css_class: 'gl-button-icon gl-icon')
+    = render Pajamas::ButtonComponent.new(icon: 'ellipsis_v', category: :tertiary, button_options: { class: 'note-action-button more-actions-toggle has-tooltip', data: { title: 'More actions', toggle: 'dropdown', container: 'body', qa_selector: 'more_actions_dropdown' }})
     %ul.dropdown-menu.more-actions-dropdown.dropdown-open-left
       %li
         = clipboard_button(text: noteable_note_url(note), title: _('Copy reference'), button_text: _('Copy link'), class: 'btn-clipboard', hide_tooltip: true, hide_button_icon: true)
diff --git a/app/views/projects/packages/infrastructure_registry/show.html.haml b/app/views/projects/packages/infrastructure_registry/show.html.haml
index 8624fdacda7..8410ac0091d 100644
--- a/app/views/projects/packages/infrastructure_registry/show.html.haml
+++ b/app/views/projects/packages/infrastructure_registry/show.html.haml
@@ -7,7 +7,7 @@
   .col-12
     #js-vue-packages-detail{ data: { package: package_from_presenter(@package),
       can_delete: can?(current_user, :destroy_package, @project).to_s,
-      svg_path: image_path('illustrations/no-packages.svg'),
+      svg_path: image_path('illustrations/empty-state/empty-package-md.svg'),
       project_name: @project.name,
       project_path: @project.root_ancestor.full_path,
       gitlab_host: Gitlab.config.gitlab.host,
diff --git a/app/views/projects/packages/packages/index.html.haml b/app/views/projects/packages/packages/index.html.haml
index 5397828d48e..9fb265b08c2 100644
--- a/app/views/projects/packages/packages/index.html.haml
+++ b/app/views/projects/packages/packages/index.html.haml
@@ -6,7 +6,7 @@
       full_path: @project.full_path,
       endpoint: project_packages_path(@project),
       page_type: 'projects',
-      empty_list_illustration: image_path('illustrations/no-packages.svg'),
+      empty_list_illustration: image_path('illustrations/empty-state/empty-package-md.svg'),
       npm_instance_url: package_registry_instance_url(:npm),
       project_list_url: project_packages_path(@project),
       settings_path: show_package_registry_settings(@project) ? project_settings_packages_and_registries_path(@project) : '',
diff --git a/app/views/projects/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index 4c8ec21db39..b1ec7a362b7 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -1,7 +1,6 @@
-- can_edit_max_page_size=can?(current_user, :update_max_pages_size)
-- can_enforce_https_only=Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
+- can_edit_max_page_size = can?(current_user, :update_max_pages_size)
+- can_enforce_https_only = Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
 
-- return unless can_edit_max_page_size || can_enforce_https_only
 = gitlab_ui_form_for @project, url: project_pages_path(@project), html: { class: 'inline', title: pages_https_only_title } do |f|
   - if can_edit_max_page_size
     = render_if_exists 'shared/pages/max_pages_size_input', form: f
@@ -17,14 +16,13 @@
       %p.gl-pl-6
         = s_("GitLabPages|When enabled, all attempts to visit your website through HTTP are automatically redirected to HTTPS using a response with status code 301. Requires a valid certificate for all domains. %{docs_link_start}Learn more.%{link_end}").html_safe % { docs_link_start: docs_link_start, link_end: link_end }
 
-  - if Feature.enabled?(:pages_unique_domain, @project)
-    .form-group
-      = f.fields_for :project_setting do |settings|
-        = settings.gitlab_ui_checkbox_component :pages_unique_domain_enabled,
-          s_('GitLabPages|Use unique domain'),
-          label_options: { class: 'label-bold' }
-        %p.gl-pl-6
-          = s_("GitLabPages|When enabled, a unique domain is generated to access pages.").html_safe
+  .form-group
+    = f.fields_for :project_setting do |settings|
+      = settings.gitlab_ui_checkbox_component :pages_unique_domain_enabled,
+        s_('GitLabPages|Use unique domain'),
+        label_options: { class: 'label-bold' }
+      %p.gl-pl-6
+        = s_("GitLabPages|When enabled, a unique domain is generated to access pages.").html_safe
 
   .gl-mt-3
     = f.submit s_('GitLabPages|Save changes'), pajamas_button: true
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index 88a60b1fb06..5051fc6a5f5 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -2,6 +2,7 @@
 - page_title _("Pipeline Schedules")
 - add_page_specific_style 'page_bundles/pipeline_schedules'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 
 #pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), illustration_url: image_path('illustrations/pipeline_schedule_callout.svg') } }
 
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
index e16a2235e53..c3d6d0c5971 100644
--- a/app/views/projects/pipelines/charts.html.haml
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -1,6 +1,7 @@
 - page_title _('CI/CD Analytics')
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
+  project_id: @project.id,
   should_render_dora_charts: should_render_dora_charts.to_s,
   should_render_quality_summary: should_render_quality_summary.to_s,
   failed_pipelines_link: project_pipelines_path(@project, page: '1', scope: 'all', status: 'failed'),
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index bdf09e5356f..435edde319b 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -6,6 +6,7 @@
 - add_page_specific_style 'page_bundles/pipeline'
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
+- add_page_specific_style 'page_bundles/merge_request'
 - add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
 
 .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
diff --git a/app/views/projects/project_templates/_template.html.haml b/app/views/projects/project_templates/_template.html.haml
index 93c53fc99fc..a0677ee2385 100644
--- a/app/views/projects/project_templates/_template.html.haml
+++ b/app/views/projects/project_templates/_template.html.haml
@@ -1,4 +1,4 @@
-.template-option.d-flex.align-items-center{ data: { qa_selector: 'template_option_container' } }
+.template-option.d-flex.align-items-center{ data: { testid: 'template-option-container' } }
   .logo.gl-mr-3.px-1
     = image_tag template.logo, size: 32, class: "btn-template-icon icon-#{template.name}"
   .description
@@ -13,5 +13,5 @@
     %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: template.name,
       'data-testid': "use_template_#{template.name}" }
       %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_action: "click_button", track_value: "" } }
-      %span{ data: { qa_selector: 'use_template_button' } }
+      %span{ data: { testid: 'use-template-button' } }
         = _("Use template")
diff --git a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
index d67c3dc19d7..8dcc59a09d0 100644
--- a/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_create_protected_tag.html.haml
@@ -1,23 +1,20 @@
 = gitlab_ui_form_for [@project, @protected_tag], html: { class: 'new-protected-tag js-new-protected-tag' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-tags-settings' }
-  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c|
-    - c.with_header do
-      = _('Protect a tag')
-    - c.with_body do
-      = form_errors(@protected_tag)
-      .form-group.row
-        = f.label :name, _('Tag:'), class: 'col-md-2 text-left text-md-right'
-        .col-md-10.protected-tags-dropdown
-          = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
-          .form-text.text-muted
-            - wildcards_url = help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
-            - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
-            = html_escape(_("%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported.")) % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>'.html_safe, code_tag_start: '<code>'.html_safe, code_tag_end: '</code>'.html_safe }
-      .form-group.row
-        = f.label :create_access_levels_attributes, _('Allowed to create:'), class: 'col-md-2 text-left text-md-right'
-        .col-md-10
-          .create_access_levels-container
-            = yield :create_access_levels
+  = form_errors(@protected_tag)
+  .form-group
+    = f.label :name, _('Tag')
+    .protected-tags-dropdown
+      = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
+      .form-text.text-muted
+        - wildcards_url = help_page_path('user/project/protected_tags', anchor: 'wildcard-protected-tags')
+        - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
+        = html_escape(_("%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported.")) % { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>'.html_safe, code_tag_start: '<code>'.html_safe, code_tag_end: '</code>'.html_safe }
+  .form-group
+    = f.label :create_access_levels_attributes, _('Allowed to create')
+    .create_access_levels-container
+      = yield :create_access_levels
+
+  = f.submit _('Protect'), pajamas_button: true, disabled: true, data: { qa_selector: 'protect_tag_button' }
+  = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+    = _('Cancel')
 
-    - c.with_footer do
-      = f.submit _('Protect'), pajamas_button: true, disabled: true, data: { qa_selector: 'protect_tag_button' }
diff --git a/app/views/projects/protected_tags/shared/_dropdown.html.haml b/app/views/projects/protected_tags/shared/_dropdown.html.haml
index 9d5d649bc40..758df7b3c1e 100644
--- a/app/views/projects/protected_tags/shared/_dropdown.html.haml
+++ b/app/views/projects/protected_tags/shared/_dropdown.html.haml
@@ -1,7 +1,7 @@
 = f.hidden_field(:name)
 
 = dropdown_tag(s_('ProtectedBranch|Select tag or create wildcard'),
-               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide monospace',
+               options: { toggle_class: 'js-protected-tag-select js-filter-submit wide monospace gl-w-auto!',
                           filter: true, dropdown_class: "dropdown-menu-selectable capitalize-header git-revision-dropdown", placeholder: s_("ProtectedBranch|Search protected tags"),
                           footer_content: true,
                           data: { show_no: true, show_any: true, show_upcoming: true,
diff --git a/app/views/projects/protected_tags/shared/_index.html.haml b/app/views/projects/protected_tags/shared/_index.html.haml
index a016ccf8656..f71ecc3a7c5 100644
--- a/app/views/projects/protected_tags/shared/_index.html.haml
+++ b/app/views/projects/protected_tags/shared/_index.html.haml
@@ -6,15 +6,30 @@
       = s_("ProtectedTag|Protected tags")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_("ProtectedTag|Limit access to creating and updating tags.")
       = link_to s_("ProtectedTag|What are protected tags?"), help_page_path("user/project/protected_tags")
   .settings-content
-    %p
+    %p.gl-text-secondary
       = s_("ProtectedTag|By default, protected tags restrict who can modify the tag.")
       = link_to s_("ProtectedTag|Learn more."), help_page_path("user/project/protected_tags", anchor: "who-can-modify-a-protected-tag")
 
-    - if can? current_user, :admin_project, @project
-      = yield :create_protected_tag
-
-    = yield :tag_list
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Protected tags')
+          .gl-new-card-count
+            = sprite_icon('tag', css_class: 'gl-mr-2')
+            = @protected_tags_count
+        - if can? current_user, :admin_project, @project
+          .gl-new-card-actions
+            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+              = _('Add tag')
+      - c.with_body do
+        - if can? current_user, :admin_project, @project
+          .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+            %h4.gl-mt-0
+              = _('Protect a tag')
+            = yield :create_protected_tag
+        = yield :tag_list
diff --git a/app/views/projects/protected_tags/shared/_protected_tag.html.haml b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
index 4fe1c8bd3cb..11e8d3a81c2 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -1,10 +1,10 @@
 %tr.js-protected-tag-edit-form{ data: { url: project_protected_tag_path(@project, protected_tag) } }
-  %td
+  %td{ data: { label: s_('ProtectedBranch|Tag') }, class: 'gl-vertical-align-middle!' }
     %span.ref-name= protected_tag.name
 
     - if @project.root_ref?(protected_tag.name)
       = gl_badge_tag s_('ProtectedTags|default'), variant: :info, class: 'gl-ml-2'
-  %td
+  %td{ data: { label: s_('ProtectedBranch|Last commit') }, class: 'gl-vertical-align-middle!' }
     - if protected_tag.wildcard?
       - matching_tags = protected_tag.matching(repository.tag_names)
       = link_to pluralize(matching_tags.count, "matching tag"), project_protected_tag_path(@project, protected_tag)
@@ -18,5 +18,5 @@
   = yield
 
   - if can? current_user, :admin_project, @project
-    %td
-      = link_button_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], aria: { label: s_('ProtectedTags|Unprotect tag') }, data: { confirm: 'Tag will be writable for developers. Are you sure?', confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, category: :secondary
+    %td{ data: { label: _('Actions') }, class: 'gl-vertical-align-middle!' }
+      = link_button_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], aria: { label: s_('ProtectedTags|Unprotect tag') }, data: { confirm: 'Tag will be writable for developers. Are you sure?', confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, category: :secondary, size: :small
diff --git a/app/views/projects/protected_tags/shared/_tags_list.html.haml b/app/views/projects/protected_tags/shared/_tags_list.html.haml
index 0a85a353e27..66b030a194b 100644
--- a/app/views/projects/protected_tags/shared/_tags_list.html.haml
+++ b/app/views/projects/protected_tags/shared/_tags_list.html.haml
@@ -1,31 +1,27 @@
 .protected-tags-list.js-protected-tags-list
   - if @protected_tags.empty?
-    .card-header
-      = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: 0 }
-    %p.settings-message.text-center
+    .gl-new-card-empty.gl-px-5.gl-py-4
       = s_('ProtectedBranch|No tags are protected.')
   - else
     - can_admin_project = can?(current_user, :admin_project, @project)
 
-    %table.table.table-bordered
+    %table.table.b-table.gl-table.b-table-stacked-md
       %colgroup
         %col{ width: "25%" }
         %col{ width: "25%" }
         %col{ width: "50%" }
         - if can_admin_project
           %col
-      %thead
+      %thead.d-none.d-md-table-header-group
         %tr
           %th
-            = s_('ProtectedBranch|Protected tags (%{tags_count})') % { tags_count: @protected_tags_count }
+            = s_('ProtectedBranch|Tag')
           %th
             = s_('ProtectedBranch|Last commit')
           %th
             = s_('ProtectedBranch|Allowed to create')
           - if can_admin_project
             %th
-      %tbody
-        %tr
-        = yield
+      %tbody= yield
 
     = paginate @protected_tags, theme: 'gitlab'
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index 32a2e36c779..2d435a7ce9d 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -27,7 +27,7 @@
 - elsif @group_runners.empty?
   = _('This group does not have any group runners yet.')
 
-  - if can?(current_user, :admin_group_runners, @project.group)
+  - if can?(current_user, :register_group_runners, @project.group) || can?(current_user, :create_runner, @project.group)
     - group_link_start = "<a href='#{group_runners_path(@project.group)}'>".html_safe
     - group_link_end = '</a>'.html_safe
     = s_("Runners|To register them, go to the %{link_start}group's Runners page%{link_end}.").html_safe % { link_start: group_link_start, link_end: group_link_end }
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 05685c26ac5..e7da3177cde 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -1,18 +1,22 @@
 - return unless can?(current_user, :archive_project, @project)
 
-.sub-section
-  %h4.warning-title
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card', data: { qa_selector: 'export_project_content' } }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-5 gl-py-4' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h4.gl-new-card-title.warning-title
+        - if @project.archived?
+          = _('Unarchive project')
+        - else
+          = _('Archive project')
+
+  - c.with_body do
     - if @project.archived?
-      = _('Unarchive project')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchive-a-project') }
+      %p= _("Unarchiving the project restores its members' ability to make commits, and create issues, comments, and other entities. %{strong_start}After you unarchive the project, it displays in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
+      = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' } }) do
+        =  _('Unarchive project')
     - else
-      = _('Archive project')
-  - if @project.archived?
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'unarchive-a-project') }
-    %p= _("Unarchiving the project restores its members' ability to make commits, and create issues, comments, and other entities. %{strong_start}After you unarchive the project, it displays in the search and on the dashboard.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-    = render Pajamas::ButtonComponent.new(method: :post, href: unarchive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Unarchive project') }, data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' } }) do
-      =  _('Unarchive project')
-  - else
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archive-a-project') }
-    %p= _("Archiving the project makes it entirely read-only. It is hidden from the dashboard and doesn't display in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
-    = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' } }) do
-      =  _('Archive project')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archive-a-project') }
+      %p= _("Archiving the project makes it entirely read-only. It is hidden from the dashboard and doesn't display in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end} %{link_start}Learn more.%{link_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, link_start: link_start, link_end: '</a>'.html_safe }
+      = render Pajamas::ButtonComponent.new(method: :post, href: archive_project_path(@project), variant: :confirm, button_options: { aria: { label: _('Archive project') }, data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link', 'confirm-btn-variant': 'confirm' } }) do
+        =  _('Archive project')
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index e4af6d59cad..b81c3bc9704 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -4,9 +4,11 @@
 - type_plural = _('project access tokens')
 - @force_desktop_expanded_sidebar = true
 
-.gl-mt-5.js-search-settings-section
-  %h4.gl-my-0
-    = page_title
+.settings-section.js-search-settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
+        = page_title
   %p.gl-text-secondary
     - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/project_access_tokens') }
     - if current_user.can?(:create_resource_access_tokens, @project)
@@ -23,9 +25,21 @@
 
   #js-new-access-token-app{ data: { access_token_type: type } }
 
-  - if current_user.can?(:create_resource_access_tokens, @project)
-    = render_if_exists 'projects/settings/access_tokens/form',
-      type: type
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card gl-border-b-0 gl-rounded-bottom-left-none gl-rounded-bottom-right-none js-toggle-container js-token-card' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body' }) do |c|
+    - c.with_header do
+      .gl-new-card-title-wrapper
+        %h3.gl-new-card-title
+          = _('Active project access tokens')
+        .gl-new-card-count
+          = sprite_icon('token', css_class: 'gl-mr-2')
+          %span.js-token-count= @active_access_tokens.size
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
+            = _('Add new token')
+    - c.with_body do
+      - if current_user.can?(:create_resource_access_tokens, @project)
+        .gl-new-card-add-form.gl-mt-3.gl-display-none.js-toggle-content.js-add-new-token-form
+          = render_if_exists 'projects/settings/access_tokens/form', type: type
 
-  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true
- } }
+  #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This project has no active access tokens.'), show_role: true } }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 6eccbd245af..d51acc5e708 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -1,6 +1,7 @@
 - help_link_public_pipelines = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'change-which-users-can-view-your-pipelines'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_auto_canceling = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'auto-cancel-redundant-pipelines'), target: '_blank', rel: 'noopener noreferrer'
-- help_link_skip_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'prevent-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_prevent_outdated = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'prevent-outdated-deployment-jobs'), target: '_blank', rel: 'noopener noreferrer'
+- help_link_prevent_outdated_allow_rollback = link_to sprite_icon('question-o'), help_page_path('ci/environments/deployment_safety', anchor: 'job-retries-for-rollback-deployments'), target: '_blank', rel: 'noopener noreferrer'
 - help_link_separated_caches = link_to sprite_icon('question-o'), help_page_path('ci/caching/index', anchor: 'cache-key-names'), target: '_blank', rel: 'noopener noreferrer'
 
 .row.gl-mt-3
@@ -23,7 +24,12 @@
         .form-group
           = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
             = form.gitlab_ui_checkbox_component :forward_deployment_enabled, _("Prevent outdated deployment jobs"),
-              help_text: (_('When a deployment job is successful, prevent older deployment jobs that are still pending.') + ' ' + help_link_skip_outdated).html_safe
+              help_text: (_('When a deployment job is successful, prevent older deployment jobs that are still pending.') + ' ' + help_link_prevent_outdated).html_safe
+          .gl-pl-6
+            = f.fields_for :ci_cd_settings_attributes, @project.ci_cd_settings do |form|
+              = form.gitlab_ui_checkbox_component :forward_deployment_rollback_allowed, _("Allow job retries for rollback deployments"),
+                help_text: (_('Allow job retries even if the deployment job is outdated.') + ' ' + help_link_prevent_outdated_allow_rollback).html_safe,
+                checkbox_options: { class: 'gl-pl-6' }
 
         .form-group
           = f.gitlab_ui_checkbox_component :ci_separated_caches,
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index 007169809c9..6de39058455 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -11,7 +11,7 @@
       = _("General pipelines")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Customize your pipeline configuration.")
   .settings-content
     = render 'form'
@@ -22,7 +22,7 @@
       = s_('CICD|Auto DevOps')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - auto_devops_url = help_page_path('topics/autodevops/index')
       - quickstart_url = help_page_path('topics/autodevops/cloud_deployments/auto_devops_with_gke')
       - auto_devops_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: auto_devops_url }
@@ -40,7 +40,7 @@
       = _("Runners")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expand_runners ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
       = link_to s_('What is GitLab Runner?'), 'https://docs.gitlab.com/runner/', target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -56,7 +56,7 @@
         = _("Artifacts")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _("A job artifact is an archive of files and directories saved by a job when it finishes.")
     .settings-content
       #js-artifacts-settings-app{ data: { full_path: @project.full_path, help_page_path: help_page_path('ci/jobs/job_artifacts', anchor: 'keep-artifacts-from-most-recent-successful-jobs') } }
@@ -70,10 +70,10 @@
 %section.settings.no-animate#js-pipeline-triggers{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _("Pipeline triggers")
+      = _("Pipeline trigger tokens")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Trigger a pipeline for a branch or tag by generating a trigger token and using it with an API call. The token impersonates a user's project access and permissions.")
       = link_to _('Learn more.'), help_page_path('ci/triggers/index'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
@@ -88,7 +88,7 @@
         = _("Deploy freezes")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         - freeze_period_docs = help_page_path('user/project/releases/index', anchor: 'prevent-unintentional-releases-by-setting-a-deploy-freeze')
         - freeze_period_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: freeze_period_docs }
         = html_escape(s_('DeployFreeze|Add a freeze period to prevent unintended releases during a period of time for a given environment. You must update the deployment jobs in %{filename} according to the deploy freezes added here. %{freeze_period_link_start}Learn more.%{freeze_period_link_end}')) % { freeze_period_link_start: freeze_period_link_start, freeze_period_link_end: '</a>'.html_safe, filename: tag.code('.gitlab-ci.yml') }
@@ -106,7 +106,7 @@
       = _("Token Access")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = _("Control how the CI_JOB_TOKEN CI/CD variable is used for API access between projects.")
   .settings-content
     = render 'ci/token_access/index'
@@ -118,7 +118,7 @@
         = _("Secure Files")
       = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
         = expanded ? _('Collapse') : _('Expand')
-      %p
+      %p.gl-text-secondary
         = _("Use Secure Files to store files used by your pipelines such as Android keystores, or Apple provisioning profiles and signing certificates.")
         = link_to _('Learn more'), help_page_path('ci/secure_files/index'), target: '_blank', rel: 'noopener noreferrer'
     .settings-content
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 39dfd410727..97c7729de44 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -14,10 +14,10 @@
 - if integration.to_param === 'slack'
   = render 'shared/integrations/slack_notifications_deprecation_alert'
 
-%h2.gl-mb-4
+%h2.gl-mb-0.gl-display-flex.gl-align-items-center.gl-gap-3
   = integration.title
   - if integration.operating?
-    = sprite_icon('check', css_class: 'gl-text-green-500')
+    = render Pajamas::BadgeComponent.new(s_('FeatureFlags|Active'), variant: 'success')
 
 = render 'shared/integration_settings', integration: integration
 - if lookup_context.template_exists?('show', "shared/integrations/#{integration.to_param}", true)
diff --git a/app/views/projects/settings/integrations/index.html.haml b/app/views/projects/settings/integrations/index.html.haml
index 59cdda5bb92..6c0c99543cc 100644
--- a/app/views/projects/settings/integrations/index.html.haml
+++ b/app/views/projects/settings/integrations/index.html.haml
@@ -8,5 +8,5 @@
   %h3= _('Integrations')
   - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/index') }
   - webhooks_link_start = '<a href="%{url}">'.html_safe % { url: project_hooks_path(@project) }
-  %p= _("%{integrations_link_start}Integrations%{link_end} enable you to make third-party applications part of your GitLab workflow. If the available integrations don't meet your needs, consider using a %{webhooks_link_start}webhook%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, webhooks_link_start: webhooks_link_start, link_end: '</a>'.html_safe }
+  %p.gl-text-secondary= _("%{integrations_link_start}Integrations%{link_end} enable you to make third-party applications part of your GitLab workflow. If the available integrations don't meet your needs, consider using a %{webhooks_link_start}webhook%{link_end}.").html_safe % { integrations_link_start: integrations_link_start, webhooks_link_start: webhooks_link_start, link_end: '</a>'.html_safe }
   = render 'shared/integrations/index', integrations: @integrations
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
index 7433e81c11c..398c7758d66 100644
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -9,7 +9,7 @@
       = _('Alerts')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Display alerts from all configured monitoring tools.')
       = link_to _('Learn more.'), help_page_path('operations/incident_management/integrations.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index 5d89790ef9f..1cfdd7086d9 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -8,7 +8,7 @@
       = _('Error tracking')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Expand')
-    %p
+    %p.gl-text-secondary
       = _('Link Sentry to GitLab to discover and view the errors your application generates.')
       = link_to _('Learn more.'), help_page_path('operations/error_tracking'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/app/views/projects/tracing/show.html.haml b/app/views/projects/tracing/show.html.haml
new file mode 100644
index 00000000000..4ba316a0b5c
--- /dev/null
+++ b/app/views/projects/tracing/show.html.haml
@@ -0,0 +1,5 @@
+- page_title _('Trace Details')
+- add_to_breadcrumbs _('Tracing'), project_tracing_index_path(@project)
+
+#js-tracing-details{ data: { view_model: observability_tracing_details_model(@project, @trace_id) } }
+
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index c834a0bc818..a4ed19c2fc9 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,3 @@
-- is_project_overview = local_assigns.fetch(:is_project_overview, false)
-
 .tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
   .tree-ref-holder.gl-max-w-26{ data: { qa_selector: 'ref_dropdown_container' } }
     #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
@@ -10,7 +8,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3.gl-first-child-ml-sm-0<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref), is_project_overview: is_project_overview.to_s } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index fbbf1c04613..3c3f9eb7390 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -1,8 +1,9 @@
+- ref_type_enum_value = @ref_type&.upcase
 - add_page_specific_style 'page_bundles/tree'
 - current_route_path = request.fullpath.match(%r{-/tree/[^/]+/(.+$)}).to_a[1]
-- add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
+- add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "", refType: ref_type_enum_value})
 - add_page_startup_graphql_call('repository/permissions', { projectPath: @project.full_path })
-- add_page_startup_graphql_call('repository/files', { nextPageCursor: "", pageSize: 100, projectPath: @project.full_path, ref: current_ref, path: current_route_path || "/"})
+- add_page_startup_graphql_call('repository/files', { nextPageCursor: "", pageSize: 100, projectPath: @project.full_path, ref: current_ref, path: current_route_path || "/", refType: ref_type_enum_value})
 - breadcrumb_title _("Repository")
 
 - page_title @path.presence || _("Files"), @ref
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index b621f1ab3ed..b7e226b009c 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -1,3 +1,4 @@
+- show_cancel_button = local_assigns.fetch(:show_cancel_button, false)
 = gitlab_ui_form_for [@project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
   = form_errors(@trigger)
 
@@ -9,3 +10,6 @@
     = f.label :key, s_("Trigger|Description"), class: "label-bold"
     = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: s_("Trigger|Trigger description")
   = f.submit btn_text, pajamas_button: true
+  - if show_cancel_button
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index b68aad24b50..7b6915b7b85 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -1,17 +1,38 @@
+- add_form_class = 'gl-display-none' if !form_errors(@trigger)
+- hide_class = 'gl-display-none' if form_errors(@trigger)
+
 .row.gl-mt-3.gl-mb-3
   .col-lg-12
-    = render Pajamas::CardComponent.new do |c|
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header gl-flex-wrap gl-sm-flex-nowrap' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
       - c.with_header do
-        = _("Manage your project's triggers")
+        .gl-new-card-title-wrapper
+          %h5.gl-new-card-title
+            = _("Active pipeline trigger tokens")
+            .gl-new-card-count
+              = sprite_icon('token', css_class: 'gl-mr-2')
+              = @triggers.size
+        .gl-new-card-actions.gl-display-flex.gl-justify-content-end.gl-w-full.gl-sm-w-auto.gl-mt-3.gl-sm-mt-0
+          = render Pajamas::ButtonComponent.new(size: :small, category: :tertiary, button_options: { data: { testid: 'reveal-hide-values-button' } }) do
+            = _('Reveal values')
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "gl-ml-2 js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new token')
+
       - c.with_body do
-        = render 'projects/triggers/form', btn_text: _('Add trigger')
-        .gl-mb-5
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new pipeline trigger token')
+          = render 'projects/triggers/form', btn_text: _('Create pipeline trigger token'), show_cancel_button: true
+
         #js-ci-pipeline-triggers-list.triggers-list{ data: { triggers: @triggers_json } }
-      - c.with_footer do
-        %p
-          = _("These examples show how to trigger this project's pipeline for a branch or tag.")
 
-        %p.light
+    %details.gl-mt-5.gl-border.gl-rounded-base
+      %summary.gl-py-3.gl-px-5.gl-font-weight-semibold
+        = _("View trigger token usage examples")
+      .gl-p-5
+        %p.gl-text-secondary
+          = _("These examples show common methods of triggering a pipeline with a pipeline trigger token. The URL and ID for this project is prefilled.")
+
+        %p.gl-text-secondary
           = _('In each example, replace %{code_start}TOKEN%{code_end} with the trigger token you generated and replace %{code_start}REF_NAME%{code_end} with the branch or tag name.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
         %h5.gl-mt-3
@@ -40,10 +61,10 @@
         %h5.gl-mt-3
           = _('Pass job variables')
 
-        %p.light
+        %p.gl-text-secondary
           = _('To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request.').html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
 
-        %p.light
+        %p.gl-text-secondary
           = _('cURL:')
 
         %pre
@@ -54,7 +75,7 @@
                  -F "ref=REF_NAME" \
                  -F "variables[RUN_NIGHTLY_BUILD]=true" \
                  #{builds_trigger_url(@project.id)}
-        %p.light
+        %p.gl-text-secondary
           = _('Webhook:')
 
         %pre.gl-mb-0
diff --git a/app/views/projects/usage_quotas/index.html.haml b/app/views/projects/usage_quotas/index.html.haml
index aad96151678..616af3f3338 100644
--- a/app/views/projects/usage_quotas/index.html.haml
+++ b/app/views/projects/usage_quotas/index.html.haml
@@ -15,9 +15,10 @@
 
 .row
   .col-sm-12
-    = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name } + '.'
-    %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
-      = s_('UsageQuota|Learn more about usage quotas') + '.'
+    %p.gl-text-secondary
+      = s_('UsageQuota|Usage of project resources across the %{strong_start}%{project_name}%{strong_end} project').html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe, project_name: @project.name } + '.'
+      %a{ href: help_page_path('user/usage_quotas.md'), target: '_blank', rel: 'noopener noreferrer' }
+        = s_('UsageQuota|Learn more about usage quotas') + '.'
 
 = gl_tabs_nav({ id: 'js-project-usage-quotas-tabs' }) do
   = gl_tab_link_to '#storage-quota-tab', item_active: true do
diff --git a/app/views/protected_branches/shared/_branches_list.html.haml b/app/views/protected_branches/shared/_branches_list.html.haml
index ed2d420ffcd..1edec308283 100644
--- a/app/views/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/protected_branches/shared/_branches_list.html.haml
@@ -1,12 +1,10 @@
 .protected-branches-list.js-protected-branches-list{ data: { testid: 'protected-branches-list' } }
   - if @protected_branches.empty?
-    .card-header.bg-white
-      = s_("ProtectedBranch|Protected branch (%{protected_branches_count})") % { protected_branches_count: 0 }
-    %p.settings-message.text-center
-      = s_("ProtectedBranch|There are currently no protected branches, protect a branch with the form above.")
+    %p.gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content
+      = s_("ProtectedBranch|There are currently no protected branches, to protect a branch start by creating a new one above.")
   - else
     .flash-container
-    %table.table.table-bordered
+    %table.table.b-table.gl-table.b-table-stacked-md
       %colgroup
         %col{ width: "30%" }
         %col{ width: "20%" }
@@ -34,5 +32,3 @@
             %th
       %tbody
         = yield
-
-    = paginate @protected_branches, theme: 'gitlab'
diff --git a/app/views/protected_branches/shared/_create_protected_branch.html.haml b/app/views/protected_branches/shared/_create_protected_branch.html.haml
index d97347b89de..96e6990b080 100644
--- a/app/views/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_create_protected_branch.html.haml
@@ -1,44 +1,43 @@
 = gitlab_ui_form_for [protected_branch_entity, @protected_branch], html: { class: 'new-protected-branch js-new-protected-branch' } do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-protected-branches-settings' }
-  = render Pajamas::CardComponent.new(card_options: { class: "gl-mb-5" }) do |c|
-    - c.with_header do
-      = s_("ProtectedBranch|Protect a branch")
-    - c.with_body do
-      = form_errors(@protected_branch)
-      .form-group.row
-        = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-sm-12'
-        .col-sm-12
-          - if protected_branch_entity.is_a?(Group)
-            = f.text_field :name, placeholder: 'prod*', class: 'form-control gl-w-full! gl-form-input-lg'
-          - else
-            = render partial: "protected_branches/shared/dropdown", locals: { f: f, toggle_classes: 'gl-w-full! gl-form-input-lg' }
-          .form-text.text-muted
-            - wildcards_url = help_page_url('user/project/protected_branches', anchor: 'protect-multiple-branches-with-wildcard-rules')
-            - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
-            - placeholders = { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>', code_tag_start: '<code>', code_tag_end: '</code>' }
-            - if protected_branch_entity.is_a?(Group)
-              = (s_("ProtectedBranch|Only %{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % placeholders).html_safe
-            - else
-              = (s_("ProtectedBranch|%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % placeholders).html_safe
-      .form-group.row
-        = f.label :merge_access_levels_attributes, s_("ProtectedBranch|Allowed to merge:"), class: 'col-sm-12'
-        .col-sm-12
-          = yield :merge_access_levels
-      .form-group.row
-        = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push and merge:"), class: 'col-sm-12'
-        .col-sm-12
-          = yield :push_access_levels
-      .form-group.row
-        = f.label :allow_force_push, s_("ProtectedBranch|Allowed to force push:"), class: 'col-sm-12'
-        .col-sm-12
-          = render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
-            label: s_("ProtectedBranch|Allowed to force push"),
-            label_position: :hidden) do
-            - force_push_docs_url = help_page_url('topics/git/git_rebase', anchor: 'force-push')
-            - force_push_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: force_push_docs_url }
-            = (s_("ProtectedBranch|Allow all users with push access to %{tag_start}force push%{tag_end}.") % { tag_start: force_push_link_start, tag_end: '</a>' }).html_safe
-      = render_if_exists 'protected_branches/ee/code_owner_approval_form', f: f, protected_branch_entity: protected_branch_entity
-    - c.with_footer do
-      = f.submit s_('ProtectedBranch|Protect'), disabled: true, data: { qa_selector: 'protect_button' }, pajamas_button: true
 
-  .js-alert-protected-branch-created-container.gl-mb-5
+  = form_errors(@protected_branch)
+
+  %h4.gl-mt-0= s_("ProtectedBranch|Protect a branch")
+
+  .form-group.row
+    = f.label :name, s_('ProtectedBranch|Branch:'), class: 'col-sm-12'
+    .col-sm-12
+      - if protected_branch_entity.is_a?(Group)
+        = f.text_field :name, placeholder: 'prod*', class: 'form-control gl-w-full! gl-form-input-lg'
+      - else
+        = render partial: "protected_branches/shared/dropdown", locals: { f: f, toggle_classes: 'gl-w-full! gl-form-input-lg' }
+      .form-text.text-muted
+        - wildcards_url = help_page_url('user/project/protected_branches', anchor: 'protect-multiple-branches-with-wildcard-rules')
+        - wildcards_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: wildcards_url }
+        - placeholders = { wildcards_link_start: wildcards_link_start, wildcards_link_end: '</a>', code_tag_start: '<code>', code_tag_end: '</code>' }
+        - if protected_branch_entity.is_a?(Group)
+          = (s_("ProtectedBranch|Only %{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % placeholders).html_safe
+        - else
+          = (s_("ProtectedBranch|%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}*-stable%{code_tag_end} or %{code_tag_start}production/*%{code_tag_end} are supported.") % placeholders).html_safe
+  .form-group.row
+    = f.label :merge_access_levels_attributes, s_("ProtectedBranch|Allowed to merge:"), class: 'col-sm-12'
+    .col-sm-12
+      = yield :merge_access_levels
+  .form-group.row
+    = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push and merge:"), class: 'col-sm-12'
+    .col-sm-12
+      = yield :push_access_levels
+  .form-group.row
+    = f.label :allow_force_push, s_("ProtectedBranch|Allowed to force push:"), class: 'col-sm-12'
+    .col-sm-12
+      = render Pajamas::ToggleComponent.new(classes: 'js-force-push-toggle',
+        label: s_("ProtectedBranch|Allowed to force push"),
+        label_position: :hidden) do
+        - force_push_docs_url = help_page_url('topics/git/git_rebase', anchor: 'force-push')
+        - force_push_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: force_push_docs_url }
+        = (s_("ProtectedBranch|Allow all users with push access to %{tag_start}force push%{tag_end}.") % { tag_start: force_push_link_start, tag_end: '</a>' }).html_safe
+  = render_if_exists 'protected_branches/ee/code_owner_approval_form', f: f, protected_branch_entity: protected_branch_entity
+  = f.submit s_('ProtectedBranch|Protect'), disabled: true, data: { qa_selector: 'protect_button' }, pajamas_button: true
+  = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+    = _('Cancel')
diff --git a/app/views/protected_branches/shared/_index.html.haml b/app/views/protected_branches/shared/_index.html.haml
index d0e21e38429..dccfefc1cb8 100644
--- a/app/views/protected_branches/shared/_index.html.haml
+++ b/app/views/protected_branches/shared/_index.html.haml
@@ -7,15 +7,31 @@
       = s_("ProtectedBranch|Protected branches")
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = s_("ProtectedBranch|Keep stable branches secure and force developers to use merge requests.")
       = link_to s_("ProtectedBranch|What are protected branches?"), help_page_path("user/project/protected_branches")
   .settings-content
-    %p
-      = s_("ProtectedBranch|By default, protected branches restrict who can modify the branch.")
-      = link_to s_("ProtectedBranch|Learn more."), help_page_path("user/project/protected_branches", anchor: "who-can-modify-a-protected-branch")
+    .js-alert-protected-branch-created-container.gl-mt-5
 
-    - if can_admin_entity
-      = content_for :create_protected_branch
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header gl-flex-direction-column' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper.gl-justify-content-space-between
+          %h3.gl-new-card-title
+            = s_("ProtectedBranch|Protected branches")
+            .gl-new-card-count
+              = sprite_icon('branch', css_class: 'gl-mr-2')
+              %span= @protected_branches.size
+          .gl-new-card-actions
+            = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-protected-branch-button' } }) do
+              = _('Add protected branch')
+        .gl-new-card-description.gl-mt-2.gl-sm-mt-0
+          = s_("ProtectedBranch|By default, protected branches restrict who can modify the branch.")
+          = link_to s_("ProtectedBranch|Learn more."), help_page_path("user/project/protected_branches", anchor: "who-can-modify-a-protected-branch")
+      - c.with_body do
+        - if can_admin_entity
+          .gl-new-card-add-form.gl-m-3.gl-display-none.js-toggle-content
+            = content_for :create_protected_branch
 
-    = content_for :branches_list
+        = content_for :branches_list
+
+    = paginate @protected_branches, theme: 'gitlab'
diff --git a/app/views/protected_branches/shared/_protected_branch.html.haml b/app/views/protected_branches/shared/_protected_branch.html.haml
index 69969b7f848..93c84e67d81 100644
--- a/app/views/protected_branches/shared/_protected_branch.html.haml
+++ b/app/views/protected_branches/shared/_protected_branch.html.haml
@@ -3,14 +3,14 @@
 - protected_branch_test_type = protected_branch.project_level? ? 'project-level' : 'group-level'
 
 %tr.js-protected-branch-edit-form{ data: { url: url, testid: 'protected-branch', test_type: protected_branch_test_type } }
-  %td
-    %span.ref-name= protected_branch.name
+  %td{ class: 'gl-vertical-align-middle!', data: { label: s_("ProtectedBranch|Branch") } }
+    %div
+      %span.ref-name= protected_branch.name
 
-    - if protected_branch.project_level?
-      - if protected_branch_entity.root_ref?(protected_branch.name)
-        = gl_badge_tag s_('ProtectedBranch|default'), variant: :info
+      - if protected_branch.project_level?
+        - if protected_branch_entity.root_ref?(protected_branch.name)
+          = gl_badge_tag s_('ProtectedBranch|default'), variant: :info
 
-      %div
         - if protected_branch.wildcard?
           - matching_branches = protected_branch.matching(repository.branch_names)
           = link_to pluralize(matching_branches.count, "matching branch"), namespace_project_protected_branch_path(@project.namespace, @project, protected_branch)
@@ -22,9 +22,9 @@
   = render_if_exists 'protected_branches/ee/code_owner_approval_table', can_update: local_assigns[:can_update], protected_branch: protected_branch, protected_branch_entity: protected_branch_entity
 
   - if can_admin_entity
-    %td.text-right{ data: { testid: 'protected-branch-action' } }
+    %td.text-right{ data: { label: _('Actions'), testid: 'protected-branch-action' } }
       - if local_assigns[:is_inherited]
         %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Inherited - This setting can be changed at the group level'), 'aria-hidden': 'true' }
           = sprite_icon 'lock'
       - else
-        = link_button_to s_('ProtectedBranch|Unprotect'), [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, size: :small
+        = link_button_to s_('ProtectedBranch|Unprotect'), [protected_branch_entity, protected_branch, { update_section: 'js-protected-branches-settings' }], disabled: local_assigns[:disabled], aria: { label: s_('ProtectedBranch|Unprotect branch') }, data: { confirm: s_('ProtectedBranch|Branch will be writable for developers. Are you sure?'), confirm_btn_variant: 'danger' }, method: :delete, variant: :danger, category: :secondary, size: :small
diff --git a/app/views/pwa/manifest.json.erb b/app/views/pwa/manifest.json.erb
index 65501b27451..e780b13de6e 100644
--- a/app/views/pwa/manifest.json.erb
+++ b/app/views/pwa/manifest.json.erb
@@ -1,3 +1,4 @@
+<%- cache current_appearance do %>
 {
   "name": "<%= appearance_pwa_name %>",
   "short_name": "<%= appearance_pwa_short_name %>",
@@ -33,3 +34,4 @@
   }
   <% end -%>]
 }
+<% end %>
diff --git a/app/views/search/show.html.haml b/app/views/search/show.html.haml
index 934f59ea586..16ca829a6d4 100644
--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
@@ -8,7 +8,7 @@
   = hidden_field_tag :project_id, params[:project_id]
 - group_attributes = @group&.attributes&.slice('id', 'name')&.merge(full_name: @group&.full_name)
 - project_attributes = @project&.attributes&.slice('id', 'namespace_id', 'name')&.merge(name_with_namespace: @project&.name_with_namespace)
-- search_bar_classes = 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4'
+- search_bar_classes = !show_super_sidebar? ? 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4' : ''
 
 - if @search_results && !(@search_results.respond_to?(:failed?) && @search_results.failed?)
   - if @search_service_presenter.without_count?
diff --git a/app/views/shared/_email_with_badge.html.haml b/app/views/shared/_email_with_badge.html.haml
index 5013d8e439a..14201c0d23a 100644
--- a/app/views/shared/_email_with_badge.html.haml
+++ b/app/views/shared/_email_with_badge.html.haml
@@ -1,6 +1,7 @@
 - variant = verified ? :success : :danger
 - text = verified ? _('Verified') : _('Unverified')
 
-%span.gl-mr-3
-  = email
-= gl_badge_tag text, { variant: variant }
+- if email
+  %span.gl-mr-2
+    = email
+= gl_badge_tag text, { variant: variant, size: :sm }
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 1aac7af443f..bb21c4a28fd 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -6,8 +6,8 @@
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - tooltip_title = label_status_tooltip(label, status) if status
 
-%li.label-list-item.gl-list-style-none.gl-py-3{ id: label_css_id, data: { id: label.id } }
-  .label-content.gl-px-3.gl-py-2.gl-rounded-base{ class: "#{ 'gl-py-3' if force_priority }" }
+%li.label-list-item.gl-list-style-none{ id: label_css_id, data: { id: label.id } }
+  .label-content.gl-pl-5.gl-pr-3.gl-py-4.gl-rounded-base{ class: "#{ 'gl-py-3' if force_priority }" }
     = render "shared/label_row", label: label, force_priority: force_priority
     %ul.label-actions-list
       - if can?(current_user, :admin_label, @project)
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index 19489981d94..5058455dcd7 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -4,7 +4,7 @@
 - show_label_merge_requests_link = subject_or_group_defined && show_label_issuables_link?(label, :merge_requests)
 
 .label-name.gl-flex-shrink-0.gl-mr-5
-  = render_label(label, tooltip: false)
+  = render_label(label, link: '#', tooltip: true, tooltip_shows_title: true)
   - if show_labels_full_path?(@project, @group)
     .gl-mt-2
       = render 'shared/label_full_path', label: label
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index e0d385024cd..1f6f41187fc 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -5,5 +5,5 @@
     - c.with_body do
       = no_password_message
     - c.with_actions do
-      = link_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action btn btn-confirm btn-md gl-button'
-      = link_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action btn btn-default btn-md gl-button'
+      = link_button_to _('Remind later'), '#', class: 'js-hide-no-password-message gl-alert-action', variant: :confirm
+      = link_button_to _("Don't show again"), profile_path(user: { hide_no_password: true }), method: :put, role: 'button', class: 'gl-alert-action'
diff --git a/app/views/shared/_service_ping_consent.html.haml b/app/views/shared/_service_ping_consent.html.haml
index e0313710736..cfc0afb4646 100644
--- a/app/views/shared/_service_ping_consent.html.haml
+++ b/app/views/shared/_service_ping_consent.html.haml
@@ -1,7 +1,7 @@
 - if session[:ask_for_usage_stats_consent]
   = render Pajamas::AlertComponent.new(alert_options: { class: 'service-ping-consent-message' }) do |c|
     - c.with_body do
-      - docs_link = link_to '', help_page_path('user/admin_area/settings/usage_statistics.md'), class: 'gl-link'
+      - docs_link = link_to '', help_page_path('administration/settings/usage_statistics.md'), class: 'gl-link'
       - settings_link = link_to '', metrics_and_profiling_admin_application_settings_path(anchor: 'js-usage-settings'), class: 'gl-link'
       = safe_format s_('ServicePing|To help improve GitLab, we would like to periodically %{link_start}collect usage information%{link_end}.'), tag_pair(docs_link, :link_start, :link_end)
       = safe_format s_('ServicePing|This can be changed at any time in %{link_start}your settings%{link_end}.'), tag_pair(settings_link, :link_start, :link_end)
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index 54af364aca3..e46da882e83 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -7,7 +7,7 @@
 - access_levels = local_assigns.fetch(:access_levels, false)
 - default_access_level = local_assigns.fetch(:default_access_level, false)
 
-%h5.gl-font-lg.gl-mt-0
+%h4.gl-mt-0
   = title
 
 = gitlab_ui_form_for token, as: prefix, url: path, method: :post, html: { id: 'js-new-access-token-form', class: 'js-requires-input' }, remote: ajax do |f|
@@ -15,9 +15,13 @@
 
   .form-group
     = f.label :name, s_('AccessTokens|Token name'), class: 'label-bold'
-    - resource_type = resource.is_a?(Group) ? "group" : "project"
-    = f.text_field :name, class: 'form-control gl-form-input gl-max-w-80', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
-    %span.form-text.text-muted#access_token_help_text= s_("AccessTokens|For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
+    = f.text_field :name, class: 'form-control gl-form-input gl-form-input-xl', required: true, data: { qa_selector: 'access_token_name_field' }, :'aria-describedby' => 'access_token_help_text'
+    %span.form-text.text-muted#access_token_help_text
+      - if resource
+        - resource_type = resource.is_a?(Group) ? "group" : "project"
+        = s_("AccessTokens|For example, the application using the token or the purpose of the token. Do not give sensitive information for the name of the token, as it will be visible to all %{resource_type} members.") % { resource_type: resource_type }
+      - else
+        = s_("AccessTokens|For example, the application using the token or the purpose of the token.")
 
   .js-access-tokens-expires-at{ data: expires_at_field_data }
     = f.text_field :expires_at, class: 'gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { js_name: 'expiresAt' }
@@ -39,3 +43,5 @@
 
   .gl-mt-3
     = f.submit s_('AccessTokens|Create %{type}') % { type: type }, data: { qa_selector: 'create_token_button' }, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-2 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml
index 584d0758c76..bbaf5bf9627 100644
--- a/app/views/shared/deploy_keys/_form.html.haml
+++ b/app/views/shared/deploy_keys/_form.html.haml
@@ -5,37 +5,34 @@
 = form_errors(deploy_key)
 
 .form-group
-  = form.label :title, class: 'col-form-label col-sm-2'
-  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', data: { qa_selector: 'deploy_key_title_field' }, readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
+  = form.label :title
+  = form.text_field :title, class: 'form-control gl-form-input', data: { testid: 'deploy-key-title-field' }, readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
 
-.form-group
-  - if deploy_key.new_record?
-    = form.label :key, class: 'col-form-label col-sm-2'
-    .col-sm-10
-      %p.light
-        - link_start = "<a href='#{help_page_path('user/ssh')}' target='_blank' rel='noreferrer noopener'>".html_safe
-        - link_end = '</a>'
-        = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
-      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5, data: { qa_selector: 'deploy_key_field' }
-  - else
-    - if deploy_key.fingerprint_sha256.present?
-      = form.label :fingerprint, _('Fingerprint (SHA256)'), class: 'col-form-label col-sm-2'
-      .col-sm-10
-        = form.text_field :fingerprint_sha256, class: 'form-control gl-form-input', readonly: 'readonly'
-    - if deploy_key.fingerprint.present?
-      = form.label :fingerprint, _('Fingerprint (MD5)'), class: 'col-form-label col-sm-2'
-      .col-sm-10
-        = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
+- if deploy_key.new_record?
+  .form-group
+    = form.label :key
+
+    %p.gl-text-secondary
+      - link_start = "<a href='#{help_page_path('user/ssh')}' target='_blank' rel='noreferrer noopener'>".html_safe
+      - link_end = '</a>'
+      = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
+    = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5, data: { testid: 'deploy-key-field' }
+- else
+  - if deploy_key.fingerprint_sha256.present?
+    .form-group
+      = form.label :fingerprint, _('Fingerprint (SHA256)')
+      = form.text_field :fingerprint_sha256, class: 'form-control gl-form-input', readonly: 'readonly'
+  - if deploy_key.fingerprint.present?
+    .form-group
+      = form.label :fingerprint, _('Fingerprint (MD5)')
+      = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
 
 .form-group
-  .col-sm-10
-    = form.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
-    = form.text_field :expires_at, class: 'form-control gl-form-input', readonly: 'readonly'
+  = form.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
+  = form.text_field :expires_at, class: 'form-control gl-form-input', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|
     .form-group
-      .col-form-label.col-sm-2
-      .col-sm-10
-        = deploy_keys_project_form.gitlab_ui_checkbox_component :can_push, _('Grant write permissions to this key'),
-        help_text: _('Allow this key to push to this repository')
+      = deploy_keys_project_form.gitlab_ui_checkbox_component :can_push, _('Grant write permissions to this key'),
+      help_text: _('Allow this key to push to this repository')
diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml
index 1cd2a590653..650e50e0312 100644
--- a/app/views/shared/deploy_keys/_index.html.haml
+++ b/app/views/shared/deploy_keys/_index.html.haml
@@ -1,14 +1,16 @@
 - expanded = expanded_by_default?
-%section.rspec-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { qa_selector: 'deploy_keys_settings_content' } }
+%section.rspec-deploy-keys-settings.settings.no-animate#js-deploy-keys-settings{ class: ('expanded' if expanded), data: { testid: 'deploy-keys-settings-content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Deploy keys')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_keys/index') }
       = _("Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
-    %h5.gl-mt-0
-    = render @deploy_keys.form_partial_path
-    %hr
-    #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.gl-display-none.js-toggle-content
+          = render @deploy_keys.form_partial_path
+
+        #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
diff --git a/app/views/shared/deploy_keys/_project_group_form.html.haml b/app/views/shared/deploy_keys/_project_group_form.html.haml
index c9e17b18264..c633088b26a 100644
--- a/app/views/shared/deploy_keys/_project_group_form.html.haml
+++ b/app/views/shared/deploy_keys/_project_group_form.html.haml
@@ -1,11 +1,15 @@
 = gitlab_ui_form_for [@project.namespace, @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input container" } do |f|
   = form_errors(@deploy_keys.new_key)
+
+  .form-group.row
+    %h4.gl-my-0= s_('DeployKeys|Add new deploy key')
+
   .form-group.row
     = f.label :title, class: "label-bold"
-    = f.text_field :title, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'deploy_key_title_field' }
+    = f.text_field :title, class: 'form-control gl-form-input', required: true, data: { testid: 'deploy-key-title-field' }
   .form-group.row
     = f.label :key, class: "label-bold"
-    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true, data: { qa_selector: 'deploy_key_field' }
+    = f.text_area :key, class: 'form-control gl-form-input', rows: 5, required: true, data: { testid: 'deploy-key-field' }
   .form-group.row
     %p.light.gl-mb-0
       = _('Paste a public key here.')
@@ -17,8 +21,10 @@
         help_text: _('Allow this key to push to this repository')
   .form-group.row
     = f.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
-    = f.gitlab_ui_datepicker :expires_at, data: { qa_selector: 'deploy_key_expires_at_field' }, value: f.object.expires_at
+    = f.gitlab_ui_datepicker :expires_at, data: { testid: 'deploy-key-expires-at-field' }, value: f.object.expires_at
     %p.form-text.text-muted= ssh_key_expires_field_description
 
-  .form-group.row
-    = f.submit _("Add key"), data: { qa_selector: "add_deploy_key_button"}, pajamas_button: true
+  .form-group.row.gl-mb-0
+    = f.submit _("Add key"), data: { testid: "add-deploy-key-button"}, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-3 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index e5f1fd99125..ccffc3ec923 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -5,16 +5,8 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= s_('DeployTokens|Deploy tokens')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary
       = description
   .settings-content
-    #js-new-deploy-token{ data: {
-        container_registry_enabled: container_registry_enabled?(group_or_project),
-        packages_registry_enabled: packages_registry_enabled?(group_or_project),
-        create_new_token_path: create_deploy_token_path(group_or_project),
-        token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
-        deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
-      }
-    }
-    %hr
+    #new-deploy-token-alert
     = render 'shared/deploy_tokens/table', group_or_project: group_or_project, active_tokens: @deploy_tokens
diff --git a/app/views/shared/deploy_tokens/_table.html.haml b/app/views/shared/deploy_tokens/_table.html.haml
index 3827ecf73a4..3b351387d41 100644
--- a/app/views/shared/deploy_tokens/_table.html.haml
+++ b/app/views/shared/deploy_tokens/_table.html.haml
@@ -1,32 +1,54 @@
-%h5= s_("DeployTokens|Active Deploy Tokens (%{active_tokens})") % { active_tokens: active_tokens.length }
-
-- if active_tokens.present?
-  .table-responsive.deploy-tokens
-    %table.table
-      %thead
-        %tr
-          %th= s_('DeployTokens|Name')
-          %th= s_('DeployTokens|Username')
-          %th= s_('DeployTokens|Created')
-          %th= s_('DeployTokens|Expires')
-          %th= s_('DeployTokens|Scopes')
-          %th
-      %tbody
-        - active_tokens.each do |token|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper
+      %h5.gl-new-card-title
+        = s_("DeployTokens|Active deploy tokens")
+      .gl-new-card-count
+        = sprite_icon('token', css_class: 'gl-mr-2')
+        = active_tokens.length
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+        = _('Add token')
+  - c.with_body do
+    .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+      #js-new-deploy-token{ data: {
+          container_registry_enabled: container_registry_enabled?(group_or_project),
+          packages_registry_enabled: packages_registry_enabled?(group_or_project),
+          create_new_token_path: create_deploy_token_path(group_or_project),
+          token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
+          deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
+        }
+      }
+    - if active_tokens.present?
+      %table.table.b-table.gl-table.b-table-stacked-md
+        %thead
           %tr
-            %td= token.name
-            %td= token.username
-            %td= token.created_at.to_date.to_fs(:medium)
-            %td
-              - if token.expires?
-                %span{ class: ('text-warning' if token.expires_soon?) }
-                  = time_ago_with_tooltip(token.expires_at)
-              - else
-                %span.token-never-expires-label= _('Never')
-            %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td
-              .js-deploy-token-revoke-button{ data: deploy_token_revoke_button_data(token: token, group_or_project: group_or_project) }
+            %th= s_('DeployTokens|Name')
+            %th= s_('DeployTokens|Username')
+            %th= s_('DeployTokens|Created')
+            %th= s_('DeployTokens|Expires')
+            %th= s_('DeployTokens|Scopes')
+            %th
+        %tbody
+          - active_tokens.each do |token|
+            %tr
+              %td{ data: { label: _('Name') }, class: 'gl-vertical-align-middle!' }
+                = token.name
+              %td{ data: { label: _('Username') }, class: 'gl-vertical-align-middle!' }
+                = token.username
+              %td{ data: { label: _('Created') }, class: 'gl-vertical-align-middle!' }
+                = token.created_at.to_date.to_fs(:medium)
+              %td{ data: { label: _('Expires') }, class: 'gl-vertical-align-middle!' }
+                - if token.expires?
+                  %span{ class: ('text-warning' if token.expires_soon?) }
+                    = time_ago_with_tooltip(token.expires_at)
+                - else
+                  %span.token-never-expires-label= _('Never')
+              %td{ data: { label: _('Scopes') }, class: 'gl-vertical-align-middle!' }
+                = token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
+              %td{ data: { label: _('Actions') }, class: 'gl-vertical-align-middle!' }
+                .js-deploy-token-revoke-button{ data: deploy_token_revoke_button_data(token: token, group_or_project: group_or_project) }
 
-- else
-  .settings-message.text-center
-    = s_('DeployTokens|This %{entity_type} has no active Deploy Tokens.') % { entity_type: group_or_project.class.name.downcase }
+    - else
+      .gl-new-card-empty.gl-px-5.gl-py-4
+        = s_('DeployTokens|This %{entity_type} has no active deploy tokens.') % { entity_type: group_or_project.class.name.downcase }
diff --git a/app/views/shared/doorkeeper/applications/_delete_form.html.haml b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
index 512daf7b96b..6b80b42f918 100644
--- a/app/views/shared/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
@@ -1,10 +1,7 @@
-- submit_btn_css ||= 'btn btn-danger btn-md gl-button btn-danger-secondary'
 = form_tag path do
   %input{ :name => "_method", :type => "hidden", :value => "delete" }
   - if defined? small
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'remove', button_options: { class: submit_btn_css, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
-      %span.sr-only
-        = _('Destroy')
+    = render Pajamas::ButtonComponent.new(type: :submit, category: :tertiary, icon: 'remove', button_options: { 'class': 'has-tooltip', 'title': _('Destroy'), aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } })
   - else
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: submit_btn_css, aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
+    = render Pajamas::ButtonComponent.new(type: :submit, category: :primary, variant: :danger, button_options: { aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
       = _('Destroy')
diff --git a/app/views/shared/doorkeeper/applications/_form.html.haml b/app/views/shared/doorkeeper/applications/_form.html.haml
index ae539c46cf1..f24606317ff 100644
--- a/app/views/shared/doorkeeper/applications/_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_form.html.haml
@@ -1,3 +1,5 @@
+- show_cancel_button = local_assigns.fetch(:cancel, false)
+
 = gitlab_ui_form_for @application, url: url, html: { role: 'form', class: 'doorkeeper-app-form gl-max-w-80' } do |f|
   = form_errors(@application)
 
@@ -22,3 +24,6 @@
 
   .gl-mt-3
     = f.submit _('Save application'), pajamas_button: true
+    - if show_cancel_button
+      = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
+        = _('Cancel')
diff --git a/app/views/shared/doorkeeper/applications/_index.html.haml b/app/views/shared/doorkeeper/applications/_index.html.haml
index bf78f275d65..f28cc64b969 100644
--- a/app/views/shared/doorkeeper/applications/_index.html.haml
+++ b/app/views/shared/doorkeeper/applications/_index.html.haml
@@ -1,4 +1,6 @@
 - @force_desktop_expanded_sidebar = true
+- add_form_class = 'gl-display-none' if !form_errors(@application)
+- hide_class = 'gl-display-none' if form_errors(@application)
 
 .settings-section.js-search-settings-section
   .settings-sticky-header
@@ -14,73 +16,92 @@
     - else
       = _("Manage applications that you've authorized to use your account.")
   - if oauth_applications_enabled
-    %h5.gl-mt-0
-      = _('Add new application')
-    .gl-border-b.gl-pb-6
-      = render 'shared/doorkeeper/applications/form', url: form_url
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-applications js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Your applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @applications.size
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new application')
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new application')
+          = render 'shared/doorkeeper/applications/form', url: form_url, cancel: true
+
+        - if @applications.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Callback URL')
+                  %th= _('Clients')
+                  %th.last-heading
+              %tbody
+                - @applications.each do |application|
+                  %tr{ id: "application_#{application.id}" }
+                    %td{ data: { label: _('Name') } }
+                      = link_to application.name, application_url.call(application)
+                    %td{ data: { label: _('Callback URL') } }
+                      - application.redirect_uri.split.each do |uri|
+                        = uri
+                    %td{ data: { label: _('Clients') } }
+                      = application.access_tokens.count
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      %div{ class: 'gl-display-flex! gl-pl-0!' }
+                        = render Pajamas::ButtonComponent.new(category: :tertiary, href: edit_application_url.call(application), icon: 'pencil', button_options: { class: 'has-tooltip gl-mr-3', 'title': _('Edit'), 'aria-label': _('Edit') })
+                        = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content
+            = _("You don't have any applications.")
 
   - else
     .bs-callout.bs-callout-disabled
-      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission')
-  - if oauth_applications_enabled
-    .oauth-applications.gl-pt-6
-      %h5.gl-mt-0
-        = _("Your applications (%{size})") % { size: @applications.size }
-      - if @applications.any?
-        .table-responsive
-          %table.table
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Callback URL')
-                %th= _('Clients')
-                %th.last-heading
-            %tbody
-              - @applications.each do |application|
-                %tr{ id: "application_#{application.id}" }
-                  %td= link_to application.name, application_url.call(application)
-                  %td
-                    - application.redirect_uri.split.each do |uri|
-                      %div= uri
-                  %td= application.access_tokens.count
-                  %td.gl-display-flex
-                    = link_button_to nil, edit_application_url.call(application), class: 'gl-mr-3', icon: 'pencil', 'aria-label': _('Edit')
-                    = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
-      - else
-        .settings-message
-          = _("You don't have any applications")
-  - if oauth_authorized_applications_enabled
-    .oauth-authorized-applications.gl-mt-4
-      - if oauth_applications_enabled
-        %h5.gl-mt-0
-          = _("Authorized applications (%{size})") % { size: @authorized_tokens.size }
+      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission.')
 
-      - if @authorized_tokens.any?
-        .table-responsive
-          %table.table.table-striped
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Authorized At')
-                %th= _('Scope')
-                %th
-            %tbody
-              - @authorized_tokens.each do |token|
-                %tr{ id: ("application_#{token.application.id}" if token.application) }
-                  %td
-                    - if token.application
-                      = token.application.name
-                    - else
-                      = _('Anonymous')
-                      .form-text.text-muted
-                        %em= _("Authorization was granted by entering your username and password in the application.")
-                  %td= token.created_at
-                  %td= token.scopes
-                  %td
-                    - if token.application
-                      = render 'doorkeeper/authorized_applications/delete_form', application: token.application
-                    - else
-                      = render 'doorkeeper/authorized_applications/delete_form', token: token
-      - else
-        .settings-message
-          = _("You don't have any authorized applications")
+  - if oauth_authorized_applications_enabled
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-authorized-applications' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Authorized applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @authorized_tokens.size
+      - c.with_body do
+        - if @authorized_tokens.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Authorized At')
+                  %th= _('Scope')
+                  %th
+              %tbody
+                - @authorized_tokens.each do |token|
+                  %tr{ id: ("application_#{token.application.id}" if token.application) }
+                    %td{ data: { label: _('Name') } }
+                      - if token.application
+                        = token.application.name
+                      - else
+                        = _('Anonymous')
+                        .form-text.text-muted
+                          %em= _("Authorization was granted by entering your username and password in the application.")
+                    %td{ data: { label: _('Authorized At') } }
+                      = token.created_at
+                    %td{ data: { label: _('Scope') } }
+                      = token.scopes
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      - if token.application
+                        = render 'doorkeeper/authorized_applications/delete_form', application: token.application
+                      - else
+                        = render 'doorkeeper/authorized_applications/delete_form', token: token
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4{ class: hide_class }
+            = _("You don't have any authorized applications.")
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index b075cece877..4101a456f32 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -40,7 +40,7 @@
 
     = render "shared/tokens/scopes_list", token: @application
 
-.form-actions.gl-display-flex.gl-justify-content-space-between
+.gl-display-flex.gl-justify-content-space-between
   %div
     - if @created
       = link_button_to _('Continue'), index_path, class: 'gl-mr-3', variant: :confirm
diff --git a/app/views/shared/empty_states/_milestones.html.haml b/app/views/shared/empty_states/_milestones.html.haml
index 0d7dbd1415b..d88baab3011 100644
--- a/app/views/shared/empty_states/_milestones.html.haml
+++ b/app/views/shared/empty_states/_milestones.html.haml
@@ -3,8 +3,8 @@
 
 .row.empty-state
   .col-12
-    .svg-content
-      = image_tag 'illustrations/milestone_burndown_chart.svg'
+    .svg-content.svg-150
+      = image_tag 'illustrations/empty-state/empty-milestone-md.svg'
   .col-12
     .text-content.text-center
       %h4= s_('Milestones|Use milestones to track issues and merge requests over a fixed period of time')
diff --git a/app/views/shared/empty_states/_milestones_tab.html.haml b/app/views/shared/empty_states/_milestones_tab.html.haml
index 52df30434b4..081a260971c 100644
--- a/app/views/shared/empty_states/_milestones_tab.html.haml
+++ b/app/views/shared/empty_states/_milestones_tab.html.haml
@@ -4,8 +4,8 @@
 
 .row.empty-state
   .col-12
-    .svg-content
-      = image_tag 'illustrations/milestone_burndown_chart.svg'
+    .svg-content.svg-150
+      = image_tag 'illustrations/empty-state/empty-milestone-md.svg'
   .col-12
     .text-content
       - if closed_tab_selected
diff --git a/app/views/shared/empty_states/_profile_tabs.html.haml b/app/views/shared/empty_states/_profile_tabs.html.haml
index ba5fbd90528..d71ed963fd1 100644
--- a/app/views/shared/empty_states/_profile_tabs.html.haml
+++ b/app/views/shared/empty_states/_profile_tabs.html.haml
@@ -12,10 +12,10 @@
         - if current_user_empty_message_description.present?
           %p= current_user_empty_message_description
 
-        - if secondary_button_link.present?
-          = link_button_to secondary_button_label, secondary_button_link, variant: :confirm, category: :secondary
-
         - if primary_button_link.present?
           = link_button_to primary_button_label, primary_button_link, variant: :confirm
+
+        - if secondary_button_link.present?
+          = link_button_to secondary_button_label, secondary_button_link, variant: :confirm, category: :secondary
       - else
         %h5= visitor_empty_message
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
index 9e628a1f409..567c4a2d444 100644
--- a/app/views/shared/empty_states/_wikis.html.haml
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -6,21 +6,21 @@
   - create_path = wiki_page_path(@wiki, params[:id], view: 'create')
   - create_link = link_button_to s_('WikiEmpty|Create your first page'), create_path, title: s_('WikiEmpty|Create your first page'), data: { qa_selector: 'create_first_page_link' }, variant: :confirm
 
-  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
+  = render layout: layout_path, locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
     %h4.text-left
       = messages.dig(:writable, :title)
     %p.text-left
       = messages.dig(:writable, :body)
     = create_link
     - if show_enable_confluence_integration?(@wiki.container)
-      = link_to s_('WikiEmpty|Enable the Confluence Wiki integration'),
+      = link_button_to s_('WikiEmpty|Enable the Confluence Wiki integration'),
           edit_project_settings_integration_path(@project, :confluence),
-          class: 'btn gl-button', title: s_('WikiEmpty|Enable the Confluence Wiki integration')
+          title: s_('WikiEmpty|Enable the Confluence Wiki integration')
 
 - elsif @project && can?(current_user, :read_issue, @project)
   - issues_link = link_to s_('WikiEmptyIssueMessage|issue tracker'), project_issues_path(@project)
 
-  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
+  = render layout: layout_path, locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
     %h4
       = messages.dig(:issuable, :title)
     %p.text-left
@@ -29,7 +29,7 @@
       = link_button_to s_('WikiEmpty|Suggest wiki improvement'), new_project_issue_path(@project), title: s_('WikiEmptyIssueMessage|Suggest wiki improvement'), variant: :confirm
 
 - else
-  = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
+  = render layout: layout_path, locals: { image_path: 'illustrations/empty-state/empty-wiki-md.svg' } do
     %h4
       = messages.dig(:readonly, :title)
     %p
diff --git a/app/views/shared/empty_states/_wikis_layout.html.haml b/app/views/shared/empty_states/_wikis_layout.html.haml
index 0b7034838ed..03054c959fd 100644
--- a/app/views/shared/empty_states/_wikis_layout.html.haml
+++ b/app/views/shared/empty_states/_wikis_layout.html.haml
@@ -1,6 +1,6 @@
 .row.empty-state.empty-state-wiki
   .col-12
-    .svg-content{ data: { qa_selector: 'svg_content' } }
+    .svg-content.svg-150{ data: { qa_selector: 'svg_content' } }
       = image_tag image_path
   .col-12
     .text-content.text-center
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index b125fe34464..8df13ec83fe 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -44,6 +44,10 @@
         .js-subscriptions-dropdown
       - if is_issue
         .block
+          .title
+            = _('Confidentiality')
+          .js-confidentiality-dropdown
+        .block
           .js-move-issues{ data: move_data }
 
       = hidden_field_tag "update[issuable_ids]", []
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index fadaeafeaf6..46710081307 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -42,7 +42,7 @@
       .js-sidebar-labels-widget-root{ data: sidebar_labels_data(issuable_sidebar, @project) }
 
       - if issuable_sidebar[:supports_milestone]
-        .block.milestone{ :class => ("gl-border-b-0!" if in_group_context_with_iterations), data: { qa_selector: 'milestone_block', testid: 'sidebar-milestones' } }
+        .block.milestone{ data: { qa_selector: 'milestone_block', testid: 'sidebar-milestones' } }
           .js-sidebar-milestone-widget-root{ data: { can_edit: can_edit_issuable.to_s, project_path: issuable_sidebar[:project_full_path], issue_iid: issuable_sidebar[:iid] } }
 
       - if in_group_context_with_iterations
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
index 01f1dbdb3cf..34815026ff2 100644
--- a/app/views/shared/issuable/form/_branch_chooser.html.haml
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -11,9 +11,11 @@
 - vis1020 = _('This merge request is from an internal project to a public project.')
 - i18n = { '010' => vis010, '020' => vis020, '1020' => vis1020 }
 
-- source_level = @merge_request.source_project.visibility_level
-- source_visibility = @merge_request.source_project.visibility
-- target_level = @merge_request.target_project.visibility_level
+- source_project = @merge_request.source_project
+- target_project = @merge_request.target_project
+- source_level = source_project.visibility_level
+- source_visibility = source_project.visibility
+- target_level = target_project.visibility_level
 
 - visibilityMismatchString = i18n["#{source_level}#{target_level}"]
 
@@ -39,10 +41,18 @@
         = dropdown_filter(_("Search branches"))
         = dropdown_content
         = dropdown_loading
-
 - if source_level < target_level
   = render Pajamas::AlertComponent.new(variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
     - c.with_body do
       = visibilityMismatchString
       %br
       = _('Review the target project before submitting to avoid exposing %{source} changes.') % { source: source_visibility }
+- elsif target_level > Gitlab::VisibilityLevel::PRIVATE
+  - source_access_level = source_project.project_feature.repository_access_level
+  - target_access_level =  target_project.project_feature.repository_access_level
+  - if source_access_level < target_access_level
+    = render Pajamas::AlertComponent.new(title: _('Should these changes be private?'), variant: :warning, dismissible: false, alert_options: { class: 'gl-mb-4' }) do |c|
+      - c.with_body do
+        - warning_message = html_escape(_("Project %{code_open}%{source_project}%{code_close} has more restricted access settings than %{code_open}%{target_project}%{code_close}. To avoid exposing private changes, make sure you're submitting changes to the correct project."))
+        = warning_message % {code_open: '<code>'.html_safe, code_close: '</code>'.html_safe, source_project: source_project.name_with_namespace, target_project: target_project.name_with_namespace}
+
diff --git a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
index bd9afc3ce69..d25ef3f4e83 100644
--- a/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
+++ b/app/views/shared/issuable/form/_metadata_issuable_assignee.html.haml
@@ -8,4 +8,4 @@
       = hidden_field_tag "#{issuable.to_ability_name}[assignee_ids][]", 0, id: nil, data: { meta: '' }
 
     = dropdown_tag(users_dropdown_label(issuable.assignees), options: assignees_dropdown_options(issuable.to_ability_name))
-  = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-pl-4 #{'hide' if issuable.assignees.include?(current_user)}", data: { qa_selector: 'assign_to_me_link' }
+  = link_to _('Assign to me'), '#', class: "assign-to-me-link gl-white-space-nowrap gl-md-pl-3 #{'hide' if issuable.assignees.include?(current_user)}", data: { qa_selector: 'assign_to_me_link' }
diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml
index 40a02fddbf3..249e296b41a 100644
--- a/app/views/shared/issue_type/_details_content.html.haml
+++ b/app/views/shared/issue_type/_details_content.html.haml
@@ -4,6 +4,7 @@
 .issue-details.issuable-details.js-issue-details
   .detail-page-description.content-block.js-detail-page-description.gl-pt-3.gl-pb-0.gl-border-none
     #js-issuable-app{ data: { initial: issuable_initial_data(issuable).to_json,
+      header_actions_data: issue_header_actions_data(@project, issuable, current_user, @issuable_sidebar).to_json,
       issuable_id: issuable.id,
       full_path: @project.full_path,
       register_path: new_user_registration_path(redirect_to_referer: 'yes'),
diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml
index 4997d429587..558287480e1 100644
--- a/app/views/shared/issue_type/_details_header.html.haml
+++ b/app/views/shared/issue_type/_details_header.html.haml
@@ -16,6 +16,6 @@
     #js-issuable-header-warnings{ data: { hidden: issue_hidden?(issuable).to_s } }
     = issuable_meta(issuable, @project)
 
-    = render Pajamas::ButtonComponent.new(href: '#', icon: 'chevron-double-lg-left', button_options: { class: 'gl-float-right gl-display-block gl-sm-display-none! gutter-toggle issuable-gutter-toggle js-sidebar-toggle' })
+    = render Pajamas::ButtonComponent.new(href: '#', icon: 'chevron-double-lg-left', button_options: { class: 'gl-ml-auto gl-display-block gl-sm-display-none! js-sidebar-toggle' })
 
   .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user, @issuable_sidebar) }
diff --git a/app/views/shared/nav/_your_work_scope_header.html.haml b/app/views/shared/nav/_your_work_scope_header.html.haml
index 86172fb14ed..cdd0be3c682 100644
--- a/app/views/shared/nav/_your_work_scope_header.html.haml
+++ b/app/views/shared/nav/_your_work_scope_header.html.haml
@@ -1,5 +1,5 @@
 %li.context-header
-  = link_to root_url, title: _('Your work'), class: 'has-tooltip', data: { container: 'body', placement: 'right' } do
+  = link_to root_path, title: _('Your work'), class: 'has-tooltip', data: { container: 'body', placement: 'right' } do
     %span.avatar-container.icon-avatar.rect-avatar.s32
       = sprite_icon('work', size: 18)
     %span.sidebar-context-title
diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index 3e880a36e29..bbcd072c762 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,4 +1,5 @@
 - noteable_name = @note.noteable.human_class_name
 
 .js-comment-type-dropdown.float-left.gl-sm-mr-3{ data: { noteable_name: noteable_name } }
-  %input.btn.gl-button.btn-confirm.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
+  = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: 'js-comment-button js-comment-submit-button', value: _('Comment'), data: { qa_selector: 'comment_button' }}) do
+    = _('Comment')
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
index 23ce38d50e0..ab8d4bba8ac 100644
--- a/app/views/shared/notes/_hints.html.haml
+++ b/app/views/shared/notes/_hints.html.haml
@@ -16,15 +16,15 @@
           = sprite_icon('paperclip', css_class: 'gl-icon gl-vertical-align-text-bottom')
         %span.uploading-error-message
           -# Populated by app/assets/javascripts/dropzone_input.js
-        %button.btn.gl-button.btn-link.gl-vertical-align-baseline.retry-uploading-link
+        = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'retry-uploading-link' }) do
           %span.gl-button-text
             = _("Try again")
         = _("or")
-        %button.btn.gl-button.btn-link.attach-new-file.markdown-selector.gl-vertical-align-baseline
+        = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'attach-new-file markdown-selector' }) do
           %span.gl-button-text
             = _("attach a new file")
         = _(".")
 
-      %button.btn.gl-button.btn-link.button-cancel-uploading-files.gl-vertical-align-baseline.hide
+      = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'button-cancel-uploading-files hide' }) do
         %span.gl-button-text
           = _("Cancel")
diff --git a/app/views/shared/packages/_no_packages.html.haml b/app/views/shared/packages/_no_packages.html.haml
index ae5c2cfd378..7cc8110fb6b 100644
--- a/app/views/shared/packages/_no_packages.html.haml
+++ b/app/views/shared/packages/_no_packages.html.haml
@@ -1,4 +1,5 @@
-.svg-content= image_tag 'illustrations/no-packages.svg'
+.svg-content.svg-150
+  = image_tag 'illustrations/empty-state/empty-package-md.svg'
 .text-content
   %h4.text-center= _('There are no packages yet')
   %p
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index e09736cad6c..95188cefdd1 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -35,8 +35,7 @@
             %span.project-name<
               = project.name
 
-        %span.gl-mr-3.has-tooltip{ data: { container: 'body', placement: 'top' }, title: visibility_icon_description(project) }
-          = visibility_level_icon(project.visibility_level)
+        = visibility_level_content(project, css_class: 'gl-mr-3')
 
         - if explore_projects_tab? && project_license_name(project)
           %span.gl-display-inline-flex.gl-align-items-center.gl-mr-3
diff --git a/app/views/shared/ssh_keys/_key_delete.html.haml b/app/views/shared/ssh_keys/_key_delete.html.haml
index 80cd23989a0..c969520d7e9 100644
--- a/app/views/shared/ssh_keys/_key_delete.html.haml
+++ b/app/views/shared/ssh_keys/_key_delete.html.haml
@@ -1,5 +1,4 @@
 - category = local_assigns[:category] || :primary
 
-.gl-p-2
-  = render Pajamas::ButtonComponent.new(variant: :danger, category: category, button_options: { class: 'js-confirm-modal-button', data: button_data }) do
-    = _('Delete')
+= render Pajamas::ButtonComponent.new(variant: :danger, category: category, button_options: { class: 'js-confirm-modal-button', data: button_data }) do
+  = _('Delete')
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index a0e55cd5723..f040ea8e542 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -3,7 +3,7 @@
 .js-vue-webhook-form{ data: webhook_form_data(hook) }
 .form-group
   = form.label :token, s_('Webhooks|Secret token'), class: 'label-bold'
-  = form.password_field :token, value: hook.masked_token, autocomplete: 'new-password', class: 'form-control gl-form-input gl-max-w-48'
+  = form.password_field :token, value: hook.masked_token, autocomplete: 'new-password', class: 'form-control gl-form-input gl-form-input-xl'
   %p.form-text.text-muted
     - code_start = '<code>'.html_safe
     - code_end = '</code>'.html_safe
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index 50ce6552616..9b84222e920 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -2,8 +2,8 @@
 - sslBadgeText = _('SSL Verification:') + ' ' + sslStatus
 
 %li.label-list-item
-  .gl-display-flex.lgl-align-items-center.row.gl-mx-n1
-    .col-md-8.col-lg-7.gl-px-3
+  .gl-display-flex.lgl-align-items-center.row.gl-mx-0
+    .col-md-8.col-lg-7.gl-px-5
       .light-header.gl-mb-2
         = hook.url
         - if hook.rate_limited?
@@ -19,7 +19,7 @@
             = gl_badge_tag(integration_webhook_event_human_name(trigger), size: :sm)
         = gl_badge_tag(sslBadgeText, size: :sm)
 
-    .col-md-4.col-lg-5.gl-mt-2.gl-px-3.gl-gap-3.gl-display-flex.gl-md-justify-content-end.gl-align-items-baseline
+    .col-md-4.col-lg-5.gl-mt-2.gl-px-5.gl-gap-3.gl-display-flex.gl-md-justify-content-end.gl-align-items-baseline
       = render 'shared/web_hooks/test_button', hook: hook, size: 'small'
       = render Pajamas::ButtonComponent.new(href: edit_hook_path(hook), size: :small) do
         = _('Edit')
diff --git a/app/views/shared/web_hooks/_index.html.haml b/app/views/shared/web_hooks/_index.html.haml
index 0ea6a0307ba..ccd86937e4f 100644
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
@@ -1,4 +1,4 @@
-= render Pajamas::CardComponent.new(card_options: { id: 'webhooks-index', class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body'}) do |c|
+= render Pajamas::CardComponent.new(card_options: { id: 'webhooks-index', class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body gl-px-0'}) do |c|
   - c.with_header do
     .gl-new-card-title-wrapper
       %h3.gl-new-card-title
@@ -9,16 +9,15 @@
     = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
       = _('Add new webhook')
   - c.with_body do
-    .gl-new-card-content
-      = gitlab_ui_form_for @hook, as: :hook, url: url, html: { class: 'js-webhook-form gl-new-card-add-form gl-mb-3 gl-display-none js-toggle-content' } do |f|
-        = render partial: partial, locals: { form: f, hook: @hook }
-        = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
-        = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
-          = _('Cancel')
-      - if hooks.any?
-        %ul.content-list{ class: 'gl-my-n3!' }
-          - hooks.each do |hook|
-            = render 'shared/web_hooks/hook', hook: hook
-      - else
-        %p.gl-new-card-empty.gl-text-center
-          = _('No webhooks enabled. Select trigger events above.')
+    = gitlab_ui_form_for @hook, as: :hook, url: url, html: { class: 'js-webhook-form gl-new-card-add-form gl-m-3 gl-display-none js-toggle-content' } do |f|
+      = render partial: partial, locals: { form: f, hook: @hook }
+      = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
+      = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
+        = _('Cancel')
+    - if hooks.any?
+      %ul.content-list
+        - hooks.each do |hook|
+          = render 'shared/web_hooks/hook', hook: hook
+    - else
+      %p.gl-new-card-empty.gl-text-center
+        = _('No webhooks enabled. Select trigger events above.')
diff --git a/app/views/shared/wikis/show.html.haml b/app/views/shared/wikis/show.html.haml
index 28699ca27f3..be1f43f44de 100644
--- a/app/views/shared/wikis/show.html.haml
+++ b/app/views/shared/wikis/show.html.haml
@@ -12,6 +12,8 @@
 
   .nav-controls.pb-md-3.pb-lg-0
     = render 'shared/wikis/main_links'
+    - if Feature.enabled?(:print_wiki, current_user)
+      #js-export-actions{ data: { options: { target: '.js-wiki-page-content', title: @page.human_title, stylesheet: [stylesheet_path('application')] }.to_json } }
 
 - if @page.historical?
   = render Pajamas::AlertComponent.new(variant: :warning,
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 380d6aacb84..e2ddbb90213 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -26,7 +26,7 @@
               = s_("UserProfile|Edit profile")
           = render 'users/view_gpg_keys'
           = render 'users/view_user_in_admin_area'
-          .js-user-profile-actions{ data: { user_id: @user.id } }
+          .js-user-profile-actions{ data: user_profile_actions_data(@user) }
       - else
         = render layout: 'users/cover_controls' do
           - if @user == current_user