Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

408 files changed, 2085 insertions, 2178 deletions

diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml
index 3e1a76f31e1..dbfc7bf1046 100644
--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -25,10 +25,10 @@
   %td
     - if user
       = link_to _('Remove user & report'), admin_abuse_report_path(abuse_report, remove_user: true),
-        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name } }, remote: true, method: :delete, class: "gl-button btn btn-sm btn-block btn-danger js-remove-tr"
+        data: { confirm: _("USER %{user} WILL BE REMOVED! Are you sure?") % { user: user.name } }, remote: true, method: :delete, class: "gl-button btn btn-block btn-danger js-remove-tr"
     - if user && !user.blocked?
-      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-sm btn-block"
+      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-default btn-block"
     - else
-      .btn.btn-sm.disabled.btn-block
+      .gl-button.btn.btn-default.disabled.btn-block
         = _('Already blocked')
-    = link_to _('Remove report'), [:admin, abuse_report], remote: true, method: :delete, class: "gl-button btn btn-sm btn-block btn-close js-remove-tr"
+    = link_to _('Remove report'), [:admin, abuse_report], remote: true, method: :delete, class: "gl-button btn btn-default btn-block btn-close js-remove-tr"
diff --git a/app/views/admin/abuse_reports/index.html.haml b/app/views/admin/abuse_reports/index.html.haml
index daa766429e0..8b1bbbc17c7 100644
--- a/app/views/admin/abuse_reports/index.html.haml
+++ b/app/views/admin/abuse_reports/index.html.haml
@@ -19,13 +19,14 @@
       %table.table.responsive-table
         %thead.d-none.d-md-table-header-group
           %tr
-            %th User
-            %th Reported by
-            %th.wide Message
-            %th Action
+            %th= _('User')
+            %th= _('Reported by')
+            %th.wide= _('Message')
+            %th= _('Action')
         = render @abuse_reports
     = paginate @abuse_reports, theme: 'gitlab'
   - else
     .empty-state
       .text-center
-        %h4 There are no abuse reports! #{emoji_icon('tada')}
+        %h4= _("There are no abuse reports!")
+        %h3= emoji_icon('tada')
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 2e5cf156a65..1e2c9f821d2 100644
--- a/app/views/admin/application_settings/_account_and_limit.html.haml
+++ b/app/views/admin/application_settings/_account_and_limit.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-account-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-account-settings'), html: { class: 'fieldset-form', id: 'account-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
diff --git a/app/views/admin/application_settings/_diff_limits.html.haml b/app/views/admin/application_settings/_diff_limits.html.haml
index c5ae5c579ad..7286fffcaf6 100644
--- a/app/views/admin/application_settings/_diff_limits.html.haml
+++ b/app/views/admin/application_settings/_diff_limits.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-merge-request-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-merge-request-settings'), html: { class: 'fieldset-form', id: 'merge-request-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
diff --git a/app/views/admin/application_settings/_eks.html.haml b/app/views/admin/application_settings/_eks.html.haml
index 1ddf927ed13..c44bad132bd 100644
--- a/app/views/admin/application_settings/_eks.html.haml
+++ b/app/views/admin/application_settings/_eks.html.haml
@@ -9,7 +9,7 @@
       = _('Amazon EKS integration allows you to provision EKS clusters from GitLab.')
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-eks-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-eks-settings'), html: { class: 'fieldset-form', id: 'eks-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
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 97e09476e78..abd182027b1 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
@@ -8,7 +8,7 @@
       = _('External Classification Policy Authorization')
   .settings-content
 
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-external-auth-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-external-auth-settings'), html: { class: 'fieldset-form', id: 'external-auth-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
diff --git a/app/views/admin/application_settings/_gitpod.html.haml b/app/views/admin/application_settings/_gitpod.html.haml
index 48b0c6be0a8..6d335e2db16 100644
--- a/app/views/admin/application_settings/_gitpod.html.haml
+++ b/app/views/admin/application_settings/_gitpod.html.haml
@@ -12,7 +12,7 @@
 
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-gitpod-settings'), html: { class: 'fieldset-form' } do |f|
+    = 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)
 
       %fieldset
diff --git a/app/views/admin/application_settings/_ip_limits.html.haml b/app/views/admin/application_settings/_ip_limits.html.haml
index 18d71a90e34..e584aaf9880 100644
--- a/app/views/admin/application_settings/_ip_limits.html.haml
+++ b/app/views/admin/application_settings/_ip_limits.html.haml
@@ -8,14 +8,14 @@
       .form-check
         = f.check_box :throttle_unauthenticated_enabled, class: 'form-check-input', data: { qa_selector: 'throttle_unauthenticated_checkbox' }
         = f.label :throttle_unauthenticated_enabled, class: 'form-check-label label-bold' do
-          Enable unauthenticated request rate limit
+          = _("Enable unauthenticated request rate limit")
         %span.form-text.text-muted
-          Helps reduce request volume (e.g. from crawlers or abusive bots)
+          = _("Helps reduce request volume (e.g. from crawlers or abusive bots)")
     .form-group
-      = f.label :throttle_unauthenticated_requests_per_period, 'Max unauthenticated requests per period per IP', class: 'label-bold'
+      = f.label :throttle_unauthenticated_requests_per_period, _('Max unauthenticated requests per period per IP'), class: 'label-bold'
       = f.number_field :throttle_unauthenticated_requests_per_period, class: 'form-control gl-form-input'
     .form-group
-      = f.label :throttle_unauthenticated_period_in_seconds, 'Unauthenticated rate limit period in seconds', class: 'label-bold'
+      = f.label :throttle_unauthenticated_period_in_seconds, _('Unauthenticated rate limit period in seconds'), class: 'label-bold'
       = f.number_field :throttle_unauthenticated_period_in_seconds, class: 'form-control gl-form-input'
     %hr
     %h5
@@ -24,14 +24,14 @@
       .form-check
         = f.check_box :throttle_authenticated_api_enabled, class: 'form-check-input', data: { qa_selector: 'throttle_authenticated_api_checkbox' }
         = f.label :throttle_authenticated_api_enabled, class: 'form-check-label label-bold' do
-          Enable authenticated API request rate limit
+          = _("Enable authenticated API request rate limit")
         %span.form-text.text-muted
-          Helps reduce request volume (e.g. from crawlers or abusive bots)
+          = _("Helps reduce request volume (e.g. from crawlers or abusive bots)")
     .form-group
-      = f.label :throttle_authenticated_api_requests_per_period, 'Max authenticated API requests per period per user', class: 'label-bold'
+      = f.label :throttle_authenticated_api_requests_per_period, _('Max authenticated API requests per period per user'), class: 'label-bold'
       = f.number_field :throttle_authenticated_api_requests_per_period, class: 'form-control gl-form-input'
     .form-group
-      = f.label :throttle_authenticated_api_period_in_seconds, 'Authenticated API rate limit period in seconds', class: 'label-bold'
+      = f.label :throttle_authenticated_api_period_in_seconds, _('Authenticated API rate limit period in seconds'), class: 'label-bold'
       = f.number_field :throttle_authenticated_api_period_in_seconds, class: 'form-control gl-form-input'
     %hr
     %h5
@@ -44,10 +44,10 @@
         %span.form-text.text-muted
           Helps reduce request volume (e.g. from crawlers or abusive bots)
     .form-group
-      = f.label :throttle_authenticated_web_requests_per_period, 'Max authenticated web requests per period per user', class: 'label-bold'
+      = f.label :throttle_authenticated_web_requests_per_period, _('Max authenticated web requests per period per user'), class: 'label-bold'
       = f.number_field :throttle_authenticated_web_requests_per_period, class: 'form-control gl-form-input'
     .form-group
-      = f.label :throttle_authenticated_web_period_in_seconds, 'Authenticated web rate limit period in seconds', class: 'label-bold'
+      = f.label :throttle_authenticated_web_period_in_seconds, _('Authenticated web rate limit period in seconds'), class: 'label-bold'
       = f.number_field :throttle_authenticated_web_period_in_seconds, class: 'form-control gl-form-input'
     %hr
     %h5
@@ -57,4 +57,4 @@
         = _('A plain-text response to show to clients that hit the rate limit.')
       = f.text_area :rate_limiting_response_text, placeholder: ::Gitlab::Throttle::DEFAULT_RATE_LIMITING_RESPONSE_TEXT, class: 'form-control gl-form-input', rows: 5
 
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/admin/application_settings/_kroki.html.haml b/app/views/admin/application_settings/_kroki.html.haml
index fc51942ed1f..b9da2047453 100644
--- a/app/views/admin/application_settings/_kroki.html.haml
+++ b/app/views/admin/application_settings/_kroki.html.haml
@@ -8,7 +8,7 @@
     %p
       = _('Allow rendering of diagrams in AsciiDoc and Markdown documents using %{link}.').html_safe % { link: link_to('Kroki', 'https://kroki.io', target: '_blank') }
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-kroki-settings'), html: { class: 'fieldset-form', id: 'kroki-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
diff --git a/app/views/admin/application_settings/_pages.html.haml b/app/views/admin/application_settings/_pages.html.haml
index 8f52e8b8461..5d6443825b7 100644
--- a/app/views/admin/application_settings/_pages.html.haml
+++ b/app/views/admin/application_settings/_pages.html.haml
@@ -3,7 +3,7 @@
 
   %fieldset
     .form-group
-      = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'label-bold'
+      = f.label :max_pages_size, _('Maximum size of pages (MB)'), class: 'label-bold'
       = f.number_field :max_pages_size, class: 'form-control gl-form-input'
       .form-text.text-muted
         = _("0 for unlimited")
diff --git a/app/views/admin/application_settings/_performance.html.haml b/app/views/admin/application_settings/_performance.html.haml
index 5ee68e8fd16..50fc11ec7f3 100644
--- a/app/views/admin/application_settings/_performance.html.haml
+++ b/app/views/admin/application_settings/_performance.html.haml
@@ -6,7 +6,7 @@
       .form-check
         = f.check_box :authorized_keys_enabled, class: 'form-check-input'
         = f.label :authorized_keys_enabled, class: 'form-check-label' do
-          Write to "authorized_keys" file
+          = _('Write to "authorized_keys" file')
         .form-text.text-muted
           By default, we write to the "authorized_keys" file to support Git
           over SSH without additional configuration. GitLab can be optimized
@@ -31,4 +31,4 @@
       .form-text.text-muted
         = _('Number of changes (branches or tags) in a single push to determine whether individual push events or bulk push event will be created. Bulk push event will be created if it surpasses that value.')
 
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_performance_bar.html.haml b/app/views/admin/application_settings/_performance_bar.html.haml
index 8f2bdd109cb..f603dcab407 100644
--- a/app/views/admin/application_settings/_performance_bar.html.haml
+++ b/app/views/admin/application_settings/_performance_bar.html.haml
@@ -6,9 +6,9 @@
       .form-check
         = f.check_box :performance_bar_enabled, class: 'form-check-input', data: { qa_selector: 'enable_performance_bar_checkbox'}
         = f.label :performance_bar_enabled, class: 'form-check-label' do
-          Enable access to the Performance Bar
+          = _("Enable access to the Performance Bar")
     .form-group
-      = f.label :performance_bar_allowed_group_path, 'Allowed group', class: 'label-bold'
+      = f.label :performance_bar_allowed_group_path, _('Allowed group'), class: 'label-bold'
       = f.text_field :performance_bar_allowed_group_path, class: 'form-control gl-form-input', placeholder: 'my-org/my-group', value: @application_setting.performance_bar_allowed_group&.full_path
 
-  = f.submit 'Save changes', class: 'gl-button btn btn-confirm qa-save-changes-button'
+  = f.submit _('Save changes'), class: 'gl-button btn btn-confirm qa-save-changes-button'
diff --git a/app/views/admin/application_settings/_plantuml.html.haml b/app/views/admin/application_settings/_plantuml.html.haml
index e6e9bbf3ee0..d57ae94b084 100644
--- a/app/views/admin/application_settings/_plantuml.html.haml
+++ b/app/views/admin/application_settings/_plantuml.html.haml
@@ -8,7 +8,7 @@
     %p
       = _('Allow rendering of PlantUML diagrams in Asciidoc documents.')
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-plantuml-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-plantuml-settings'), html: { class: 'fieldset-form', id: 'plantuml-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
diff --git a/app/views/admin/application_settings/_realtime.html.haml b/app/views/admin/application_settings/_realtime.html.haml
index bee120d2f78..545c27d2a7e 100644
--- a/app/views/admin/application_settings/_realtime.html.haml
+++ b/app/views/admin/application_settings/_realtime.html.haml
@@ -3,15 +3,10 @@
 
   %fieldset
     .form-group
-      = f.label :polling_interval_multiplier, 'Polling interval multiplier', class: 'label-bold'
+      = f.label :polling_interval_multiplier, _('Polling interval multiplier'), class: 'label-bold'
       = f.text_field :polling_interval_multiplier, class: 'form-control gl-form-input'
       .form-text.text-muted
-        Change this value to influence how frequently the GitLab UI polls for updates.
-        If you set the value to 2 all polling intervals are multiplied
-        by 2, which means that polling happens half as frequently.
-        The multiplier can also have a decimal value.
-        The default value (1) is a reasonable choice for the majority of GitLab
-        installations. Set to 0 to completely disable polling.
+        = _("Change this value to influence how frequently the GitLab UI polls for updates. If you set the value to 2 all polling intervals are multiplied by 2, which means that polling happens half as frequently. The multiplier can also have a decimal value. The default value (1) is a reasonable choice for the majority of GitLab installations. Set to 0 to completely disable polling.")
         = link_to sprite_icon('question-o'), help_page_path('administration/polling')
 
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_registry.html.haml b/app/views/admin/application_settings/_registry.html.haml
index fc03a6dd10c..78d4e8c8cc3 100644
--- a/app/views/admin/application_settings/_registry.html.haml
+++ b/app/views/admin/application_settings/_registry.html.haml
@@ -3,7 +3,7 @@
 
   %fieldset
     .form-group
-      = f.label :container_registry_token_expire_delay, 'Authorization token duration (minutes)', class: 'label-bold'
+      = f.label :container_registry_token_expire_delay, _('Authorization token duration (minutes)'), class: 'label-bold'
       = f.number_field :container_registry_token_expire_delay, class: 'form-control gl-form-input'
     .form-group
       .form-check
@@ -31,4 +31,4 @@
         .form-text.text-muted
           = _("The maximum number of tags that a single worker accepts for cleanup. If the number of tags goes above this limit, the list of tags to delete is truncated to this number. To remove this limit, set it to 0.")
 
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm"
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_repository_check.html.haml b/app/views/admin/application_settings/_repository_check.html.haml
index ee0281b6e33..edf6853a1aa 100644
--- a/app/views/admin/application_settings/_repository_check.html.haml
+++ b/app/views/admin/application_settings/_repository_check.html.haml
@@ -3,56 +3,51 @@
 
   %fieldset
     .sub-section
-      %h4 Repository checks
+      %h4= _("Repository checks")
       .form-group
         .form-check
           = f.check_box :repository_checks_enabled, class: 'form-check-input'
           = f.label :repository_checks_enabled, class: 'form-check-label' do
-            Enable Repository Checks
+            = _("Enable Repository Checks")
           .form-text.text-muted
-            GitLab will periodically run
-            %a{ href: 'https://git-scm.com/docs/git-fsck', target: 'blank' } 'git fsck'
-            in all project and wiki repositories to look for silent disk corruption issues.
+            - link_to_git_fsck = link_to('git fsck', 'https://git-scm.com/docs/git-fsck', target: '_blank')
+            = _("GitLab will periodically run %{link_to_git_fsck} in all project and wiki repositories to look for silent disk corruption issues.").html_safe % { link_to_git_fsck: link_to_git_fsck }
       .form-group
         .form-text.text-muted
-          If you got a lot of false alarms from repository checks you can choose to clear all repository check information from the database.
+          = _("If you got a lot of false alarms from repository checks you can choose to clear all repository check information from the database.")
           - clear_repository_checks_link = _('Clear all repository checks')
           - clear_repository_checks_message = _('This will clear repository check states for ALL projects in the database. This cannot be undone. Are you sure?')
         = link_to clear_repository_checks_link, clear_repository_check_states_admin_application_settings_path, data: { confirm: clear_repository_checks_message }, method: :put, class: "gl-button btn btn-sm btn-danger"
 
     .sub-section
-      %h4 Housekeeping
+      %h4= _("Housekeeping")
       .form-group
         .form-check
           = f.check_box :housekeeping_enabled, class: 'form-check-input'
           = f.label :housekeeping_enabled, class: 'form-check-label' do
-            Enable automatic repository housekeeping (git repack, git gc)
+            = _("Enable automatic repository housekeeping (git repack, git gc)")
           .form-text.text-muted
-            If you keep automatic housekeeping disabled for a long time Git
-            repository access on your GitLab server will become slower and your
-            repositories will use more disk space. We recommend to always leave
-            this enabled.
+            = _("If you keep automatic housekeeping disabled for a long time Git repository access on your GitLab server will become slower and your repositories will use more disk space. We recommend to always leave this enabled.")
         .form-check
           = f.check_box :housekeeping_bitmaps_enabled, class: 'form-check-input'
           = f.label :housekeeping_bitmaps_enabled, class: 'form-check-label' do
-            Enable Git pack file bitmap creation
+            = _("Enable Git pack file bitmap creation")
           .form-text.text-muted
-            Creating pack file bitmaps makes housekeeping take a little longer but
-            bitmaps should accelerate 'git clone' performance.
+            = _("Creating pack file bitmaps makes housekeeping take a little longer but bitmaps should accelerate 'git clone' performance.")
       .form-group
         = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'label-bold'
         = f.number_field :housekeeping_incremental_repack_period, class: 'form-control gl-form-input'
         .form-text.text-muted
-          Number of Git pushes after which an incremental 'git repack' is run.
+          = _("Number of Git pushes after which an incremental 'git repack' is run.")
       .form-group
         = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'label-bold'
         = f.number_field :housekeeping_full_repack_period, class: 'form-control gl-form-input'
         .form-text.text-muted
-          Number of Git pushes after which a full 'git repack' is run.
+          = _("Number of Git pushes after which a full 'git repack' is run.")
       .form-group
-        = f.label :housekeeping_gc_period, 'Git GC period', class: 'label-bold'
+        = f.label :housekeeping_gc_period, _('Git GC period'), class: 'label-bold'
         = f.number_field :housekeeping_gc_period, class: 'form-control gl-form-input'
         .form-text.text-muted
-          Number of Git pushes after which 'git gc' is run.
+          = _("Number of Git pushes after which 'git gc' is run.")
 
   = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/admin/application_settings/_signin.html.haml b/app/views/admin/application_settings/_signin.html.haml
index 54bd5cf4072..62d6c973efe 100644
--- a/app/views/admin/application_settings/_signin.html.haml
+++ b/app/views/admin/application_settings/_signin.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-signin-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-signin-settings'), html: { class: 'fieldset-form', id: 'signin-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
@@ -32,6 +32,15 @@
         = f.label :require_two_factor_authentication, class: 'form-check-label' do
           Require all users to set up Two-factor authentication
     .form-group
+      = f.label :admin_mode, _('Admin Mode'), class: 'label-bold'
+      = sprite_icon('lock', css_class: 'gl-icon')
+      .form-check
+        = f.check_box :admin_mode, class: 'form-check-input'
+        = f.label :admin_mode, class: 'form-check-label' do
+          = _('Require additional authentication for administrative tasks')
+        .form-text.text-muted
+          = link_to _('Learn more.'), help_page_path('user/admin_area/settings/sign_in_restrictions', anchor: 'admin-mode')
+    .form-group
       = f.label :unknown_sign_in, _('Email notification for unknown sign-ins'), class: 'label-bold'
       .form-check
         = f.check_box :notify_on_unknown_sign_in, class: 'form-check-input'
diff --git a/app/views/admin/application_settings/_signup.html.haml b/app/views/admin/application_settings/_signup.html.haml
index 272eba67b1b..a5b47159239 100644
--- a/app/views/admin/application_settings/_signup.html.haml
+++ b/app/views/admin/application_settings/_signup.html.haml
@@ -1,80 +1,20 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-signup-settings'), html: { class: 'fieldset-form' } do |f|
-  = form_errors(@application_setting)
+= form_errors(@application_setting)
 
-  %fieldset
-    .form-group
-      .form-check
-        = f.check_box :signup_enabled, class: 'form-check-input', data: { qa_selector: 'signup_enabled_checkbox' }
-        = f.label :signup_enabled, class: 'form-check-label' do
-          Sign-up enabled
-          .form-text.text-muted
-            = _("When enabled, any user visiting %{host} will be able to create an account.") % { host: "#{new_user_session_url(host: Gitlab.config.gitlab.host)}" }
-    .form-group
-      .form-check
-        = f.check_box :require_admin_approval_after_user_signup, class: 'form-check-input', data: { qa_selector: 'require_admin_approval_after_user_signup_checkbox' }
-        = f.label :require_admin_approval_after_user_signup, class: 'form-check-label' do
-          = _('Require admin approval for new sign-ups')
-          .form-text.text-muted
-            = _("When enabled, any user visiting %{host} and creating an account will have to be explicitly approved by an admin before they can sign in. This setting is effective only if sign-ups are enabled.") % { host: "#{new_user_session_url(host: Gitlab.config.gitlab.host)}" }
-    .form-group
-      .form-check
-        = f.check_box :send_user_confirmation_email, class: 'form-check-input'
-        = f.label :send_user_confirmation_email, class: 'form-check-label' do
-          Send confirmation email on sign-up
-
-    = render_if_exists 'admin/application_settings/new_user_signups_cap', form: f
-
-    .form-group
-      = f.label :minimum_password_length, _('Minimum password length (number of characters)'), class: 'label-bold'
-      = f.number_field :minimum_password_length, class: 'form-control gl-form-input', rows: 4, min: ApplicationSetting::DEFAULT_MINIMUM_PASSWORD_LENGTH, max: Devise.password_length.max
-      - password_policy_guidelines_link = link_to _('Password Policy Guidelines'), 'https://about.gitlab.com/handbook/security/#gitlab-password-policy-guidelines', target: '_blank', rel: 'noopener noreferrer nofollow'
-      .form-text.text-muted
-        = _("See GitLab's %{password_policy_guidelines}").html_safe % { password_policy_guidelines: password_policy_guidelines_link }
-    .form-group
-      = f.label :domain_allowlist, _('Allowed domains for sign-ups'), class: 'label-bold'
-      = f.text_area :domain_allowlist_raw, placeholder: 'domain.com', class: 'form-control gl-form-input', rows: 8
-      .form-text.text-muted ONLY users with e-mail addresses that match these domain(s) will be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-    .form-group
-      = f.label :domain_denylist_enabled, _('Domain denylist'), class: 'label-bold'
-      .form-check
-        = f.check_box :domain_denylist_enabled, class: 'form-check-input'
-        = f.label :domain_denylist_enabled, class: 'form-check-label' do
-          Enable domain denylist for sign ups
-    .form-group
-      .form-check
-        = radio_button_tag :denylist_type, :file, false, class: 'form-check-input'
-        = label_tag :denylist_type_file, class: 'form-check-label' do
-          .option-title
-            Upload denylist file
-      .form-check
-        = radio_button_tag :denylist_type, :raw, @application_setting.domain_denylist.present? || @application_setting.domain_denylist.blank?, class: 'form-check-input'
-        = label_tag :denylist_type_raw, class: 'form-check-label' do
-          .option-title
-            Enter denylist manually
-    .form-group.js-denylist-file
-      = f.label :domain_denylist_file, _('Denylist file'), class: 'label-bold'
-      = f.file_field :domain_denylist_file, class: 'form-control gl-form-input', accept: '.txt,.conf'
-      .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines or commas for multiple entries.
-    .form-group.js-denylist-raw
-      = f.label :domain_denylist, _('Denied domains for sign-ups'), class: 'label-bold'
-      = f.text_area :domain_denylist_raw, placeholder: 'domain.com', class: 'form-control gl-form-input', rows: 8
-      .form-text.text-muted Users with e-mail addresses that match these domain(s) will NOT be able to sign-up. Wildcards allowed. Use separate lines for multiple entries. Ex: domain.com, *.domain.com
-    .form-group
-      = f.label :email_restrictions_enabled, _('Email restrictions'), class: 'label-bold'
-      .form-check
-        = f.check_box :email_restrictions_enabled, class: 'form-check-input'
-        = f.label :email_restrictions_enabled, class: 'form-check-label' do
-          = _('Enable email restrictions for sign ups')
-    .form-group
-      = f.label :email_restrictions, _('Email restrictions for sign-ups'), class: 'label-bold'
-      = f.text_area :email_restrictions, class: 'form-control gl-form-input', rows: 4
-      .form-text.text-muted
-      - supported_syntax_link_url = 'https://github.com/google/re2/wiki/Syntax'
-      - supported_syntax_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: supported_syntax_link_url }
-      = _('Restricts sign-ups for email addresses that match the given regex. See the %{supported_syntax_link_start}supported syntax%{supported_syntax_link_end} for more information.').html_safe % { supported_syntax_link_start: supported_syntax_link_start, supported_syntax_link_end: '</a>'.html_safe }
-
-    .form-group
-      = f.label :after_sign_up_text, class: 'label-bold'
-      = f.text_area :after_sign_up_text, class: 'form-control gl-form-input', rows: 4
-      .form-text.text-muted Markdown enabled
-  = f.submit 'Save changes', class: "gl-button btn btn-confirm", data: { qa_selector: 'save_changes_button' }
+#js-signup-form{ data: { host: new_user_session_url(host: Gitlab.config.gitlab.host),
+  settings_path: general_admin_application_settings_path(anchor: 'js-signup-settings'),
+  signup_enabled: @application_setting[:signup_enabled].to_s,
+  require_admin_approval_after_user_signup: @application_setting[:require_admin_approval_after_user_signup].to_s,
+  send_user_confirmation_email: @application_setting[:send_user_confirmation_email].to_s,
+  minimum_password_length: @application_setting[:minimum_password_length],
+  minimum_password_length_min: ApplicationSetting::DEFAULT_MINIMUM_PASSWORD_LENGTH,
+  minimum_password_length_max: Devise.password_length.max,
+  minimum_password_length_help_link: 'https://about.gitlab.com/handbook/security/#gitlab-password-policy-guidelines',
+  domain_allowlist_raw: @application_setting.domain_allowlist_raw,
+  new_user_signups_cap: @application_setting[:new_user_signups_cap].to_s,
+  domain_denylist_enabled: @application_setting[:domain_denylist_enabled].to_s,
+  denylist_type_raw_selected: (@application_setting.domain_denylist.present? || @application_setting.domain_denylist.blank?).to_s,
+  domain_denylist_raw: @application_setting.domain_denylist_raw,
+  email_restrictions_enabled: @application_setting[:email_restrictions_enabled].to_s,
+  supported_syntax_link_url: 'https://github.com/google/re2/wiki/Syntax',
+  email_restrictions: @application_setting.email_restrictions,
+  after_sign_up_text: @application_setting[:after_sign_up_text] } }
diff --git a/app/views/admin/application_settings/_snowplow.html.haml b/app/views/admin/application_settings/_snowplow.html.haml
index e6ac2a4db34..5daf220d81c 100644
--- a/app/views/admin/application_settings/_snowplow.html.haml
+++ b/app/views/admin/application_settings/_snowplow.html.haml
@@ -8,7 +8,7 @@
     %p
       = _('Configure the %{link} integration.').html_safe % { link: link_to('Snowplow', 'https://snowplowanalytics.com/', target: '_blank') }
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-snowplow-settings'), html: { class: 'fieldset-form' } do |f|
+    = 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
 
       %fieldset
diff --git a/app/views/admin/application_settings/_sourcegraph.html.haml b/app/views/admin/application_settings/_sourcegraph.html.haml
index af25577f058..d87ded09a2b 100644
--- a/app/views/admin/application_settings/_sourcegraph.html.haml
+++ b/app/views/admin/application_settings/_sourcegraph.html.haml
@@ -16,7 +16,7 @@
 
 
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-sourcegraph-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-sourcegraph-settings'), html: { class: 'fieldset-form', id: 'sourcegraph-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
diff --git a/app/views/admin/application_settings/_terminal.html.haml b/app/views/admin/application_settings/_terminal.html.haml
index 487ce25a4da..482466c4b3b 100644
--- a/app/views/admin/application_settings/_terminal.html.haml
+++ b/app/views/admin/application_settings/_terminal.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terminal-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terminal-settings'), html: { class: 'fieldset-form', id: 'terminal-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
diff --git a/app/views/admin/application_settings/_terms.html.haml b/app/views/admin/application_settings/_terms.html.haml
index 8cc4169b383..fe260812ad9 100644
--- a/app/views/admin/application_settings/_terms.html.haml
+++ b/app/views/admin/application_settings/_terms.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terms-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-terms-settings'), html: { class: 'fieldset-form', id: 'terms-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
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 970c9c6b003..5df2454ed2e 100644
--- a/app/views/admin/application_settings/_third_party_offers.html.haml
+++ b/app/views/admin/application_settings/_third_party_offers.html.haml
@@ -8,7 +8,7 @@
     %p
       = _('Control the display of third party offers.')
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-third-party-offers-settings'), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-third-party-offers-settings'), html: { class: 'fieldset-form', id: 'third-party-offers-settings' } do |f|
       = form_errors(@application_setting) if expanded
 
       %fieldset
diff --git a/app/views/admin/application_settings/_usage.html.haml b/app/views/admin/application_settings/_usage.html.haml
index 00306e1ba06..a2d61bd010f 100644
--- a/app/views/admin/application_settings/_usage.html.haml
+++ b/app/views/admin/application_settings/_usage.html.haml
@@ -27,7 +27,7 @@
             - usage_ping_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: usage_ping_path }
             %p.mb-2= s_('%{usage_ping_link_start}Learn more%{usage_ping_link_end} about what information is shared with GitLab Inc.').html_safe % { usage_ping_link_start: usage_ping_link_start, usage_ping_link_end: '</a>'.html_safe }
 
-            %button.btn.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
+            %button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
               .spinner.js-spinner.d-none
               .js-text.d-inline= _('Preview payload')
             %pre.usage-data.js-syntax-highlight.code.highlight.mt-2.d-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }
diff --git a/app/views/admin/application_settings/_visibility_and_access.html.haml b/app/views/admin/application_settings/_visibility_and_access.html.haml
index e51a41d5254..4bf47c3d60d 100644
--- a/app/views/admin/application_settings/_visibility_and_access.html.haml
+++ b/app/views/admin/application_settings/_visibility_and_access.html.haml
@@ -1,4 +1,4 @@
-= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-visibility-settings'), html: { class: 'fieldset-form' } do |f|
+= form_for @application_setting, url: general_admin_application_settings_path(anchor: 'js-visibility-settings'), html: { class: 'fieldset-form', id: 'visibility-settings' } do |f|
   = form_errors(@application_setting)
 
   %fieldset
diff --git a/app/views/admin/application_settings/ci/_header.html.haml b/app/views/admin/application_settings/ci/_header.html.haml
index aa4cebdb603..919f501d2ee 100644
--- a/app/views/admin/application_settings/ci/_header.html.haml
+++ b/app/views/admin/application_settings/ci/_header.html.haml
@@ -8,7 +8,7 @@
 
 %p
   = _('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 s_('Learn more.'), help_page_path('ci/variables/README', anchor: 'instance-level-cicd-variables'), target: '_blank', rel: 'noopener noreferrer'
+  = link_to s_('Learn more.'), help_page_path('ci/variables/README', anchor: 'instance-cicd-variables'), target: '_blank', rel: 'noopener noreferrer'
 %p
   = _('Variables can be:')
 %ul
@@ -16,4 +16,4 @@
     = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
   %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/README', anchor: 'masked-variable-requirements'), target: '_blank', rel: 'noopener noreferrer'
+    = link_to _('Learn more.'), help_page_path('ci/variables/README', 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 485fb71d111..d38b4cba40a 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -2,16 +2,15 @@
 - page_title _("CI/CD")
 - @content_class = "limit-container-width" unless fluid_layout
 
-- if ::Gitlab::Ci::Features.instance_variables_ui_enabled?
-  %section.settings.no-animate#js-ci-cd-variables{ class: ('expanded' if expanded_by_default?) }
-    .settings-header
-      = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
-    .settings-content
-      - if ci_variable_protected_by_default?
-        %p.settings-message.text-center
-          - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protect-a-custom-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 }
-      #js-instance-variables{ data: { endpoint: admin_ci_variables_path, group: 'true', maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
+%section.settings.no-animate#js-ci-cd-variables{ class: ('expanded' if expanded_by_default?) }
+  .settings-header
+    = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
+  .settings-content
+    - if ci_variable_protected_by_default?
+      %p.settings-message.text-center
+        - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', 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 }
+    #js-instance-variables{ data: { endpoint: admin_ci_variables_path, group: 'true', 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?) }
   .settings-header
diff --git a/app/views/admin/application_settings/general.html.haml b/app/views/admin/application_settings/general.html.haml
index 3a14b4fbc7b..86226a9de2f 100644
--- a/app/views/admin/application_settings/general.html.haml
+++ b/app/views/admin/application_settings/general.html.haml
@@ -90,7 +90,7 @@
     %p
       = _('Manage Web IDE features')
   .settings-content
-    = form_for @application_setting, url: general_admin_application_settings_path(anchor: "#js-web-ide-settings"), html: { class: 'fieldset-form' } do |f|
+    = form_for @application_setting, url: general_admin_application_settings_path(anchor: "#js-web-ide-settings"), html: { class: 'fieldset-form', id: 'web-ide-settings' } do |f|
       = form_errors(@application_setting)
 
       %fieldset
diff --git a/app/views/admin/application_settings/integrations.html.haml b/app/views/admin/application_settings/integrations.html.haml
index 949908b09a7..93bc054754e 100644
--- a/app/views/admin/application_settings/integrations.html.haml
+++ b/app/views/admin/application_settings/integrations.html.haml
@@ -13,8 +13,8 @@
     .gl-alert-actions
       = link_to s_('AdminSettings|Go to General Settings'), general_admin_application_settings_path, class: 'btn gl-alert-action btn-info gl-button'
 
-%h4= s_('AdminSettings|Apply integration settings to all Projects')
-%p
-  = s_('AdminSettings|Integrations configured here will automatically apply to all projects on this instance.')
-  = link_to _('Learn more'), integrations_help_page_path, target: '_blank', rel: 'noopener noreferrer'
+%h3= s_('Integrations|Project integration management')
+
+- integrations_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: integrations_help_page_path }
+%p= s_('Integrations|As a GitLab administrator, you can set default configuration parameters for a given integration that all projects can inherit and use. When you set these parameters, your changes update the integration for all projects that are not already using custom settings. Learn more about %{integrations_link_start}Project 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/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 21908c08690..9a4bb9b0a48 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -1,5 +1,5 @@
 .broadcast-message.broadcast-banner-message.gl-alert-warning.js-broadcast-banner-message-preview.gl-mt-3{ style: broadcast_message_style(@broadcast_message), class: ('gl-display-none' unless @broadcast_message.banner? ) }
-  = sprite_icon('bullhorn', css_class:'vertical-align-text-top')
+  = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
   .js-broadcast-message-preview
     - if @broadcast_message.message.present?
       = render_broadcast_message(@broadcast_message)
@@ -7,7 +7,7 @@
       Your message here
 .d-flex.justify-content-center
   .broadcast-message.broadcast-notification-message.preview.js-broadcast-notification-message-preview.mt-2{ class: ('hidden' unless @broadcast_message.notification? ) }
-    = sprite_icon('bullhorn', css_class:'vertical-align-text-top')
+    = sprite_icon('bullhorn', css_class: 'vertical-align-text-top')
     .js-broadcast-message-preview
       - if @broadcast_message.message.present?
         = render_broadcast_message(@broadcast_message)
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index a14d342bc14..9dce33bf037 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -2,10 +2,9 @@
 - page_title _("Broadcast Messages")
 
 %h3.page-title
-  Broadcast Messages
+  = _('Broadcast Messages')
 %p.light
-  Broadcast messages are displayed for every user and can be used to notify
-  users about scheduled maintenance, recent upgrades and more.
+  = _('Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.')
 
 = render 'form'
 
@@ -15,12 +14,12 @@
   %table.table.table-responsive
     %thead
       %tr
-        %th Status
-        %th Preview
-        %th Starts
-        %th Ends
-        %th Target Path
-        %th Type
+        %th= _('Status')
+        %th= _('Preview')
+        %th= _('Starts')
+        %th= _('Ends')
+        %th= _(' Target Path')
+        %th= _(' Type')
         %th &nbsp;
     %tbody
       - @broadcast_messages.each do |message|
@@ -38,7 +37,7 @@
           %td
             = message.broadcast_type.capitalize
           %td.gl-white-space-nowrap.gl-display-flex
-            = link_to sprite_icon('pencil-square', css_class: 'gl-icon'), edit_admin_broadcast_message_path(message), title: 'Edit', class: 'btn btn-icon gl-button'
-            = link_to sprite_icon('remove', css_class: 'gl-icon'), admin_broadcast_message_path(message), method: :delete, remote: true, title: 'Remove', class: 'js-remove-tr btn btn-icon gl-button btn-danger ml-2'
+            = link_to sprite_icon('pencil-square', css_class: 'gl-icon'), edit_admin_broadcast_message_path(message), title: _('Edit'), class: 'btn btn-icon gl-button'
+            = link_to sprite_icon('remove', css_class: 'gl-icon'), admin_broadcast_message_path(message), method: :delete, remote: true, title: _('Remove'), class: 'js-remove-tr btn btn-icon gl-button btn-danger ml-2'
 
   = paginate @broadcast_messages, theme: 'gitlab'
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index f16158d5656..e34808665bb 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -101,7 +101,7 @@
             enabled: Gitlab.config.registry.enabled,
             doc_href: help_page_path('user/packages/container_registry/index'))
 
-          = feature_entry(_('Gitlab Pages'),
+          = feature_entry(_('GitLab Pages'),
             enabled: Gitlab.config.pages.enabled,
             doc_href: help_instance_configuration_url)
 
@@ -119,8 +119,7 @@
           %p
             = link_to _('GitLab'), general_admin_application_settings_path
             %span.float-right
-              = Gitlab::VERSION
-              = "(#{Gitlab.revision})"
+              = link_to_version
           %p
             = _('GitLab Shell')
             %span.float-right
@@ -165,27 +164,30 @@
         .gl-card-body
           %h4= s_('AdminArea|Latest projects')
           - @projects.each do |project|
-            %p
-              = link_to project.full_name, admin_project_path(project), class: 'str-truncated-60'
-              %span.light.float-right
+            .gl-display-flex.gl-py-3
+              .gl-mr-auto.gl-overflow-hidden.gl-text-overflow-ellipsis
+                = link_to project.full_name, admin_project_path(project)
+              %span.gl-white-space-nowrap.gl-text-right
                 #{time_ago_with_tooltip(project.created_at)}
     .col-md-4.gl-mb-6
       .gl-card
         .gl-card-body
           %h4= s_('AdminArea|Latest users')
           - @users.each do |user|
-            %p
-              = link_to [:admin, user], class: 'str-truncated-60' do
-                = user.name
-              %span.light.float-right
+            .gl-display-flex.gl-py-3
+              .gl-mr-auto.gl-overflow-hidden.gl-text-overflow-ellipsis
+                = link_to [:admin, user] do
+                  = user.name
+              %span.gl-white-space-nowrap.gl-text-right
                 #{time_ago_with_tooltip(user.created_at)}
     .col-md-4.gl-mb-6
       .gl-card
         .gl-card-body
           %h4= s_('AdminArea|Latest groups')
           - @groups.each do |group|
-            %p
-              = link_to [:admin, group], class: 'str-truncated-60' do
-                = group.full_name
-              %span.light.float-right
+            .gl-display-flex.gl-py-3
+              .gl-mr-auto.gl-overflow-hidden.gl-text-overflow-ellipsis
+                = link_to [:admin, group] do
+                  = group.full_name
+              %span.gl-white-space-nowrap.gl-text-right
                 #{time_ago_with_tooltip(group.created_at)}
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index dc49db6557b..0eaf7b60b25 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -1,5 +1,5 @@
 - page_title _('New Deploy Key')
-%h3.page-title New public deploy key
+%h3.page-title= _('New public deploy key')
 %hr
 
 %div
diff --git a/app/views/admin/dev_ops_report/_callout.html.haml b/app/views/admin/dev_ops_report/_callout.html.haml
index 7507f433af8..f313865478d 100644
--- a/app/views/admin/dev_ops_report/_callout.html.haml
+++ b/app/views/admin/dev_ops_report/_callout.html.haml
@@ -1,7 +1,7 @@
 .gl-mt-3
 .user-callout{ data: { uid: 'dev_ops_report_intro_callout_dismissed' } }
   .bordered-box.landing.content-block
-    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+    %button.gl-button.btn.btn-default-tertiary.close.js-close-callout{ type: 'button',
       'aria-label' => _('Dismiss DevOps Report introduction') }
       = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
     .user-callout-copy
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 15306ab7878..84a9b988d22 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -3,6 +3,8 @@
   = render 'shared/group_form', f: f
   = render 'shared/group_form_description', f: f
 
+  = render 'shared/admin/admin_note_form', f: f
+
   = render_if_exists 'shared/old_repository_size_limit_setting', form: f, type: :group
   = render_if_exists 'admin/namespace_plan', f: f
 
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index f8c490dd948..5f8ec5086bd 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -62,6 +62,7 @@
             = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
 
         = render_if_exists 'namespaces/shared_runner_status', namespace: @group
+        = render_if_exists 'namespaces/additional_minutes_status', namespace: @group
 
     = render 'shared/custom_attributes', custom_attributes: @group.custom_attributes
 
@@ -103,6 +104,8 @@
                 %span.monospace= project.full_path + '.git'
 
   .col-md-6
+    = render 'shared/admin/admin_note'
+
     - if can?(current_user, :admin_group_member, @group)
       .card
         .card-header
@@ -124,7 +127,7 @@
     .card
       .card-header
         = html_escape(_("%{group_name} group members")) % { group_name: "<strong>#{html_escape(@group.name)}</strong>".html_safe }
-        %span.badge.badge-pill= @group.members.size
+        %span.badge.badge-pill= @group.users_count
         .float-right
           = link_to group_group_members_path(@group), class: 'btn btn-default gl-button btn-sm' do
             = sprite_icon('pencil-square', css_class: 'gl-icon')
diff --git a/app/views/admin/hook_logs/_index.html.haml b/app/views/admin/hook_logs/_index.html.haml
index 5e70e80cff7..61af7535c1e 100644
--- a/app/views/admin/hook_logs/_index.html.haml
+++ b/app/views/admin/hook_logs/_index.html.haml
@@ -1,18 +1,18 @@
 .row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
-      Recent Deliveries
-    %p When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.
+      = _('Recent Deliveries')
+    %p= _('When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.')
   .col-lg-9
     - if hook_logs.any?
       %table.table
         %thead
           %tr
-            %th Status
-            %th Trigger
-            %th URL
-            %th Elapsed time
-            %th Request time
+            %th= _('Status')
+            %th= _('Trigger')
+            %th= _('URL')
+            %th= _('Elapsed time')
+            %th= _('Request time')
             %th
         - hook_logs.each do |hook_log|
           %tr
@@ -28,10 +28,10 @@
             %td.light
               = time_ago_with_tooltip(hook_log.created_at)
             %td
-              = link_to 'View details', admin_hook_hook_log_path(hook, hook_log)
+              = link_to _('View details'), admin_hook_hook_log_path(hook, hook_log)
 
       = paginate hook_logs, theme: 'gitlab'
 
     - else
       .settings-message.text-center
-        You don't have any webhooks deliveries
+        = _("You don't have any webhooks deliveries")
diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml
index b31b9bdab0a..a357c3d9d34 100644
--- a/app/views/admin/labels/_label.html.haml
+++ b/app/views/admin/labels/_label.html.haml
@@ -1,7 +1,7 @@
 %li.label-list-item{ id: dom_id(label) }
   = render "shared/label_row", label: label.present(issuable_subject: nil)
   .label-actions-list
-    = link_to edit_admin_label_path(label), class: 'btn gl-button btn-transparent label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
+    = link_to edit_admin_label_path(label), class: 'btn btn-default gl-button btn-default-tertiary label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
       = sprite_icon('pencil')
-    = link_to admin_label_path(label), class: 'btn gl-button btn-transparent remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
+    = link_to admin_label_path(label), class: 'btn btn-default gl-button btn-default-tertiary hover-red js-remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
       = sprite_icon('remove')
diff --git a/app/views/admin/labels/index.html.haml b/app/views/admin/labels/index.html.haml
index 6861a802a63..6007d891aad 100644
--- a/app/views/admin/labels/index.html.haml
+++ b/app/views/admin/labels/index.html.haml
@@ -7,7 +7,7 @@
     = _('Labels')
 %hr
 
-.labels.labels-container.admin-labels
+.labels.labels-container.admin-labels.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
   - if @labels.present?
     %ul.manage-labels-list
       = render @labels
diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml
index c2e40413a14..7e505729213 100644
--- a/app/views/admin/projects/_projects.html.haml
+++ b/app/views/admin/projects/_projects.html.haml
@@ -4,7 +4,7 @@
       - @projects.each_with_index do |project|
         %li.project-row{ class: ('no-description' if project.description.blank?) }
           .controls
-            = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn gl-button btn-default"
+            = link_to _('Edit'), edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn gl-button btn-default"
             %button.delete-project-button.gl-button.btn.btn-danger{ data: { delete_project_url: admin_project_path(project), project_name: project.name } }
               = s_('AdminProjects|Delete')
 
@@ -31,6 +31,6 @@
 
     = paginate @projects, theme: 'gitlab'
   - else
-    .nothing-here-block No projects found
+    .nothing-here-block= _('No projects found')
 
   #delete-project-modal
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index 50f3c94bcb3..79d77790b02 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -18,20 +18,20 @@
     .search-holder
       = render 'shared/projects/search_form', autofocus: true, admin_view: true
       .dropdown
-        - toggle_text = 'Namespace'
+        - toggle_text = _('Namespace')
         - if params[:namespace_id].present?
           = hidden_field_tag :namespace_id, params[:namespace_id]
           - namespace = Namespace.find(params[:namespace_id])
           - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
         = dropdown_toggle(toggle_text, { toggle: 'dropdown', is_filter: 'true' }, { toggle_class: 'js-namespace-select large' })
         .dropdown-menu.dropdown-select.dropdown-menu-right
-          = dropdown_title('Namespaces')
-          = dropdown_filter("Search for Namespace")
+          = dropdown_title(_('Namespaces'))
+          = dropdown_filter(_("Search for Namespace"))
           = dropdown_content
           = dropdown_loading
       = render 'shared/projects/dropdown'
       = link_to new_project_path, class: 'gl-button btn btn-confirm' do
-        New Project
-      = button_tag "Search", class: "gl-button btn btn-confirm btn-search hide"
+        = _('New Project')
+      = button_tag _("Search"), class: "gl-button btn btn-confirm btn-search hide"
 
 = render 'projects'
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index 0d819dc5b47..c3e4626c14e 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,27 +1,28 @@
+-# Note: This file should stay aligned with:
+-# `app/views/groups/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
     .table-mobile-content
       - if runner.instance_type?
-        %span.badge.badge-success shared
+        %span.badge.badge-pill.gl-badge.sm.badge-success= _("shared")
       - elsif runner.group_type?
-        %span.badge.badge-success group
+        %span.badge.badge-pill.gl-badge.sm.badge-success= _("group")
       - else
-        %span.badge.badge-info specific
+        %span.badge.badge-pill.gl-badge.sm.badge-info= _("specific")
       - if runner.locked?
-        %span.badge.badge-warning locked
+        %span.badge.badge-pill.gl-badge.sm.badge-warning= _("locked")
       - unless runner.active?
-        %span.badge.badge-danger paused
+        %span.badge.badge-pill.gl-badge.sm.badge-danger= _("paused")
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, admin_runner_path(runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
-      = runner.description
+      = link_to("##{runner.id} (#{runner.short_sha})", admin_runner_path(runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
+          = runner.description
 
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }= _('Version')
@@ -65,15 +66,15 @@
   .table-section.table-button-footer.section-10
     .btn-group.table-action-buttons
       .btn-group
-        = link_to admin_runner_path(runner), class: 'gl-button btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
-          = sprite_icon('pencil')
+        = link_to admin_runner_path(runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = sprite_icon('pencil', css_class: 'gl-icon')
       .btn-group
         - if runner.active?
-          = link_to [:pause, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-svg has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('pause')
+          = link_to [:pause, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('pause', css_class: 'gl-icon')
         - else
-          = link_to [:resume, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-svg has-tooltip gl-px-3', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
-            = sprite_icon('play')
+          = link_to [:resume, :admin, runner], method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip gl-px-3', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = sprite_icon('play', css_class: 'gl-icon')
       .btn-group
-        = link_to [:admin, runner], method: :delete, class: 'gl-button btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-          = sprite_icon('close')
+        = link_to [:admin, runner], method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+          = sprite_icon('close', css_class: 'gl-icon')
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 8e62dae6c4d..a38615d9b1b 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -50,7 +50,7 @@
         .filtered-search-box
           = dropdown_tag(_('Recent searches'),
             options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-            toggle_class: 'btn filtered-search-history-dropdown-toggle-button',
+            toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
             dropdown_class: 'filtered-search-history-dropdown',
             content_class: 'filtered-search-history-dropdown-content' }) do
             .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
@@ -72,7 +72,7 @@
             #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
               %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                 %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                  %button.btn.btn-link{ type: 'button' }
+                  %button.gl-button.btn.btn-link{ type: 'button' }
                     {{ title }}
                     %span.btn-helptext
                       {{ help }}
@@ -100,12 +100,12 @@
           #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
             %ul{ data: { dropdown: true } }
               %li.filter-dropdown-item{ data: { value: 'none' } }
-                %button.btn.btn-link
+                %button.gl-button.btn.btn-link
                   = _('No Tag')
               %li.divider.droplab-item-ignore
             %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
-                %button.btn.btn-link.js-data-value
+                %button.gl-button.btn.btn-link.js-data-value
                   %span.dropdown-light-content
                     {{name}}
 
@@ -118,12 +118,11 @@
     = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
 
 - if @runners.any?
-  .runners-content.content-list
+  .content-list{ data: { testid: 'runners-table' } }
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index aca50de3852..705716c09b7 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -1,34 +1,17 @@
 - add_page_specific_style 'page_bundles/ci_status'
 
-= content_for :title do
-  %h3.project-title
-    Runner ##{@runner.id}
-    .float-right
-      - if @runner.instance_type?
-        %span.runner-state.runner-state-shared
-          Shared
-      - else
-        %span.runner-state.runner-state-specific
-          Specific
-
 - page_title @runner.short_sha
-- add_to_breadcrumbs _("Runners"), admin_runners_path
-- breadcrumb_title "##{@runner.id}"
+- add_to_breadcrumbs _('Runners'), admin_runners_path
+- breadcrumb_title page_title
 
-- if @runner.instance_type?
-  .bs-callout.bs-callout-success
-    %h4= _('This runner processes jobs for all unassigned projects.')
-    %p
-      = _('If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner.')
-- elsif @runner.group_type?
-  .bs-callout.bs-callout-success
-    %h4= _('This runner processes jobs for all projects in its group and subgroups.')
+- if Feature.enabled?(:runner_detailed_view_vue_ui, current_user, default_enabled: :yaml)
+  #js-runner-detail{ data: {runner_id: @runner.id} }
 - else
-  .bs-callout.bs-callout-info
-    %h4= _('This runner processes jobs for assigned projects only.')
-    %p
-      = _('You cannot make this a shared runner.')
-%hr
+  %h2.page-title
+    = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+    = render 'shared/runners/runner_type_badge', runner: @runner
+
+= render 'shared/runners/runner_type_alert', runner: @runner
 
 .gl-mb-6
   = render 'shared/runners/form', runner: @runner, runner_form_url: admin_runner_path(@runner), in_gitlab_com_admin_context: Gitlab.com?
@@ -37,7 +20,7 @@
   .col-md-6
     %h4= _('Restrict projects for this runner')
     - if @runner.projects.any?
-      %table.table.assigned-projects
+      %table.table{ data: { testid: 'assigned-projects' } }
         %thead
           %tr
             %th= _('Assigned projects')
@@ -54,7 +37,7 @@
                   .gl-alert-actions
                     = link_to s_('Disable'), admin_namespace_project_runner_project_path(project.namespace, project, runner_project), method: :delete, class: 'btn gl-alert-action btn-info btn-md gl-button'
 
-    %table.table.unassigned-projects
+    %table.table{ data: { testid: 'unassigned-projects' } }
       %thead
         %tr
           %th= _('Project')
diff --git a/app/views/admin/serverless/domains/index.html.haml b/app/views/admin/serverless/domains/index.html.haml
index bd3c6bc6e04..c2b6baed4de 100644
--- a/app/views/admin/serverless/domains/index.html.haml
+++ b/app/views/admin/serverless/domains/index.html.haml
@@ -10,7 +10,7 @@
   .settings-header
     %h4
       = _('Serverless domain')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _('Set an instance-wide domain that will be available to all clusters when installing Knative.')
diff --git a/app/views/admin/services/_form.html.haml b/app/views/admin/services/_form.html.haml
index c17ab5e08a7..4d9fa6d3d57 100644
--- a/app/views/admin/services/_form.html.haml
+++ b/app/views/admin/services/_form.html.haml
@@ -1,7 +1,9 @@
+= render "service_templates_deprecated_alert"
+
 %h3.page-title
   = @service.title
 
-%p #{@service.description} template.
+%p= @service.description
 
 = form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'fieldset-form js-integration-settings-form' } do |form|
   = render 'shared/service_settings', form: form, integration: @service
diff --git a/app/views/admin/services/_service_templates_deprecated_alert.html.haml b/app/views/admin/services/_service_templates_deprecated_alert.html.haml
new file mode 100644
index 00000000000..0cc44099049
--- /dev/null
+++ b/app/views/admin/services/_service_templates_deprecated_alert.html.haml
@@ -0,0 +1,8 @@
+- doc_link_start = "<a href=\"#{integrations_help_page_path}\" target='_blank' rel='noopener noreferrer'>".html_safe
+- settings_link_start = "<a href=\"#{integrations_admin_application_settings_path}\">".html_safe
+
+.gl-alert.gl-alert-danger.gl-mt-5{ role: 'alert' }
+  = sprite_icon('error', css_class: 'gl-alert-icon gl-alert-icon-no-title')
+  %h4.gl-alert-title= s_('AdminSettings|Service templates are deprecated and will be removed in GitLab 14.0.')
+  .gl-alert-body
+    = html_escape_once(s_("AdminSettings|You can't add new templates. To migrate or remove a Service template, create a new integration at %{settings_link_start}Settings &gt; Integrations%{link_end}. Learn more about %{doc_link_start}Project integration management%{link_end}.")).html_safe % { settings_link_start: settings_link_start, doc_link_start: doc_link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/admin/services/index.html.haml b/app/views/admin/services/index.html.haml
index 3517beac976..91706452402 100644
--- a/app/views/admin/services/index.html.haml
+++ b/app/views/admin/services/index.html.haml
@@ -1,23 +1,13 @@
 - page_title _("Service Templates")
 - @content_class = 'limit-container-width' unless fluid_layout
 
-- if show_service_templates_deprecated?
-  .gl-alert.gl-alert-tip.js-service-templates-deprecated.gl-mt-5{ role: 'alert', data: { feature_id: UserCalloutsHelper::SERVICE_TEMPLATES_DEPRECATED, dismiss_endpoint: user_callouts_path } }
-    = sprite_icon('bulb', css_class: 'gl-alert-icon gl-alert-icon-no-title')
-    %button.js-close.gl-alert-dismiss{ type: 'button', aria: { label: _('Dismiss') } }
-      = sprite_icon('close')
-    %h4.gl-alert-title= s_('AdminSettings|Service Templates will soon be deprecated.')
-    .gl-alert-body
-      = s_('AdminSettings|Try using the latest version of Integrations instead.')
-    .gl-alert-actions
-      = link_to _('Go to Integrations'), integrations_admin_application_settings_path, class: 'btn btn-info gl-alert-action gl-button'
-      = link_to _('Learn more'), help_page_path('user/admin_area/settings/project_integration_management'), class: 'btn btn-default gl-alert-action btn-secondary gl-button', target: '_blank', rel: 'noopener noreferrer'
+= render "service_templates_deprecated_alert"
 
-%h3.page-title Service templates
-%p.light= s_('AdminSettings|Service template allows you to set default values for integrations')
+- if @activated_services.any?
+  %h3.page-title Service templates
+  %p= s_('AdminSettings|Service template allows you to set default values for integrations')
 
-.table-holder
-  %table.table
+  %table.table.b-table.gl-table
     %colgroup
       %col
       %col
@@ -26,10 +16,10 @@
     %thead
       %tr
         %th
-        %th Service
-        %th Description
-        %th Last edit
-    - @services.each do |service|
+        %th= _('Service')
+        %th= _('Description')
+        %th= _('Last edit')
+    - @activated_services.each do |service|
       - if service.type.in?(@existing_instance_types)
         %tr
           %td
diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml
index 2e7114ddab4..2bfe905fb9d 100644
--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -6,9 +6,9 @@
     - if user
       = link_to user.name, [:admin, user]
       .light.small
-        Joined #{time_ago_with_tooltip(user.created_at)}
+        = _('Joined %{user_created_time}').html_safe % { user_created_time: time_ago_with_tooltip(user.created_at) }
     - else
-      (removed)
+      = _('(removed)')
   %td
     = spam_log.source_ip
   %td
@@ -23,17 +23,17 @@
     = truncate(spam_log.description, length: 100)
   %td
     - if user
-      = link_to 'Remove user', admin_spam_log_path(spam_log, remove_user: true),
-        data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "gl-button btn btn-sm btn-danger"
+      = link_to _('Remove user'), admin_spam_log_path(spam_log, remove_user: true),
+        data: { confirm: _("USER %{user_name} WILL BE REMOVED! Are you sure?") % { user_name: user.name } }, method: :delete, class: "gl-button btn btn-sm btn-danger"
   %td
     - if spam_log.submitted_as_ham?
-      .btn.btn-sm.disabled
-        Submitted as ham
+      .gl-button.btn.btn-default.btn-sm.disabled.gl-mb-3
+        = _("Submitted as ham")
     - else
-      = link_to 'Submit as ham', mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'gl-button btn btn-sm btn-warning'
+      = link_to _('Submit as ham'), mark_as_ham_admin_spam_log_path(spam_log), method: :post, class: 'gl-button btn btn-default btn-sm gl-mb-3'
     - if user && !user.blocked?
-      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "gl-button btn btn-sm"
+      = link_to _('Block user'), block_admin_user_path(user), data: {confirm: _('USER WILL BE BLOCKED! Are you sure?')}, method: :put, class: "gl-button btn btn-default btn-sm gl-mb-3"
     - else
-      .btn.btn-sm.disabled
+      .gl-button.btn.btn-default.btn-sm.disabled.gl-mb-3
         Already blocked
-    = link_to 'Remove log', [:admin, spam_log], remote: true, method: :delete, class: "gl-button btn btn-sm btn-close js-remove-tr"
+    = link_to _('Remove log'), [:admin, spam_log], remote: true, method: :delete, class: "gl-button btn btn-default btn-sm btn-close js-remove-tr"
diff --git a/app/views/admin/users/_admin_notes.html.haml b/app/views/admin/users/_admin_notes.html.haml
index a20b2fbffc4..7c3220e2cee 100644
--- a/app/views/admin/users/_admin_notes.html.haml
+++ b/app/views/admin/users/_admin_notes.html.haml
@@ -2,6 +2,6 @@
   %legend= _('Admin notes')
   .form-group.row
     .col-sm-2.col-form-label
-      = f.label :note, s_('AdminNote|Note')
+      = f.label :note, s_('Admin|Note')
     .col-sm-10
       = f.text_area :note, class: 'form-control gl-form-input gl-form-textarea'
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index 8a4a1a54c58..ade3581e5b9 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -20,20 +20,20 @@
 
   .float-right
     - if impersonation_enabled? && @user != current_user && @user.can?(:log_in)
-      = link_to 'Impersonate', impersonate_admin_user_path(@user), method: :post, class: "btn btn-info gl-button btn-grouped", data: { qa_selector: 'impersonate_user_link' }
+      = link_to _('Impersonate'), impersonate_admin_user_path(@user), method: :post, class: "btn btn-info gl-button btn-grouped", data: { qa_selector: 'impersonate_user_link' }
     = link_to edit_admin_user_path(@user), class: "btn btn-default gl-button btn-grouped" do
-      = sprite_icon('pencil-square', css_class: 'gl-icon')
+      = sprite_icon('pencil-square', css_class: 'gl-icon gl-button-icon')
       = _('Edit')
 %hr
 %ul.nav-links.nav.nav-tabs
   = nav_link(path: 'users#show') do
-    = link_to "Account", admin_user_path(@user)
+    = link_to _("Account"), admin_user_path(@user)
   = nav_link(path: 'users#projects') do
-    = link_to "Groups and projects", projects_admin_user_path(@user)
+    = link_to _("Groups and projects"), projects_admin_user_path(@user)
   = nav_link(path: 'users#keys') do
-    = link_to "SSH keys", keys_admin_user_path(@user)
+    = link_to _("SSH keys"), keys_admin_user_path(@user)
   = nav_link(controller: :identities) do
-    = link_to "Identities", admin_user_identities_path(@user)
+    = link_to _("Identities"), admin_user_identities_path(@user)
   = nav_link(controller: :impersonation_tokens) do
-    = link_to "Impersonation Tokens", admin_user_impersonation_tokens_path(@user)
+    = link_to _("Impersonation Tokens"), admin_user_impersonation_tokens_path(@user)
 .gl-mb-3
diff --git a/app/views/admin/users/_user.html.haml b/app/views/admin/users/_user.html.haml
index 224a3cea28d..f2920579057 100644
--- a/app/views/admin/users/_user.html.haml
+++ b/app/views/admin/users/_user.html.haml
@@ -39,18 +39,18 @@
                     = link_to s_('AdminUsers|Approve'), approve_admin_user_path(user), method: :put
                     = link_to s_('AdminUsers|Reject'), reject_admin_user_path(user), method: :delete
                   - else
-                    %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_unblock_data(user) }
+                    %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_unblock_data(user) }
                       = s_('AdminUsers|Unblock')
                 - else
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_block_data(user, user_block_effects) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_block_data(user, user_block_effects) }
                     = s_('AdminUsers|Block')
               - if user.can_be_deactivated?
                 %li
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_deactivation_data(user, user_deactivation_effects) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_deactivation_data(user, user_deactivation_effects) }
                     = s_('AdminUsers|Deactivate')
               - elsif user.deactivated?
                 %li
-                  %button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_activation_data(user) }
+                  %button.gl-button.btn.btn-default-tertiary.js-confirm-modal-button{ data: user_activation_data(user) }
                     = s_('AdminUsers|Activate')
               - if user.access_locked?
                 %li
@@ -59,13 +59,13 @@
               %li.divider
               - if user.can_be_removed?
                 %li
-                  %button.js-delete-user-modal-button.btn.btn-default-tertiary.text-danger{ data: { 'gl-modal-action': 'delete',
+                  %button.js-delete-user-modal-button.gl-button.btn.btn-danger-tertiary{ data: { 'gl-modal-action': 'delete',
                     delete_user_url: admin_user_path(user),
                     block_user_url: block_admin_user_path(user),
                     username: sanitize_name(user.name) } }
                     = s_('AdminUsers|Delete user')
                 %li
-                  %button.js-delete-user-modal-button.btn.btn-default-tertiary.text-danger{ data: { 'gl-modal-action': 'delete-with-contributions',
+                  %button.js-delete-user-modal-button.gl-button.btn.btn-danger-tertiary{ data: { 'gl-modal-action': 'delete-with-contributions',
                     delete_user_url: admin_user_path(user, hard_delete: true),
                     block_user_url: block_admin_user_path(user),
                     username: sanitize_name(user.name) } }
diff --git a/app/views/authentication/_authenticate.html.haml b/app/views/authentication/_authenticate.html.haml
index 2d8948ae9aa..5a2ae3f44c2 100644
--- a/app/views/authentication/_authenticate.html.haml
+++ b/app/views/authentication/_authenticate.html.haml
@@ -1,5 +1,5 @@
 #js-authenticate-token-2fa
-%a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' }= _("Sign in via 2FA code")
+%a.gl-button.btn.btn-block.btn-confirm#js-login-2fa-device{ href: '#' }= _("Sign in via 2FA code")
 
 %script#js-authenticate-token-2fa-in-progress{ type: "text/template" }
   %p= _("Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.")
@@ -7,7 +7,7 @@
 %script#js-authenticate-token-2fa-error{ type: "text/template" }
   %div
     %p <%= error_message %> (<%= error_name %>)
-    %a.btn.gl-button.btn-block.btn-warning#js-token-2fa-try-again= _("Try again?")
+    %a.btn.btn-default.gl-button.btn-block#js-token-2fa-try-again= _("Try again?")
 
 %script#js-authenticate-token-2fa-authenticated{ type: "text/template" }
   %div
diff --git a/app/views/authentication/_register.html.haml b/app/views/authentication/_register.html.haml
index d250cddf0f8..678fd3c8e8c 100644
--- a/app/views/authentication/_register.html.haml
+++ b/app/views/authentication/_register.html.haml
@@ -21,7 +21,7 @@
   %div
     %p
       %span <%= error_message %> (<%= error_name %>)
-    %a.btn.gl-button.btn-warning#js-token-2fa-try-again= _("Try again?")
+    %a.btn.btn-default.gl-button#js-token-2fa-try-again= _("Try again?")
 
 %script#js-register-token-2fa-registered{ type: "text/template" }
   .row.gl-mb-3
@@ -33,4 +33,4 @@
             = text_field_tag 'device_registration[name]', nil, class: 'form-control', placeholder: _("Pick a name")
           .col-md-3
             = hidden_field_tag 'device_registration[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
-            = submit_tag _("Register device"), class: "btn btn-success"
+            = submit_tag _("Register device"), class: "gl-button btn btn-confirm"
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index a063fe54c99..3b91bcdd990 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,19 +1,26 @@
-- grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
-.awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
-  - awards_sort(grouped_emojis).each do |emoji, awards|
-    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
-      class: [(award_state_class(awardable, awards, current_user))],
-      data: { title: award_user_list(awards, current_user) } }
-      = emoji_icon(emoji)
-      %span.award-control-text.js-counter
-        = awards.count
+- api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
-  - if can?(current_user, :award_emoji, awardable)
-    .award-menu-holder.js-award-holder
-      %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
-        'aria-label': _('Add reaction'),
-        data: { title: _('Add reaction') } }
-        %span{ class: "award-control-icon award-control-icon-neutral" }= sprite_icon('slight-smile')
-        %span{ class: "award-control-icon award-control-icon-positive" }= sprite_icon('smiley')
-        %span{ class: "award-control-icon award-control-icon-super-positive" }= sprite_icon('smile')
-  = yield
+- if api_awards_path
+  .gl-display-flex.gl-flex-wrap
+    #js-vue-awards-block{ data: { path: api_awards_path, can_award_emoji: can?(current_user, :award_emoji, awardable).to_s } }
+    = yield
+- else
+  - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
+  .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
+    - awards_sort(grouped_emojis).each do |emoji, awards|
+      %button.gl-button.btn.btn-default.award-control.js-emoji-btn.has-tooltip{ type: "button",
+        class: [award_state_class(awardable, awards, current_user)],
+        data: { title: award_user_list(awards, current_user) } }
+        = emoji_icon(emoji)
+        %span.award-control-text.js-counter
+          = awards.count
+
+    - if can?(current_user, :award_emoji, awardable)
+      .award-menu-holder.js-award-holder
+        %button.gl-button.btn.btn-default.award-control.has-tooltip.js-add-award{ type: 'button',
+          'aria-label': _('Add reaction'),
+          data: { title: _('Add reaction') } }
+          %span{ class: "award-control-icon award-control-icon-neutral" }= sprite_icon('slight-smile')
+          %span{ class: "award-control-icon award-control-icon-positive" }= sprite_icon('smiley')
+          %span{ class: "award-control-icon award-control-icon-super-positive" }= sprite_icon('smile')
+    = yield
diff --git a/app/views/ci/group_variables/_index.html.haml b/app/views/ci/group_variables/_index.html.haml
index a74dbe793a6..eb49a9a0261 100644
--- a/app/views/ci/group_variables/_index.html.haml
+++ b/app/views/ci/group_variables/_index.html.haml
@@ -8,5 +8,7 @@
         %td.gl-text-truncate
           = variable.key
         %td.gl-text-truncate
+          = variable.environment_scope
+        %td.gl-text-truncate
           %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
             = variable.group.name
diff --git a/app/views/ci/group_variables/_variable_header.html.haml b/app/views/ci/group_variables/_variable_header.html.haml
index ec512ab37e7..75a432e7f7c 100644
--- a/app/views/ci/group_variables/_variable_header.html.haml
+++ b/app/views/ci/group_variables/_variable_header.html.haml
@@ -2,4 +2,6 @@
   %th
     = s_('Key')
   %th
+    = s_('Environments')
+  %th
     = s_('Group')
diff --git a/app/views/ci/runner/_how_to_setup_runner.html.haml b/app/views/ci/runner/_how_to_setup_runner.html.haml
index 6c2e4c69d83..03a3c9b0de8 100644
--- a/app/views/ci/runner/_how_to_setup_runner.html.haml
+++ b/app/views/ci/runner/_how_to_setup_runner.html.haml
@@ -22,4 +22,4 @@
 method: :put, class: 'gl-button btn btn-default',
 data: { confirm: _("Are you sure you want to reset the registration token?") }
 
-#js-install-runner{ data: { project_path: project_path, group_path: group_path } }
+#js-install-runner
diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml
deleted file mode 100644
index 5e9b02b5fe2..00000000000
--- a/app/views/ci/status/_dropdown_graph_badge.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
--# Renders the content of each li in the dropdown
-
-- subject = local_assigns.fetch(:subject)
-- status = subject.detailed_status(current_user)
-- klass = "ci-status-icon ci-status-icon-#{status.group}"
-- tooltip = "#{subject.name} - #{status.status_tooltip}"
-
-- if status.has_details?
-  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item d-flex', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
-    %span{ class: klass }= sprite_icon(status.icon)
-    %span.gl-text-truncate.mw-70p.gl-pl-2= subject.name
-
-- else
-  .menu-item.mini-pipeline-graph-dropdown-item.d-flex{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
-    %span{ class: klass }= sprite_icon(status.icon)
-    %span.gl-text-truncate.mw-70p.gl-pl-2= subject.name
-
-- if status.has_action?
-  = link_to status.action_path, class: "gl-button ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do
-    = sprite_icon(status.action_icon, css_class: "icon-action-#{status.action_icon}")
diff --git a/app/views/ci/variables/_content.html.haml b/app/views/ci/variables/_content.html.haml
index fd4b546e150..5eded970bf0 100644
--- a/app/views/ci/variables/_content.html.haml
+++ b/app/views/ci/variables/_content.html.haml
@@ -7,4 +7,4 @@
     = html_escape(_('%{code_open}Protected:%{code_close} Only exposed to protected branches or tags.')) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
   %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/README', anchor: 'masked-variable-requirements'), target: '_blank', rel: 'noopener noreferrer'
+    = link_to _('Learn more.'), help_page_path('ci/variables/README', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index fc0e3488e57..f5d28adfa66 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -2,7 +2,7 @@
 
 - if ci_variable_protected_by_default?
   %p.settings-message.text-center
-    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protect-a-custom-variable') }
+    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protect-a-cicd-variable') }
     = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
 - is_group = !@group.nil?
@@ -16,8 +16,8 @@
   aws_tip_deploy_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'deploy-your-application-to-the-aws-elastic-container-service-ecs'),
   aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'run-aws-commands-from-gitlab-cicd'),
   aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'aws'),
-  protected_environment_variables_link: help_page_path('ci/variables/README', anchor: 'protect-a-custom-variable'),
-  masked_environment_variables_link: help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'),
+  protected_environment_variables_link: help_page_path('ci/variables/README', anchor: 'protect-a-cicd-variable'),
+  masked_environment_variables_link: help_page_path('ci/variables/README', anchor: 'mask-a-cicd-variable'),
 } }
 
 - if !@group && @project.group
diff --git a/app/views/ci/variables/_url_query_variable_row.html.haml b/app/views/ci/variables/_url_query_variable_row.html.haml
index 4c6eeb17c07..9c34daf88bd 100644
--- a/app/views/ci/variables/_url_query_variable_row.html.haml
+++ b/app/views/ci/variables/_url_query_variable_row.html.haml
@@ -24,5 +24,5 @@
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }
         = value
-    %button.btn.btn-svg.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+    %button.gl-button.btn.btn-default.btn-icon.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
       = sprite_icon('close')
diff --git a/app/views/ci/variables/_variable_row.html.haml b/app/views/ci/variables/_variable_row.html.haml
index 193ec8abf04..856d03ba258 100644
--- a/app/views/ci/variables/_variable_row.html.haml
+++ b/app/views/ci/variables/_variable_row.html.haml
@@ -25,21 +25,21 @@
     %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
     %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name }
       = options_for_select(ci_variable_type_options, variable_type)
-    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.table-section.section-15{ type: "text",
+    %input.js-ci-variable-input-key.ci-variable-body-item.qa-ci-variable-input-key.form-control.gl-form-input.table-section.section-15{ type: "text",
       name: key_input_name,
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
     .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
       .form-control.js-secret-value-placeholder.qa-ci-variable-input-value.overflow-hidden{ class: ('hide' unless id) }
         = '*' * 17
-      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ class: ('hide' if id),
+      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control.gl-form-input{ class: ('hide' if id),
         rows: 1,
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }
         = value
       %p.masking-validation-error.gl-field-error.hide
         = s_("CiVariables|Cannot use Masked Variable with current value")
-        = link_to sprite_icon('question-o'), help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'), target: '_blank', rel: 'noopener noreferrer'
+        = link_to sprite_icon('question-o'), help_page_path('ci/variables/README', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
       .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
         .gl-mr-3
@@ -60,5 +60,5 @@
             value: is_masked,
             data: { default: is_masked_default.to_s } }
       = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
-    %button.btn.btn-svg.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
+    %button.gl-button.btn.btn-default.btn-icon.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
       = sprite_icon('close')
diff --git a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
index 8c23fc7c590..5df368ef3af 100644
--- a/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
+++ b/app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml
@@ -5,5 +5,5 @@
   = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
   %h4.gl-alert-title= s_('ClusterIntegration|Did you know?')
   %p.gl-alert-body= s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for both new and existing GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
-  %a.gl-button.btn-info{ href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', rel: 'noopener noreferrer' }
+  %a.gl-button.btn-confirm.text-decoration-none{ href: 'https://cloud.google.com/partners/partnercredit/?pcn_code=0014M00001h35gDQAQ#contact-form', target: '_blank', rel: 'noopener noreferrer' }
     = s_("ClusterIntegration|Apply for credit")
diff --git a/app/views/clusters/clusters/_gitlab_integration_form.html.haml b/app/views/clusters/clusters/_gitlab_integration_form.html.haml
index 87af74a398f..b6d6dcdd7a9 100644
--- a/app/views/clusters/clusters/_gitlab_integration_form.html.haml
+++ b/app/views/clusters/clusters/_gitlab_integration_form.html.haml
@@ -1,3 +1,3 @@
-= form_for @cluster, url: clusterable.cluster_path(@cluster), as: :cluster, html: { class: 'js-cluster-integration-form' } do |field|
+= form_for @cluster, url: clusterable.cluster_path(@cluster), as: :cluster, html: { class: 'js-cluster-details-form' } do |field|
   = form_errors(@cluster)
-  #js-cluster-integration-form{ data: js_cluster_form_data(@cluster, can?(current_user, :update_cluster, @cluster)) }
+  #js-cluster-details-form{ data: js_cluster_form_data(@cluster, can?(current_user, :update_cluster, @cluster)) }
diff --git a/app/views/clusters/clusters/_health.html.haml b/app/views/clusters/clusters/_health.html.haml
index 5400bd7f201..025f52d8771 100644
--- a/app/views/clusters/clusters/_health.html.haml
+++ b/app/views/clusters/clusters/_health.html.haml
@@ -3,4 +3,4 @@
     #prometheus-graphs{ data: @cluster.health_data(clusterable) }
 
   - else
-    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus in the Applications tab.")
+    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first enable Prometheus in the Integrations tab.")
diff --git a/app/views/clusters/clusters/_integrations.html.haml b/app/views/clusters/clusters/_integrations.html.haml
new file mode 100644
index 00000000000..d718e3ecb26
--- /dev/null
+++ b/app/views/clusters/clusters/_integrations.html.haml
@@ -0,0 +1,19 @@
+.settings.expanded.border-0.m-0
+  %p
+    = s_('ClusterIntegration|Integrations enable you to integrate your cluster as part of your GitLab workflow.')
+    = link_to _('Learn more'), help_page_path('user/clusters/integrations.md'), target: '_blank'
+  .settings-content#advanced-settings-section
+    - if can?(current_user, :admin_cluster, @cluster)
+      .sub-section.form-group
+        = form_for @prometheus_integration, url: @cluster.integrations_path, as: :integration, method: :post, html: { class: 'js-cluster-integrations-form' } do |form|
+          = form.hidden_field :application_type
+          .form-group
+            .gl-form-checkbox.custom-control.custom-checkbox
+              = form.check_box :enabled, { class: 'custom-control-input'}
+              = form.label :enabled, s_('ClusterIntegration|Enable Prometheus integration'), class: 'custom-control-label'
+            .gl-form-group
+              .form-text.text-gl-muted
+                - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("user/clusters/integrations", anchor: "prometheus-cluster-integration") }
+                - link_end = '</a>'.html_safe
+                = html_escape(s_('ClusterIntegration|Before you enable this integration, follow the %{link_start}documented process%{link_end}.')) % { link_start: link_start, link_end: link_end }
+          = form.submit _('Save changes'), class: 'btn gl-button btn-success'
diff --git a/app/views/clusters/clusters/_integrations_tab.html.haml b/app/views/clusters/clusters/_integrations_tab.html.haml
new file mode 100644
index 00000000000..77b8b6ca3e6
--- /dev/null
+++ b/app/views/clusters/clusters/_integrations_tab.html.haml
@@ -0,0 +1,6 @@
+- tab_name = 'integrations'
+- active = params[:tab] == tab_name
+
+%li.nav-item{ role: 'presentation' }
+  %a#cluster-apps-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: tab_name}) }
+    %span= _('Integrations')
diff --git a/app/views/clusters/clusters/aws/_new.html.haml b/app/views/clusters/clusters/aws/_new.html.haml
index 4407b27df1e..93e8b1241a8 100644
--- a/app/views/clusters/clusters/aws/_new.html.haml
+++ b/app/views/clusters/clusters/aws/_new.html.haml
@@ -12,6 +12,6 @@
     'role-arn' => @aws_role.role_arn,
     'instance-types' => @instance_types,
     'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index'),
-    'account-and-external-ids-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
-    'create-role-arn-help-path' => help_page_path('user/project/clusters/add_remove_clusters.md', anchor: 'new-eks-cluster'),
+    'account-and-external-ids-help-path' => help_page_path('user/project/clusters/add_eks_clusters.md', anchor: 'new-eks-cluster'),
+    'create-role-arn-help-path' => help_page_path('user/project/clusters/add_eks_clusters.md', anchor: 'new-eks-cluster'),
     'external-link-icon' => sprite_icon('external-link') } }
diff --git a/app/views/clusters/clusters/show.html.haml b/app/views/clusters/clusters/show.html.haml
index cb464eeafbb..01ba7c06154 100644
--- a/app/views/clusters/clusters/show.html.haml
+++ b/app/views/clusters/clusters/show.html.haml
@@ -59,6 +59,7 @@
         = render_if_exists 'clusters/clusters/environments_tab'
         = render 'clusters/clusters/health_tab'
         = render 'applications_tab'
+        = render 'integrations_tab'
         = render 'advanced_settings_tab'
 
       .tab-content.py-3
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index 57c0801074b..90a49e4bbe3 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -18,11 +18,11 @@
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
         = _("Your projects")
-        %span.badge.badge-pill= limited_counter_with_delimiter(@total_user_projects_count)
+        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_user_projects_count)
     = nav_link(page: starred_dashboard_projects_path) do
       = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
         = _("Starred projects")
-        %span.badge.badge-pill= limited_counter_with_delimiter(@total_starred_projects_count)
+        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_starred_projects_count)
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, data: {placement: 'right'} do
         = _("Explore projects")
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index d47df24b1b9..ae557b73620 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -1,11 +1,11 @@
 - @hide_top_links = true
-- page_title _("Merge Requests")
+- page_title _("Merge requests")
 - @breadcrumb_link = merge_requests_dashboard_path(assignee_username: current_user.username)
 
 = render_dashboard_ultimate_trial(current_user)
 
 .page-title-holder.d-flex.align-items-start.flex-column.flex-sm-row.align-items-sm-center
-  %h1.page-title= _('Merge Requests')
+  %h1.page-title= _('Merge requests')
 
   - if current_user
     .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 1f4bd06aea4..c24d386c412 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -3,7 +3,7 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
-- if show_customize_homepage_banner?(@customize_homepage)
+- if show_customize_homepage_banner?
   = content_for :customize_homepage_banner do
     .gl-display-none.gl-md-display-block{ class: "gl-pt-6! gl-pb-2! #{(container_class unless @no_container)} #{@content_class}" }
       .js-customize-homepage-banner{ data: { svg_path: image_path('illustrations/monitoring/getting_started.svg'),
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index d78059b6aed..a0016417f0c 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -42,12 +42,12 @@
             - if params[:group_id].present?
               = hidden_field_tag(:group_id, params[:group_id])
             = dropdown_tag(group_dropdown_label(params[:group_id], 'Group'), options: { toggle_class: 'js-group-search js-filter-submit', title: 'Filter by group', filter: true, filterInput: 'input#group-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-group js-filter-submit',
-              placeholder: 'Search groups', data: { data: todo_group_options, default_label: 'Group', display: 'static' } })
+              placeholder: 'Search groups', data: { default_label: 'Group', display: 'static' } })
           .filter-item.inline
             - if params[:project_id].present?
               = hidden_field_tag(:project_id, params[:project_id])
             = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-              placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project', display: 'static' } })
+              placeholder: 'Search projects', data: { default_label: 'Project', display: 'static' } })
           .filter-item.inline
             - if params[:author_id].present?
               = hidden_field_tag(:author_id, params[:author_id])
diff --git a/app/views/devise/mailer/_confirmation_instructions_account.html.haml b/app/views/devise/mailer/_confirmation_instructions_account.html.haml
index 27ef586d90f..9d469ff6e7b 100644
--- a/app/views/devise/mailer/_confirmation_instructions_account.html.haml
+++ b/app/views/devise/mailer/_confirmation_instructions_account.html.haml
@@ -2,15 +2,15 @@
 - if @resource.unconfirmed_email.present? || !@resource.created_recently?
   #content
     = email_default_heading(@resource.unconfirmed_email || @resource.email)
-    %p Click the link below to confirm your email address.
+    %p= _('Click the link below to confirm your email address.')
     #cta
-      = link_to 'Confirm your email address', confirmation_link
+      = link_to _('Confirm your email address'), confirmation_link
 - else
   #content
     - if Gitlab.com?
-      = email_default_heading('Thanks for signing up to GitLab!')
+      = email_default_heading(_('Thanks for signing up to GitLab!'))
     - else
-      = email_default_heading("Welcome, #{@resource.name}!")
-    %p To get started, click the link below to confirm your account.
+      = email_default_heading(_("Welcome, %{name}!") % { name: @resource.name })
+    %p= _("To get started, click the link below to confirm your account.")
     #cta
-      = link_to 'Confirm your account', confirmation_link
+      = 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 5bccb68bbe2..e6da78e3a3d 100644
--- a/app/views/devise/mailer/_confirmation_instructions_account.text.erb
+++ b/app/views/devise/mailer/_confirmation_instructions_account.text.erb
@@ -1,13 +1,13 @@
 <% if @resource.unconfirmed_email.present? || !@resource.created_recently? %>
 <%= @resource.unconfirmed_email || @resource.email %>,
-Use the link below to confirm your email address.
+<%= _('Use the link below to confirm your email address.') %>
 <% else %>
   <% if Gitlab.com? %>
-Thanks for signing up to GitLab!
+<%= _('Thanks for signing up to GitLab!') %>
   <% else %>
-Welcome, <%= @resource.name %>!
+<%= _("Welcome, %{name}!") % { name: @resource.name } %>
   <% end %>
-To get started, use the link below to confirm your account.
-<% end %>  
+<%= _('To get started, use the link below to confirm your account.') %>
+<% end %>
 
 <%= confirmation_url(@resource, confirmation_token: @token) %>
diff --git a/app/views/devise/mailer/_confirmation_instructions_secondary.text.erb b/app/views/devise/mailer/_confirmation_instructions_secondary.text.erb
index b91498ccfae..ab46aaaca1a 100644
--- a/app/views/devise/mailer/_confirmation_instructions_secondary.text.erb
+++ b/app/views/devise/mailer/_confirmation_instructions_secondary.text.erb
@@ -1,7 +1,7 @@
-<%= @resource.user.name %>, confirm your email address now!
+<%= _(" %{name},  confirm your email address now! ") % { name: @resource.user.name } %>
 
-Use the link below to confirm your email address (<%= @resource.email %>)
+<%= _("Use the link below to confirm your email address (%{email})") % { email: @resource.email } %>
 
 <%= confirmation_url(@resource, confirmation_token: @token) %>
 
-If this email was added in error, you can remove it here: <%= profile_emails_url %>
+<%= _("If this email was added in error, you can remove it here: %{profile_emails_url}") % { profile_emails_url: profile_emails_url } %>
diff --git a/app/views/devise/mailer/password_change.html.haml b/app/views/devise/mailer/password_change.html.haml
index 5ec515285f2..5c0219ea3ad 100644
--- a/app/views/devise/mailer/password_change.html.haml
+++ b/app/views/devise/mailer/password_change.html.haml
@@ -1,8 +1,5 @@
-= email_default_heading("Hello, #{@resource.name}!")
+= email_default_heading(_("Hello, %{name}!") % { name: @resource.name })
 %p
-  The password for your GitLab account on
-  #{link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url)}
-  has successfully been changed.
+  = _('The password for your GitLab account on %{link_to_gitlab} has successfully been changed.').html_safe % { link_to_gitlab: link_to(Gitlab.config.gitlab.url, Gitlab.config.gitlab.url) }
 %p
-  If you did not initiate this change, please contact your administrator
-  immediately.
+  = _('If you did not initiate this change, please contact your administrator immediately.')
diff --git a/app/views/devise/mailer/password_change.text.erb b/app/views/devise/mailer/password_change.text.erb
index 95923d9f8de..6a8128186f5 100644
--- a/app/views/devise/mailer/password_change.text.erb
+++ b/app/views/devise/mailer/password_change.text.erb
@@ -1,7 +1,5 @@
-Hello, <%= @resource.name %>!
+<%= _('Hello, %{name}!') % { name: @resource.name } %>
 
-The password for your GitLab account on <%= Gitlab.config.gitlab.url %>
-has successfully been changed.
+<%= _('The password for your GitLab account on %{gitlab_url} has successfully been changed.') % { gitlab_url: Gitlab.config.gitlab.url } %>
 
-If you did not initiate this change, please contact your administrator
-immediately.
+<%= _('If you did not initiate this change, please contact your administrator immediately.') %>
diff --git a/app/views/devise/mailer/unlock_instructions.html.haml b/app/views/devise/mailer/unlock_instructions.html.haml
index 8ddfd3ea74a..0c05ee4a6cd 100644
--- a/app/views/devise/mailer/unlock_instructions.html.haml
+++ b/app/views/devise/mailer/unlock_instructions.html.haml
@@ -1,8 +1,6 @@
 #content
-  = email_default_heading("Hello, #{@resource.name}!")
+  = email_default_heading(_("Hello, %{name}!") % { name: @resource.name })
   %p
-    Your GitLab account has been locked due to an excessive amount of unsuccessful
-    sign in attempts. Your account will automatically unlock in #{distance_of_time_in_words(Devise.unlock_in)}
-    or you may click the link below to unlock now.
+    = _("Your GitLab account has been locked due to an excessive amount of unsuccessful sign in attempts. Your account will automatically unlock in %{duration} or you may click the link below to unlock now.") % { duration: distance_of_time_in_words(Devise.unlock_in) }
   #cta
-    = link_to('Unlock account', unlock_url(@resource, unlock_token: @token))
+    = link_to(_('Unlock account'), unlock_url(@resource, unlock_token: @token))
diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
index 7876aed2c0a..10c04423589 100644
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@@ -1,4 +1,4 @@
-= render 'devise/shared/tab_single', tab_title:'Change your password'
+= render 'devise/shared/tab_single', tab_title: _('Change your password')
 .login-box
   .login-body
     = form_for(resource, as: resource_name, url: password_path(:user), html: { method: :put, class: 'gl-show-field-errors' }) do |f|
@@ -6,16 +6,16 @@
         = render "devise/shared/error_messages", resource: resource
       = f.hidden_field :reset_password_token
       .form-group
-        = f.label 'New password', for: "user_password"
-        = f.password_field :password, class: "form-control gl-form-input top", required: true, title: 'This field is required', data: { qa_selector: 'password_field'}
+        = f.label _('New password'), for: "user_password"
+        = f.password_field :password, class: "form-control gl-form-input top", required: true, title: _('This field is required.'), data: { qa_selector: 'password_field'}
       .form-group
-        = f.label 'Confirm new password', for: "user_password_confirmation"
-        = f.password_field :password_confirmation, class: "form-control gl-form-input bottom", title: 'This field is required', data: { qa_selector: 'password_confirmation_field' }, required: true
+        = f.label _('Confirm new password'), for: "user_password_confirmation"
+        = f.password_field :password_confirmation, class: "form-control gl-form-input bottom", title: _('This field is required.'), data: { qa_selector: 'password_confirmation_field' }, required: true
       .clearfix
-        = f.submit "Change your password", class: "gl-button btn btn-confirm", data: { qa_selector: 'change_password_button' }
+        = f.submit _("Change your password"), class: "gl-button btn btn-confirm", data: { qa_selector: 'change_password_button' }
 
 .clearfix.prepend-top-20
   %p
-    %span.light Didn't receive a confirmation email?
-    = link_to "Request a new one", new_confirmation_path(:user)
+    %span.light= _("Didn't receive a confirmation email?")
+    = link_to _("Request a new one"), new_confirmation_path(:user)
 = render 'devise/shared/sign_in_link'
diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
index c4672a5b25e..ef876779ad6 100644
--- a/app/views/devise/passwords/new.html.haml
+++ b/app/views/devise/passwords/new.html.haml
@@ -5,9 +5,9 @@
         = render "devise/shared/error_messages", resource: resource
       .form-group
         = f.label :email
-        = f.email_field :email, class: "form-control gl-form-input", required: true, value: params[:user_email], autofocus: true, title: 'Please provide a valid email address.'
+        = f.email_field :email, class: "form-control gl-form-input", required: true, value: params[:user_email], autofocus: true, title: _('Please provide a valid email address.')
       .clearfix
-        = f.submit "Reset password", class: "gl-button btn-confirm btn"
+        = f.submit _("Reset password"), class: "gl-button btn-confirm btn"
 
 .clearfix.prepend-top-20
   = render 'devise/shared/sign_in_link'
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index 5a1388ac7a1..eeaefb8c6ac 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -9,20 +9,20 @@
   <div><%= f.label :name %><br />
     <%= f.text_field :name %></div>
 
-  <div><%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
+  <div><%= f.label :password %> <i><%= _("(leave blank if you don't want to change it)") %></i><br />
   <%= f.password_field :password %></div>
 
   <div><%= f.label :password_confirmation %><br />
   <%= f.password_field :password_confirmation %></div>
 
-  <div><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+  <div><%= f.label :current_password %> <i><%= _("(we need your current password to confirm your changes)") %></i><br />
   <%= f.password_field :current_password %></div>
 
-<div><%= f.submit "Update", class: "input_button" %></div>
+<div><%= f.submit _("Update"), class: "input_button" %></div>
 <% end %>
 
-<h3>Cancel your account</h3>
+<h3><%= _('Cancel your account') %></h3>
 
-<p>Unhappy? <%= link_to "Cancel your account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %>.</p>
+<p><%= _('Unhappy?') %> <%= link_to _("Cancel your account"), registration_path(resource_name), data: { confirm: _("Are you sure?") }, method: :delete %>.</p>
 
-<%= link_to "Back", :back %>
+<%= link_to _("Back"), :back %>
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index 161e23d700e..769268748f4 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user', class: 'gl-show-field-errors') do
   .form-group
-    = label_tag :username, 'Username or email'
-    = text_field_tag :username, nil, { class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
+    = label_tag :username, _('Username or email')
+    = text_field_tag :username, nil, { class: "form-control top", title: _("This field is required."), autofocus: "autofocus", required: true }
   .form-group
     = label_tag :password
-    = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
+    = password_field_tag :password, nil, { class: "form-control bottom", title: _("This field is required."), required: true }
   - if devise_mapping.rememberable?
     .remember-me
       %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
-        %span Remember me
-  = submit_tag "Sign in", class: "gl-button btn-confirm btn"
+        %span= _('Remember me')
+  = submit_tag _("Sign in"), class: "gl-button btn-confirm btn"
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 19fcabb1a2e..f599a652b71 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -5,15 +5,15 @@
 = form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user', class: "gl-show-field-errors") do
   .form-group
     = label_tag :username, "#{server['label']} Username"
-    = text_field_tag :username, nil, { class: "form-control gl-form-input top", title: "This field is required.", autofocus: "autofocus", data: { qa_selector: 'username_field' }, required: true }
+    = text_field_tag :username, nil, { class: "form-control gl-form-input top", title: _("This field is required."), autofocus: "autofocus", data: { qa_selector: 'username_field' }, required: true }
   .form-group
     = label_tag :password
-    = password_field_tag :password, nil, { class: "form-control gl-form-input bottom", title: "This field is required.", data: { qa_selector: 'password_field' }, required: true }
+    = password_field_tag :password, nil, { class: "form-control gl-form-input bottom", title: _("This field is required."), data: { qa_selector: 'password_field' }, required: true }
   - if !hide_remember_me && devise_mapping.rememberable?
     .remember-me
       %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
-        %span Remember me
+        %span= _('Remember me')
 
   .submit-container.move-submit-down
     = submit_tag submit_message, class: "gl-button btn btn-confirm", data: { qa_selector: 'sign_in_button' }
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index cce0a3b926e..74f3e3e7e34 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -13,7 +13,7 @@
   -# Show a message if none of the mechanisms above are enabled
   - if !password_authentication_enabled_for_web? && !ldap_sign_in_enabled? && !(omniauth_enabled? && devise_mapping.omniauthable?)
     %div
-      No authentication methods configured.
+      = _('No authentication methods configured.')
 
   - if allow_signup?
     %p.gl-mt-3
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 404484cfb93..29bcb3c158b 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -1,5 +1,5 @@
 %div
-  = render 'devise/shared/tab_single', tab_title: 'Two-Factor Authentication'
+  = render 'devise/shared/tab_single', tab_title: _('Two-Factor Authentication')
   .login-box
     .login-body
       - if @user.two_factor_otp_enabled?
@@ -7,10 +7,10 @@
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
           %div
-            = f.label 'Two-Factor Authentication code', name: :otp_attempt
-            = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', title: 'This field is required.', data: { qa_selector: 'two_fa_code_field' }
-            %p.form-text.text-muted.hint Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.
+            = f.label _('Two-Factor Authentication code'), name: :otp_attempt
+            = f.text_field :otp_attempt, class: 'form-control gl-form-input', required: true, autofocus: true, autocomplete: 'off', title: _('This field is required.'), data: { qa_selector: 'two_fa_code_field' }
+            %p.form-text.text-muted.hint= _("Enter the code from the two-factor app on your mobile device. If you've lost your device, you may enter one of your recovery codes.")
             .prepend-top-20
-              = f.submit "Verify code", class: "gl-button btn btn-confirm", data: { qa_selector: 'verify_code_button' }
+              = f.submit _("Verify code"), class: "gl-button btn btn-confirm", data: { qa_selector: 'verify_code_button' }
       - if @user.two_factor_webauthn_u2f_enabled?
         = render "authentication/authenticate", params: params, resource: resource, resource_name: resource_name, render_remember_me: true, target_path: new_user_session_path
diff --git a/app/views/devise/shared/_email_opted_in.html.haml b/app/views/devise/shared/_email_opted_in.html.haml
new file mode 100644
index 00000000000..6896ef21536
--- /dev/null
+++ b/app/views/devise/shared/_email_opted_in.html.haml
@@ -0,0 +1,7 @@
+- is_hidden = local_assigns.fetch(:hidden, Gitlab.dev_env_or_com?)
+
+.gl-mb-3.js-email-opt-in{ class: is_hidden ? 'hidden' : '' }
+  .gl-font-weight-bold.gl-mb-3
+    = _('Email updates (optional)')
+  = f.check_box :email_opted_in
+  = f.label :email_opted_in, _("I'd like to receive updates about GitLab via email"), class: 'gl-font-weight-normal'
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 3ec859551ca..8b54b735205 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -2,7 +2,7 @@
 
 .omniauth-container.gl-mt-5
   %label.label-bold.d-block
-    Sign in with
+    = _('Sign in with')
   - providers = enabled_button_based_providers
   .d-flex.justify-content-between.flex-wrap
     - providers.each do |provider|
@@ -17,4 +17,4 @@
       %label
         = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
         %span
-          Remember me
+          = _('Remember me')
diff --git a/app/views/devise/shared/_sign_in_link.html.haml b/app/views/devise/shared/_sign_in_link.html.haml
index 9a7d8a0a160..0a48c342502 100644
--- a/app/views/devise/shared/_sign_in_link.html.haml
+++ b/app/views/devise/shared/_sign_in_link.html.haml
@@ -1,4 +1,6 @@
 %p.text-center
   %span.light
-    Already have login and password?
-    = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes')
+    = _('Already have login and password?')
+    - path_params = { redirect_to_referer: 'yes' }
+    - path_params[:invite_email] = @invite_email if @invite_email.present?
+    = link_to _('Sign in'), new_session_path(:user, path_params)
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index 27057d023b1..0ef4a30d820 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -4,7 +4,7 @@
 %ul.nav-links.new-session-tabs.nav-tabs.nav{ class: ('custom-provider-tabs' if any_form_based_providers_enabled?) }
   - if crowd_enabled?
     %li.nav-item
-      = link_to "Crowd", "#crowd", class: "nav-link #{active_when(form_based_auth_provider_has_active_class?(:crowd))}", 'data-toggle' => 'tab', role: 'tab'
+      = link_to _("Crowd"), "#crowd", class: "nav-link #{active_when(form_based_auth_provider_has_active_class?(:crowd))}", 'data-toggle' => 'tab', role: 'tab'
   = render_if_exists "devise/shared/kerberos_tab"
   - ldap_servers.each_with_index do |server, i|
     %li.nav-item
@@ -17,4 +17,4 @@
       = link_to _('Standard'), '#login-pane', class: 'nav-link', data: { toggle: 'tab', qa_selector: 'standard_tab' }, role: 'tab'
   - if render_signup_link && allow_signup?
     %li.nav-item
-      = link_to 'Register', '#register-pane', class: 'nav-link', data: { toggle: 'tab', qa_selector: 'register_tab' }, role: 'tab'
+      = link_to _('Register'), '#register-pane', class: 'nav-link', data: { toggle: 'tab', qa_selector: 'register_tab' }, role: 'tab'
diff --git a/app/views/devise/unlocks/new.html.haml b/app/views/devise/unlocks/new.html.haml
index 398a4fa0c5e..abaf169afd5 100644
--- a/app/views/devise/unlocks/new.html.haml
+++ b/app/views/devise/unlocks/new.html.haml
@@ -1,4 +1,4 @@
-= render 'devise/shared/tab_single', tab_title: 'Resend unlock instructions'
+= render 'devise/shared/tab_single', tab_title: _('Resend unlock instructions')
 .login-box
   .login-body
     = form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post, class: 'gl-show-field-errors' }) do |f|
@@ -6,9 +6,9 @@
         = render "devise/shared/error_messages", resource: resource
       .form-group.gl-mb-6
         = f.label :email
-        = f.email_field :email, class: 'form-control', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', title: 'Please provide a valid email address.'
+        = f.email_field :email, class: 'form-control', autofocus: 'autofocus', autocapitalize: 'off', autocorrect: 'off', title: _('Please provide a valid email address.')
       .clearfix
-        = f.submit 'Resend unlock instructions', class: 'gl-button btn btn-confirm'
+        = f.submit _('Resend unlock instructions'), class: 'gl-button btn btn-confirm'
 
 .clearfix.prepend-top-20
   = render 'devise/shared/sign_in_link'
diff --git a/app/views/doorkeeper/applications/edit.html.haml b/app/views/doorkeeper/applications/edit.html.haml
index aad4200f240..99e6a5eca19 100644
--- a/app/views/doorkeeper/applications/edit.html.haml
+++ b/app/views/doorkeeper/applications/edit.html.haml
@@ -1,4 +1,5 @@
 - page_title _("Edit"), @application.name, _("Applications")
 - @content_class = "limit-container-width" unless fluid_layout
+
 %h3.page-title= _('Edit application')
-= render 'form', application: @application
+= render 'shared/doorkeeper/applications/form', url: doorkeeper_submit_path(@application)
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index 827a839234f..e17448fbeaf 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -1,85 +1,8 @@
 - page_title _("Applications")
-- @content_class = "limit-container-width" unless fluid_layout
 
-.row.gl-mt-3
-  .col-lg-4.profile-settings-sidebar
-    %h4.gl-mt-0
-      = page_title
-    %p
-      - if user_oauth_applications?
-        = _("Manage applications that can use GitLab as an OAuth provider, and applications that you've authorized to use your account.")
-      - else
-        = _("Manage applications that you've authorized to use your account.")
-  .col-lg-8
-    - if user_oauth_applications?
-      %h5.gl-mt-0
-        = _('Add new application')
-      = render 'form', application: @application
-      %hr
-    - 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 user_oauth_applications?
-      .oauth-applications
-        %h5
-          = _("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, oauth_application_path(application)
-                    %td
-                      - application.redirect_uri.split.each do |uri|
-                        %div= uri
-                    %td= application.access_tokens.count
-                    %td.gl-display-flex
-                      = link_to edit_oauth_application_path(application), class: "gl-button btn btn-default gl-mr-2" do
-                        %span.sr-only
-                          = _('Edit')
-                        = sprite_icon('pencil')
-                      = render 'delete_form', application: application, small: true
-        - else
-          .settings-message.text-center
-            = _("You don't have any applications")
-    .oauth-authorized-applications.prepend-top-20.gl-mb-3
-      - if user_oauth_applications?
-        %h5
-          = _("Authorized applications (%{size})") % { size: @authorized_apps.size + @authorized_anonymous_tokens.size }
-
-      - if @authorized_tokens.any?
-        .table-responsive
-          %table.table.table-striped
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Authorized At')
-                %th= _('Scope')
-                %th
-            %tbody
-              - @authorized_apps.each do |app|
-                - token = app.authorized_tokens.order('created_at desc').first # rubocop: disable CodeReuse/ActiveRecord
-                %tr{ id: "application_#{app.id}" }
-                  %td= app.name
-                  %td= token.created_at
-                  %td= token.scopes
-                  %td= render 'doorkeeper/authorized_applications/delete_form', application: app
-              - @authorized_anonymous_tokens.each do |token|
-                %tr
-                  %td
-                    = _('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= render 'doorkeeper/authorized_applications/delete_form', token: token
-      - else
-        .settings-message.text-center
-          = _("You don't have any authorized applications")
+= render 'shared/doorkeeper/applications/index',
+        oauth_applications_enabled: user_oauth_applications?,
+        oauth_authorized_applications_enabled: true,
+        form_url: doorkeeper_submit_path(@application),
+        application_url: ->(application) { oauth_application_path(application) },
+        edit_application_url: ->(application) { edit_oauth_application_path(application) }
diff --git a/app/views/doorkeeper/applications/show.html.haml b/app/views/doorkeeper/applications/show.html.haml
index 046d44bc47f..75521d42f7e 100644
--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@@ -6,42 +6,4 @@
 %h3.page-title
   = _("Application: %{name}") % { name: @application.name }
 
-.table-holder.oauth-application-show
-  %table.table
-    %tr
-      %td
-        = _('Application ID')
-      %td
-        .clipboard-group
-          .input-group
-            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
-            .input-group-append
-              = clipboard_button(target: '#application_id', title: _("Copy ID"), class: "gl-button btn btn-default")
-    %tr
-      %td
-        = _('Secret')
-      %td
-        .clipboard-group
-          .input-group
-            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
-            .input-group-append
-              = clipboard_button(target: '#secret', title: _("Copy secret"), class: "gl-button btn btn-default")
-    %tr
-      %td
-        = _('Callback URL')
-      %td
-        - @application.redirect_uri.split.each do |uri|
-          %div
-            %span.monospace= uri
-
-    %tr
-      %td
-        = _('Confidential')
-      %td
-        = @application.confidential? ? _('Yes') : _('No')
-
-    = render "shared/tokens/scopes_list", token: @application
-
-.form-actions
-  = link_to _('Edit'), edit_oauth_application_path(@application), class: 'gl-button btn btn-confirm wide float-left'
-  = render 'delete_form', application: @application, submit_btn_css: 'gl-button btn btn-danger gl-ml-3'
+= render 'shared/doorkeeper/applications/show', edit_path: edit_oauth_application_path(@application), delete_path: oauth_application_path(@application)
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index 7ea10296d97..5e93b1d89eb 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -1,6 +1,6 @@
 %main{ :role => "main" }
-  .modal-no-backdrop.modal-doorkeepr-auth
-    .modal-content
+  .modal-dialog.modal-doorkeepr-auth
+    .modal-content.gl-shadow-none
       .modal-header
         %h3.page-title
           - link_to_client = link_to(@pre_auth.client.name, @pre_auth.redirect_uri, target: '_blank', rel: 'noopener noreferrer')
diff --git a/app/views/errors/_footer.html.haml b/app/views/errors/_footer.html.haml
index bb9edc54b4b..62bac62c70c 100644
--- a/app/views/errors/_footer.html.haml
+++ b/app/views/errors/_footer.html.haml
@@ -4,7 +4,8 @@
       = link_to s_('Nav|Home'), root_path
     %li
       - if current_user
-        = link_to s_('Nav|Sign out and sign in with a different account'), destroy_user_session_path, method: :post
+        = link_to s_('Nav|Sign out and sign in with a different account'), '#', id: 'sign_out_link'
+        %form{ action: destroy_user_session_path, method: :post, id: 'sign_out_form' }
       - else
         = link_to s_('Nav|Sign In / Register'), new_session_path(:user, redirect_to_referer: 'yes')
     %li
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index 2fa595503e5..d08c3d5ba41 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -22,7 +22,7 @@
     - if note.attachment.url
       - if note.attachment.image?
         = link_to note.attachment.url, target: '_blank' do
-          = image_tag note.attachment.url, class: 'note-image-attach'
+          = image_tag note.attachment.url, class: 'note-image-attach col-lg-4'
       - else
         = link_to note.attachment.url, target: '_blank', class: 'note-file-attach' do
           = sprite_icon("paperclip")
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index 97dd606855b..62d6ab36578 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -18,7 +18,7 @@
 
 - if event.push_with_commits?
   .event-body
-    %ul.content-list.event_commits
+    %ul.content-list.event-commits
       = render "events/commit", project: project, event: event
 
       - create_mr = event.new_ref? && create_mr_button?(from: project.default_branch, to: event.ref_name, source_project: project, target_project: project) && event.authored_by?(current_user)
@@ -46,4 +46,4 @@
       - elsif create_mr
         %li.commits-stat
           = link_to create_mr_path do
-            Create Merge Request
+            Create merge request
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index 769455dc951..b1a40bfc96b 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -1,7 +1,7 @@
 .nav-block.activities
   = render 'shared/event_filter', show_group_events: @group.supports_events?
   .controls
-    = link_to group_path(@group, rss_url_options), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' , title: 'Subscribe' do
+    = link_to group_path(@group, rss_url_options), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-flex has-tooltip' , title: _('Subscribe') do
       = sprite_icon('rss', css_class: 'qa-rss-icon gl-icon')
 
 .content_list
diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml
index f141b646e69..8f50d499605 100644
--- a/app/views/groups/_create_chat_team.html.haml
+++ b/app/views/groups/_create_chat_team.html.haml
@@ -3,7 +3,7 @@
     = f.label :create_chat_team do
       %span.gl-display-flex
         = custom_icon('icon_mattermost')
-        %span.gl-ml-2 Mattermost
+        %span.gl-ml-2= _('Mattermost')
   .col-sm-12
     .form-check.js-toggle-container
       .js-toggle-button.form-check-input= f.check_box(:create_chat_team, { checked: false }, true, false)
@@ -11,7 +11,7 @@
         = _('Create a Mattermost team for this group')
       %br
       %small.light.js-toggle-content
-        Mattermost URL:
+        = _('Mattermost URL:')
         = Settings.mattermost.host
         %span> /
         %span{ "data-bind-out" => "create_chat_team" }
diff --git a/app/views/groups/_group_admin_settings.html.haml b/app/views/groups/_group_admin_settings.html.haml
index 393ab8013e7..0c3eff85f16 100644
--- a/app/views/groups/_group_admin_settings.html.haml
+++ b/app/views/groups/_group_admin_settings.html.haml
@@ -1,15 +1,15 @@
 .form-group.row
   .col-sm-2.col-form-label.pt-0
-    = f.label :lfs_enabled, 'Large File Storage'
+    = f.label :lfs_enabled, _('Large File Storage')
   .col-sm-10
     .form-check
       = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input'
       = f.label :lfs_enabled, class: 'form-check-label' do
         %strong
-          Allow projects within this group to use Git LFS
+          = _('Allow projects within this group to use Git LFS')
           = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
         %br/
-        %span This setting can be overridden in each project.
+        %span= _('This setting can be overridden in each project.')
 .form-group.row
   .col-sm-2.col-form-label
     = f.label s_('ProjectCreationLevel|Allowed to create projects')
@@ -24,16 +24,16 @@
 
 .form-group.row
   .col-sm-2.col-form-label.pt-0
-    = f.label :require_two_factor_authentication, 'Two-factor authentication'
+    = f.label :require_two_factor_authentication, _('Two-factor authentication')
   .col-sm-10
     .form-check
       = f.check_box :require_two_factor_authentication, class: 'form-check-input'
       = f.label :require_two_factor_authentication, class: 'form-check-label' do
         %strong
-          Require all users in this group to set up Two-factor authentication
+          = _("Require all users in this group to setup Two-factor authentication")
           = link_to sprite_icon('question-o'), help_page_path('security/two_factor_authentication', anchor: 'enforcing-2fa-for-all-users-in-a-group')
 .form-group.row
   .offset-sm-2.col-sm-10
     .form-check
       = f.text_field :two_factor_grace_period, class: 'form-control'
-      .form-text.text-muted Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication
+      .form-text.text-muted= _("Amount of time (in hours) that users are allowed to skip forced configuration of two-factor authentication")
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index 2df5a6740b0..624d0a21b81 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -37,5 +37,5 @@
       .home-panel-description
         .home-panel-description-markdown.read-more-container{ itemprop: 'description' }
           = markdown_field(@group, :description)
-        %button.btn.btn-blank.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
+        %button.gl-button.btn.btn-link.js-read-more-trigger.d-lg-none{ type: "button" }
           = _("Read more")
diff --git a/app/views/groups/_new_group_fields.html.haml b/app/views/groups/_new_group_fields.html.haml
index 14a3b0ece95..fd0a7af30ed 100644
--- a/app/views/groups/_new_group_fields.html.haml
+++ b/app/views/groups/_new_group_fields.html.haml
@@ -16,6 +16,11 @@
 .row
   .col-sm-4
     = render_if_exists 'shared/groups/invite_members'
+
+- if captcha_required?
+  .row.recaptcha
+    .col-sm-4
+      = recaptcha_tags
 .row
   .form-actions.col-sm-12
     = f.submit _('Create group'), class: "btn gl-button btn-confirm"
diff --git a/app/views/groups/activity.html.haml b/app/views/groups/activity.html.haml
index bc75fada937..6ba6dab96ae 100644
--- a/app/views/groups/activity.html.haml
+++ b/app/views/groups/activity.html.haml
@@ -1,5 +1,5 @@
 = content_for :meta_tags do
-  = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
+  = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: _("%{group_name} activity") % { group_name: @group.name })
 
 - page_title _("Activity")
 
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index d1c4e1a7deb..6e355d31204 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -3,8 +3,9 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
+= render 'shared/namespaces/cascading_settings/lock_popovers'
 
-%section.settings.gs-general.no-animate#js-general-settings{ class: ('expanded') }
+%section.settings.gs-general.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only{ role: 'button' }
       = _('Naming, visibility')
@@ -45,7 +46,7 @@
 = render_if_exists 'groups/custom_project_templates_setting'
 = render_if_exists 'groups/templates_setting', expanded: expanded
 
-%section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded) }
+%section.settings.gs-advanced.no-animate#js-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{ role: 'button' }
       = _('Advanced')
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index da00879ecf9..106a7832cc7 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -41,25 +41,25 @@
         = link_to '#tab-members', class: ['nav-link', ('active' unless invited_active)], data: { toggle: 'tab' } do
           %span
             = _('Members')
-          %span.badge.badge-pill= @members.total_count
+          %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @members.total_count
       - if @group.shared_with_group_links.any?
         %li.nav-item
           = link_to '#tab-groups', class: ['nav-link'] , data: { toggle: 'tab', qa_selector: 'groups_list_tab' } do
             %span
               = _('Groups')
-            %span.badge.badge-pill= @group.shared_with_group_links.count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @group.shared_with_group_links.count
       - if show_invited_members
         %li.nav-item
           = link_to '#tab-invited-members', class: ['nav-link', ('active' if invited_active)], data: { toggle: 'tab' } do
             %span
               = _('Invited')
-            %span.badge.badge-pill= @invited_members.total_count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @invited_members.total_count
       - if show_access_requests
         %li.nav-item
           = link_to '#tab-access-requests', class: 'nav-link', data: { toggle: 'tab' } do
             %span
               = _('Access requests')
-            %span.badge.badge-pill= @requesters.count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @requesters.count
     .tab-content
       #tab-members.tab-pane{ class: ('active' unless invited_active) }
         .js-group-members-list{ data: group_members_list_data_attributes(@group, @members) }
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index ef7e3efdc68..ae4b0807fc5 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -5,32 +5,29 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@group.name} issues")
 
-- if group_issues_count(state: 'all') == 0
-  = render 'shared/empty_states/issues', project_select_button: true
-- else
-  .top-area
-    = render 'shared/issuable/nav', type: :issues
-    .nav-controls
-      = render 'shared/issuable/feed_buttons'
+.top-area
+  = render 'shared/issuable/nav', type: :issues
+  .nav-controls
+    = render 'shared/issuable/feed_buttons'
 
-      - if @can_bulk_update
-        = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
+    - if @can_bulk_update
+      = render_if_exists 'shared/issuable/bulk_update_button', type: :issues
 
-      = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
+    = render 'shared/new_project_item_select', path: 'issues/new', label: "New issue", type: :issues, with_feature_enabled: 'issues', with_shared: false, include_projects_in_subgroups: true
 
-  = render 'shared/issuable/search_bar', type: :issues
+= render 'shared/issuable/search_bar', type: :issues
 
-  - if @can_bulk_update
-    = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
+- if @can_bulk_update
+  = render_if_exists 'shared/issuable/group_bulk_update_sidebar', group: @group, type: :issues
 
-  - if Feature.enabled?(:vue_issuables_list, @group)
-    - if use_startup_call?
-      - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
-    .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
-      'can-bulk-edit': @can_bulk_update.to_json,
-      'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
-      'sort-key': @sort,
-      type: 'issues',
-      'scoped-labels-available': scoped_labels_available?(@group).to_json } }
-  - else
-    = render 'shared/issues'
+- if Feature.enabled?(:vue_issuables_list, @group) && @issues.to_a.any?
+  - if use_startup_call?
+    - add_page_startup_api_call(api_v4_groups_issues_path(id: @group.id, params: startup_call_params))
+  .js-issuables-list{ data: { endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)),
+    'can-bulk-edit': @can_bulk_update.to_json,
+    'empty-state-meta': { svg_path: image_path('illustrations/issues.svg') },
+    'sort-key': @sort,
+    type: 'issues',
+    'scoped-labels-available': scoped_labels_available?(@group).to_json } }
+- else
+  = render 'shared/issues', project_select_button: true
diff --git a/app/views/groups/labels/edit.html.haml b/app/views/groups/labels/edit.html.haml
index fbab4f8a250..d9b8f99ea0c 100644
--- a/app/views/groups/labels/edit.html.haml
+++ b/app/views/groups/labels/edit.html.haml
@@ -3,7 +3,7 @@
 - page_title _("Edit"), @label.name, _("Labels")
 
 %h3.page-title
-  Edit Label
+  = _('Edit Label')
 %hr
 
 = render 'shared/labels/form', url: group_label_path(@group, @label), back_path: @previous_labels_path
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 804d2da2c4b..c480123dad1 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -8,7 +8,7 @@
   #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.gl-mt-2
+  .labels-container.gl-mt-2.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
     - if @labels.any?
       .text-muted
         = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
diff --git a/app/views/groups/labels/new.html.haml b/app/views/groups/labels/new.html.haml
index bb0b8d2b94d..75b4ad5c795 100644
--- a/app/views/groups/labels/new.html.haml
+++ b/app/views/groups/labels/new.html.haml
@@ -3,7 +3,7 @@
 - page_title _("New Label")
 
 %h3.page-title
-  New Label
+  = _('New Label')
 %hr
 
 = render 'shared/labels/form', url: group_labels_path, back_path: @previous_labels_path
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 15e777f5c36..15864e18f7c 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,8 +1,8 @@
 - @can_bulk_update = can?(current_user, :admin_merge_request, @group) && @group.feature_available?(:group_bulk_edit)
 
-- page_title _("Merge Requests")
+- page_title _("Merge requests")
 
-- if group_merge_requests_count(state: 'all') == 0
+- if @merge_requests&.size == 0
   = render 'shared/empty_states/merge_requests', project_select_button: true
 - else
   .top-area
diff --git a/app/views/groups/milestones/_form.html.haml b/app/views/groups/milestones/_form.html.haml
index 52060e2be16..d4d8a7a57ef 100644
--- a/app/views/groups/milestones/_form.html.haml
+++ b/app/views/groups/milestones/_form.html.haml
@@ -4,23 +4,23 @@
     .col-md-6
       .form-group.row
         .col-form-label.col-sm-2
-          = f.label :title, "Title"
+          = f.label :title, _("Title")
         .col-sm-10
           = f.text_field :title, maxlength: 255, class: "form-control", data: { qa_selector: "milestone_title_field" }, required: true, autofocus: true
       .form-group.row.milestone-description
         .col-form-label.col-sm-2
-          = f.label :description, "Description"
+          = f.label :description, _("Description")
         .col-sm-10
           = render layout: 'shared/md_preview', locals: { url: group_preview_markdown_path } do
-            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', qa_selector: 'milestone_description_field', placeholder: 'Write milestone description...', supports_autocomplete: false
+            = render 'shared/zen', f: f, attr: :description, classes: 'note-textarea', qa_selector: 'milestone_description_field', placeholder: _('Write milestone description...'), supports_autocomplete: false
           .clearfix
           .error-alert
     = render "shared/milestones/form_dates", f: f
 
   .form-actions
     - if @milestone.new_record?
-      = f.submit 'Create milestone', class: "btn-confirm gl-button btn", data: { qa_selector: "create_milestone_button" }
-      = link_to "Cancel", group_milestones_path(@group), class: "btn gl-button btn-cancel"
+      = f.submit _('Create milestone'), class: "btn-confirm gl-button btn", data: { qa_selector: "create_milestone_button" }
+      = link_to _("Cancel"), group_milestones_path(@group), class: "btn gl-button btn-cancel"
     - else
-      = f.submit 'Update milestone', class: "btn-confirm gl-button btn"
-      = link_to "Cancel", group_milestone_path(@group, @milestone), class: "btn gl-button btn-cancel"
+      = f.submit _('Update milestone'), class: "btn-confirm gl-button btn"
+      = link_to _("Cancel"), group_milestone_path(@group, @milestone), class: "btn gl-button btn-cancel"
diff --git a/app/views/groups/milestones/edit.html.haml b/app/views/groups/milestones/edit.html.haml
index c703d5f7f93..187c2d24b56 100644
--- a/app/views/groups/milestones/edit.html.haml
+++ b/app/views/groups/milestones/edit.html.haml
@@ -4,7 +4,7 @@
 - render "header_title"
 
 %h3.page-title
-  Edit Milestone
+  = _('Edit Milestone')
 %hr
 
 = render "form"
diff --git a/app/views/groups/runners/_group_runners.html.haml b/app/views/groups/runners/_group_runners.html.haml
index f60cdc9f8da..910b36770f1 100644
--- a/app/views/groups/runners/_group_runners.html.haml
+++ b/app/views/groups/runners/_group_runners.html.haml
@@ -19,5 +19,5 @@
                      type: 'group',
                      reset_token_url: reset_registration_token_group_settings_ci_cd_path,
                      project_path: '',
-                     group_path: @group.path }
+                     group_path: @group.full_path }
   %br
diff --git a/app/views/groups/runners/_index.html.haml b/app/views/groups/runners/_index.html.haml
index 7cbc709ecf8..187588f5f11 100644
--- a/app/views/groups/runners/_index.html.haml
+++ b/app/views/groups/runners/_index.html.haml
@@ -19,7 +19,7 @@
         .filtered-search-box
           = dropdown_tag(_('Recent searches'),
             options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
-            toggle_class: 'btn filtered-search-history-dropdown-toggle-button',
+            toggle_class: 'gl-button btn btn-default filtered-search-history-dropdown-toggle-button',
             dropdown_class: 'filtered-search-history-dropdown',
             content_class: 'filtered-search-history-dropdown-content' }) do
             .js-filtered-search-history-dropdown{ data: { full_path: group_settings_ci_cd_path } }
@@ -31,7 +31,7 @@
             #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                 %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
-                  = button_tag class: 'btn btn-link' do
+                  = button_tag class: 'gl-button btn btn-link' do
                     -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                     -# haml lint's ClassAttributeWithStaticValue
                     %svg
@@ -41,7 +41,7 @@
             #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
               %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                 %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                  = button_tag class: 'btn btn-link' do
+                  = button_tag class: 'gl-button btn btn-link' do
                     {{ title }}
                     %span.btn-helptext
                       {{ help }}
@@ -49,7 +49,7 @@
               %ul{ data: { dropdown: true } }
                 - Ci::Runner::AVAILABLE_STATUSES.each do |status|
                   %li.filter-dropdown-item{ data: { value: status } }
-                    = button_tag class: 'btn btn-link' do
+                    = button_tag class: 'gl-button btn btn-link' do
                       = status.titleize
 
             #js-dropdown-admin-runner-type.filtered-search-input-dropdown-menu.dropdown-menu
@@ -57,18 +57,18 @@
                 - Ci::Runner::AVAILABLE_TYPES.each do |runner_type|
                   - next if runner_type == 'instance_type'
                   %li.filter-dropdown-item{ data: { value: runner_type } }
-                    = button_tag class: 'btn btn-link' do
+                    = button_tag class: 'gl-button btn btn-link' do
                       = runner_type.titleize
 
           #js-dropdown-runner-tag.filtered-search-input-dropdown-menu.dropdown-menu
             %ul{ data: { dropdown: true } }
               %li.filter-dropdown-item{ data: { value: 'none' } }
-                = button_tag class: 'btn btn-link' do
+                = button_tag class: 'gl-button btn btn-link' do
                   = _('No Tag')
               %li.divider.droplab-item-ignore
             %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
-                = button_tag class: 'btn btn-link js-data-value' do
+                = button_tag class: 'gl-button btn btn-link js-data-value' do
                   %span.dropdown-light-content
                     {{name}}
 
@@ -82,12 +82,11 @@
 
 
 - if @group_runners.any?
-  .runners-content.content-list
+  .content-list{ data: { testid: 'runners-table' } }
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')
diff --git a/app/views/groups/runners/_runner.html.haml b/app/views/groups/runners/_runner.html.haml
index 80739395713..89e32c0999c 100644
--- a/app/views/groups/runners/_runner.html.haml
+++ b/app/views/groups/runners/_runner.html.haml
@@ -1,29 +1,30 @@
+-# Note: This file should stay aligned with:
+-# `app/views/admin/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
     .table-mobile-content
       - if runner.group_type?
-        %span.badge.badge-success
+        %span.badge.badge-pill.gl-badge.sm.badge-success
           = _('group')
       - else
-        %span.badge.badge-info
+        %span.badge.badge-pill.gl-badge.sm.badge-info
           = _('specific')
       - if runner.locked?
-        %span.badge.badge-warning
+        %span.badge.badge-pill.gl-badge.sm.badge-warning
           = _('locked')
       - unless runner.active?
-        %span.badge.badge-danger
+        %span.badge.badge-pill.gl-badge.sm.badge-danger
           = _('paused')
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, group_runner_path(@group, runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
-      = runner.description
+      = link_to("##{runner.id} (#{runner.short_sha})", group_runner_path(@group, runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
+          = runner.description
 
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }= _('Version')
@@ -67,21 +68,21 @@
   .table-section.table-button-footer.section-10
     .btn-group.table-action-buttons
       .btn-group
-        = link_to edit_group_runner_path(@group, runner), class: 'btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
-          = sprite_icon('pencil')
+        = link_to edit_group_runner_path(@group, runner), class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = sprite_icon('pencil', css_class: 'gl-icon')
       .btn-group
         - if runner.active?
-          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('pause')
+          = link_to pause_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('pause', css_class: 'gl-icon')
         - else
-          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'btn btn-default has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
-            = sprite_icon('play')
+          = link_to resume_group_runner_path(@group, runner), method: :post, class: 'gl-button btn btn-default btn-icon has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = sprite_icon('play', css_class: 'gl-icon')
       - if runner.belongs_to_more_than_one_project?
         - delete_runner_tooltip = _('Multi-project Runners cannot be removed')
         .btn-group.has-tooltip{ data: { container: 'body', placement: 'top' }, title: delete_runner_tooltip }
-          .btn.btn-danger{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
-            = sprite_icon('close')
+          .gl-button.btn.btn-danger.btn-icon{ 'aria-label' => delete_runner_tooltip, disabled: 'disabled' }
+            = sprite_icon('close', css_class: 'gl-icon')
       - else
         .btn-group
-          = link_to group_runner_path(@group, runner), method: :delete, class: 'btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
-            = sprite_icon('close')
+          = link_to group_runner_path(@group, runner), method: :delete, class: 'gl-button btn btn-danger btn-icon has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = sprite_icon('close', css_class: 'gl-icon')
diff --git a/app/views/groups/runners/edit.html.haml b/app/views/groups/runners/edit.html.haml
index fcd096eeaa0..3794c345aa6 100644
--- a/app/views/groups/runners/edit.html.haml
+++ b/app/views/groups/runners/edit.html.haml
@@ -1,6 +1,9 @@
-- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", 'Runners'
+- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('Runners')
 
-%h4 Runner ##{@runner.id}
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
-%hr
-  = render 'shared/runners/form', runner: @runner, runner_form_url: group_runner_path(@group, @runner)
+= render 'shared/runners/runner_type_alert', runner: @runner
+
+= render 'shared/runners/form', runner: @runner, runner_form_url: group_runner_path(@group, @runner)
diff --git a/app/views/groups/settings/_advanced.html.haml b/app/views/groups/settings/_advanced.html.haml
index fddb83114f3..d7a145924de 100644
--- a/app/views/groups/settings/_advanced.html.haml
+++ b/app/views/groups/settings/_advanced.html.haml
@@ -28,17 +28,17 @@
   %h4.warning-title= s_('GroupSettings|Transfer group')
   = form_for @group, url: transfer_group_path(@group), method: :put, html: { class: 'js-group-transfer-form' } do |f|
     .form-group
-      = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: 'Search groups', data: { data: parent_group_options(@group) } })
+      = dropdown_tag('Select parent group', options: { toggle_class: 'js-groups-dropdown', title: 'Parent Group', filter: true, dropdown_class: 'dropdown-open-top dropdown-group-transfer', placeholder: 'Search groups', data: { data: parent_group_options(@group), qa_selector: 'select_group_dropdown' } })
       = hidden_field_tag 'new_parent_group_id'
 
     %ul
-      - side_effects_link_start = '<a href="https://docs.gitlab.com/ee/user/project/index.html#redirects-when-changing-repository-paths" target="_blank">'
-      - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended %{side_effects_link_start}side effects%{side_effects_link_end}.") % { side_effects_link_start: side_effects_link_start, side_effects_link_end:'</a>' }
+      - side_effects_link_start = '<a href="https://docs.gitlab.com/ee/user/project/index.html#redirects-when-changing-repository-paths" target="_blank">'.html_safe
+      - warning_text = s_("GroupSettings|Be careful. Changing a group's parent can have unintended %{side_effects_link_start}side effects%{side_effects_link_end}.") % { side_effects_link_start: side_effects_link_start, side_effects_link_end: '</a>'.html_safe }
       %li= warning_text.html_safe
       %li= s_('GroupSettings|You can only transfer the group to a group you manage.')
       %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 current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
-    = f.submit s_('GroupSettings|Transfer group'), class: 'btn gl-button btn-warning'
+    = f.submit s_('GroupSettings|Transfer group'), class: 'btn gl-button btn-warning', data: { qa_selector: "transfer_group_button" }
 
 = render 'groups/settings/remove', group: @group
 = render_if_exists 'groups/settings/restore', group: @group
diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml
index f5cd7dde6a4..7a2d5c91af6 100644
--- a/app/views/groups/settings/_general.html.haml
+++ b/app/views/groups/settings/_general.html.haml
@@ -1,5 +1,3 @@
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f|
   %input{ type: 'hidden', name: 'update_section', value: 'js-general-settings' }
   = form_errors(@group)
@@ -28,7 +26,7 @@
     = render 'shared/choose_avatar_button', f: f
     - if @group.avatar?
       %hr
-      = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+      = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'
 
   = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
   = f.submit _('Save changes'), class: 'btn gl-button btn-confirm mt-4 js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }
diff --git a/app/views/groups/settings/_permanent_deletion.html.haml b/app/views/groups/settings/_permanent_deletion.html.haml
index 8bd47fbea44..125a20060ed 100644
--- a/app/views/groups/settings/_permanent_deletion.html.haml
+++ b/app/views/groups/settings/_permanent_deletion.html.haml
@@ -5,4 +5,5 @@
       = _('Removing this group also removes all child projects, including archived projects, and their resources.')
       %br
       %strong= _('Removed group can not be restored!')
-    = button_to _('Remove group'), '#', class: 'btn gl-button btn-danger js-confirm-danger', data: { 'confirm-danger-message' => remove_group_message(group) }
+
+    = render 'groups/settings/remove_button', group: group
diff --git a/app/views/groups/settings/_permissions.html.haml b/app/views/groups/settings/_permissions.html.haml
index dc20e796846..fcfe70bd694 100644
--- a/app/views/groups/settings/_permissions.html.haml
+++ b/app/views/groups/settings/_permissions.html.haml
@@ -8,28 +8,29 @@
       = render 'shared/allow_request_access', form: f
 
     .form-group.gl-mb-3
-      .form-check
-        = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'form-check-input'
-        = f.label :share_with_group_lock, class: 'form-check-label' do
-          %span.d-block
+      .gl-form-checkbox.custom-control.custom-checkbox
+        = f.check_box :share_with_group_lock, disabled: !can_change_share_with_group_lock?(@group), class: 'custom-control-input'
+        = f.label :share_with_group_lock, class: 'custom-control-label' do
+          %span
             - group_link = link_to @group.name, group_path(@group)
             = s_('GroupSettings|Prevent sharing a project within %{group} with other groups').html_safe % { group: group_link }
-          %span.js-descr.text-muted= share_with_group_lock_help_text(@group)
+          %p.js-descr.help-text= share_with_group_lock_help_text(@group)
 
     .form-group.gl-mb-3
-      .form-check
-        = f.check_box :emails_disabled, checked: @group.emails_disabled?, disabled: !can_disable_group_emails?(@group), class: 'form-check-input'
-        = f.label :emails_disabled, class: 'form-check-label' do
-          %span.d-block= s_('GroupSettings|Disable email notifications')
-          %span.text-muted= s_('GroupSettings|This setting will override user notification preferences for all members of the group, subgroups, and projects.')
+      .gl-form-checkbox.custom-control.custom-checkbox
+        = f.check_box :emails_disabled, checked: @group.emails_disabled?, disabled: !can_disable_group_emails?(@group), class: 'custom-control-input'
+        = f.label :emails_disabled, class: 'custom-control-label' do
+          %span= s_('GroupSettings|Disable email notifications')
+          %p.help-text= s_('GroupSettings|This setting will override user notification preferences for all members of the group, subgroups, and projects.')
 
     .form-group.gl-mb-3
-      .form-check
-        = f.check_box :mentions_disabled, checked: @group.mentions_disabled?, class: 'form-check-input'
-        = f.label :mentions_disabled, class: 'form-check-label' do
-          %span.d-block= s_('GroupSettings|Disable group mentions')
-          %span.text-muted= s_('GroupSettings|This setting will prevent group members from being notified if the group is mentioned.')
+      .gl-form-checkbox.custom-control.custom-checkbox
+        = f.check_box :mentions_disabled, checked: @group.mentions_disabled?, class: 'custom-control-input'
+        = f.label :mentions_disabled, class: 'custom-control-label' do
+          %span= s_('GroupSettings|Disable group mentions')
+          %p.help-text= s_('GroupSettings|This setting will prevent group members from being notified if the group is mentioned.')
 
+    = render 'groups/settings/project_access_token_creation', f: f, group: @group
     = render_if_exists 'groups/settings/delayed_project_removal', f: f, group: @group
     = render_if_exists 'groups/settings/ip_restriction', f: f, group: @group
     = render_if_exists 'groups/settings/allowed_email_domain', f: f, group: @group
diff --git a/app/views/groups/settings/_project_access_token_creation.html.haml b/app/views/groups/settings/_project_access_token_creation.html.haml
new file mode 100644
index 00000000000..8be17c6cc30
--- /dev/null
+++ b/app/views/groups/settings/_project_access_token_creation.html.haml
@@ -0,0 +1,10 @@
+- return unless render_setting_to_allow_project_access_token_creation?(group)
+
+.form-group.gl-mb-3
+  .gl-form-checkbox.custom-control.custom-checkbox
+    = f.check_box :resource_access_token_creation_allowed, checked: group.namespace_settings.resource_access_token_creation_allowed?, class: 'custom-control-input', data: { qa_selector: 'resource_access_token_creation_allowed_checkbox' }
+    = f.label :resource_access_token_creation_allowed, class: 'custom-control-label' do
+      %span= s_('GroupSettings|Allow project access token creation')
+      - project_access_tokens_link = help_page_path('user/project/settings/project_access_tokens')
+      - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: project_access_tokens_link }
+      %p.help-text= s_('GroupSettings|Users can create %{link_start}project access tokens%{link_end} for projects in this group.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
diff --git a/app/views/groups/settings/_remove_button.html.haml b/app/views/groups/settings/_remove_button.html.haml
new file mode 100644
index 00000000000..a04dba68b92
--- /dev/null
+++ b/app/views/groups/settings/_remove_button.html.haml
@@ -0,0 +1,7 @@
+- if group.paid?
+  .gl-alert.gl-alert-info.gl-mb-5{ data: { testid: 'group-has-linked-subscription-alert' } }
+    = sprite_icon('information-o', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+    .gl-alert-body
+      = 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/index', anchor: 'change-the-linked-namespace')}\">".html_safe, linkEnd: '</a>'.html_safe }
+
+= button_to _('Remove group'), '#', class: ['btn gl-button btn-danger js-confirm-danger', ('disabled' if group.paid?)], data: { 'confirm-danger-message' => remove_group_message(group), 'testid' => 'remove-group-button' }
diff --git a/app/views/groups/settings/applications/edit.html.haml b/app/views/groups/settings/applications/edit.html.haml
new file mode 100644
index 00000000000..cba4892eef9
--- /dev/null
+++ b/app/views/groups/settings/applications/edit.html.haml
@@ -0,0 +1,5 @@
+- page_title _("Edit"), @application.name, _("Group applications")
+- @content_class = "limit-container-width" unless fluid_layout
+
+%h3.page-title= _('Edit group application')
+= render 'shared/doorkeeper/applications/form', url: group_settings_application_path(@group, @application)
diff --git a/app/views/groups/settings/applications/index.html.haml b/app/views/groups/settings/applications/index.html.haml
new file mode 100644
index 00000000000..96f834bd271
--- /dev/null
+++ b/app/views/groups/settings/applications/index.html.haml
@@ -0,0 +1,8 @@
+- page_title _("Group applications")
+
+= render 'shared/doorkeeper/applications/index',
+        oauth_applications_enabled: user_oauth_applications?,
+        oauth_authorized_applications_enabled: false,
+        form_url: group_settings_applications_path(@group),
+        application_url: ->(application) { group_settings_application_path(@group, application) },
+        edit_application_url: ->(application) { edit_group_settings_application_path(@group, application) }
diff --git a/app/views/groups/settings/applications/show.html.haml b/app/views/groups/settings/applications/show.html.haml
new file mode 100644
index 00000000000..fce3602349b
--- /dev/null
+++ b/app/views/groups/settings/applications/show.html.haml
@@ -0,0 +1,9 @@
+- add_to_breadcrumbs _("Group applications"), group_settings_applications_path(@group)
+- breadcrumb_title @application.name
+- page_title @application.name, _("Group applications")
+- @content_class = "limit-container-width" unless fluid_layout
+
+%h3.page-title
+  = _("Group application: %{name}") % { name: @application.name }
+
+= render 'shared/doorkeeper/applications/show', edit_path: edit_group_settings_application_path(@group, @application), delete_path: group_settings_application_path(@group, @application)
diff --git a/app/views/groups/settings/ci_cd/show.html.haml b/app/views/groups/settings/ci_cd/show.html.haml
index 574750d5f57..3c6514b95b8 100644
--- a/app/views/groups/settings/ci_cd/show.html.haml
+++ b/app/views/groups/settings/ci_cd/show.html.haml
@@ -4,8 +4,6 @@
 - expanded = expanded_by_default?
 - general_expanded = @group.errors.empty? ? expanded : true
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 -# Given we only have one field in this form which is also admin-only,
 -# we don't want to show an empty section to non-admin users,
 - if can?(current_user, :update_max_artifacts_size, @group)
diff --git a/app/views/groups/settings/integrations/index.html.haml b/app/views/groups/settings/integrations/index.html.haml
index f62eb17d236..92b545cad0a 100644
--- a/app/views/groups/settings/integrations/index.html.haml
+++ b/app/views/groups/settings/integrations/index.html.haml
@@ -2,8 +2,8 @@
 - page_title _('Integrations')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-%h4= s_('GroupSettings|Apply integration settings to all Projects')
-%p
-  = s_('GroupSettings|Integrations configured here will automatically apply to all projects in this group.')
-  = link_to _('Learn more'), integrations_help_page_path, target: '_blank', rel: 'noopener noreferrer'
+%h3= s_('Integrations|Project integration management')
+
+- integrations_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: integrations_help_page_path }
+%p= s_('Integrations|As a GitLab administrator, you can set default configuration parameters for a given integration that all projects can inherit and use. When you set these parameters, your changes update the integration for all projects that are not already using custom settings. Learn more about %{integrations_link_start}Project 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/packages_and_registries/index.html.haml b/app/views/groups/settings/packages_and_registries/index.html.haml
index 21eef20a987..1a12ad4902b 100644
--- a/app/views/groups/settings/packages_and_registries/index.html.haml
+++ b/app/views/groups/settings/packages_and_registries/index.html.haml
@@ -2,6 +2,4 @@
 - page_title _('Packages & Registries')
 - @content_class = 'limit-container-width' unless fluid_layout
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 %section#js-packages-and-registries-settings{ data: { default_expanded: expanded_by_default?.to_s, group_path: @group.full_path } }
diff --git a/app/views/groups/settings/repository/show.html.haml b/app/views/groups/settings/repository/show.html.haml
index b15d36c631a..a5819320405 100644
--- a/app/views/groups/settings/repository/show.html.haml
+++ b/app/views/groups/settings/repository/show.html.haml
@@ -1,8 +1,6 @@
 - breadcrumb_title _('Repository Settings')
 - page_title _('Repository')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 - deploy_token_description = s_('DeployTokens|Group deploy tokens allow access to the packages, repositories, and registry images within the group.')
 
 = render "shared/deploy_tokens/index", group_or_project: @group, description: deploy_token_description
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index 03f8539293b..a56eaaf685f 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -13,19 +13,20 @@
 
 - unless Gitlab::CurrentSettings.help_page_hide_commercial_content?
   %p.slead
-    GitLab is open source software to collaborate on code.
+    = _('GitLab is open source software to collaborate on code.')
     %br
-    Manage git repositories with fine-grained access controls that keep your code secure.
+    = _('Manage git repositories with fine-grained access controls that keep your code secure.')
     %br
-    Perform code reviews and enhance collaboration with merge requests.
+    = _('Perform code reviews and enhance collaboration with merge requests.')
     %br
-    Each project can also have an issue tracker and a wiki.
+    = _('Each project can also have an issue tracker and a wiki.')
     %br
-    Used by more than 100,000 organizations, GitLab is the most popular solution to manage git repositories on-premises.
+    = _('Used by more than 100,000 organizations, GitLab is the most popular solution to manage git repositories on-premises.')
     %br
-    Read more about GitLab at #{link_to promo_host, promo_url, target: '_blank', rel: 'noopener noreferrer'}.
+    - link_to_promo = link_to(promo_host, promo_url, target: '_blank', rel: 'noopener noreferrer')
+    = _("Read more about GitLab at %{link_to_promo}.").html_safe % { link_to_promo: link_to_promo }
 
-%p= link_to 'Check the current instance configuration ', help_instance_configuration_url
+%p= link_to _('Check the current instance configuration '), help_instance_configuration_url
 %hr
 
 .row.gl-mt-3
@@ -35,15 +36,15 @@
   .col-md-4
     .card.links-card
       .card-header
-        Quick help
+        = _('Quick help')
       %ul.content-list
-        %li= link_to 'See our website for getting help', support_url
+        %li= link_to _('See our website for getting help'), support_url
         %li
           %button.btn-blank.btn-link.js-trigger-search-bar{ type: 'button' }
-            Use the search bar on the top of this page
+            = _('Use the search bar on the top of this page')
         %li
           %button.btn-blank.btn-link.js-trigger-shortcut{ type: 'button' }
-            Use shortcuts
+            = _('Use shortcuts')
         - unless Gitlab::CurrentSettings.help_page_hide_commercial_content?
-          %li= link_to 'Get a support subscription', 'https://about.gitlab.com/pricing/'
-          %li= link_to 'Compare GitLab editions', 'https://about.gitlab.com/features/#compare'
+          %li= link_to _('Get a support subscription'), 'https://about.gitlab.com/pricing/'
+          %li= link_to _('Compare GitLab editions'), 'https://about.gitlab.com/features/#compare'
diff --git a/app/views/help/instance_configuration.html.haml b/app/views/help/instance_configuration.html.haml
index 260566b1441..1cd05dcf65e 100644
--- a/app/views/help/instance_configuration.html.haml
+++ b/app/views/help/instance_configuration.html.haml
@@ -1,15 +1,15 @@
 - page_title _('Instance Configuration')
 .documentation.md
-  %h1 Instance Configuration
+  %h1= _('Instance Configuration')
 
   %p
-    In this page you will find information about the settings that are used in your current instance.
+    = _("In this page you will find information about the settings that are used in your current instance.")
 
   = render 'help/instance_configuration/ssh_info'
   = render 'help/instance_configuration/gitlab_pages'
   = render 'help/instance_configuration/gitlab_ci'
   %p
-    %strong Table of contents
+    %strong= _("Table of contents")
 
     %ul
       = content_for :table_content
diff --git a/app/views/help/instance_configuration/_gitlab_ci.html.haml b/app/views/help/instance_configuration/_gitlab_ci.html.haml
index 7fa8bd086d4..53fa3f89873 100644
--- a/app/views/help/instance_configuration/_gitlab_ci.html.haml
+++ b/app/views/help/instance_configuration/_gitlab_ci.html.haml
@@ -1,24 +1,24 @@
 - content_for :table_content do
-  %li= link_to 'GitLab CI', '#gitlab-ci'
+  %li= link_to _('GitLab CI'), '#gitlab-ci'
 
 - content_for :settings_content do
   %h2#gitlab-ci
-    GitLab CI
+    = _('GitLab CI')
 
   %p
-    Below are the current settings regarding
-    = succeed('.') { link_to('GitLab CI', 'https://about.gitlab.com/gitlab-ci', target: '_blank') }
+    = _('Below are the current settings regarding')
+    = succeed('.') { link_to(_('GitLab CI'), 'https://about.gitlab.com/gitlab-ci', target: '_blank') }
 
   .table-responsive
     %table
       %thead
         %tr
-          %th Setting
+          %th= _('Setting')
           %th= instance_configuration_host(@instance_configuration.settings[:host])
-          %th Default
+          %th= _('Default')
       %tbody
         %tr
           - artifacts_size = @instance_configuration.settings[:gitlab_ci][:artifacts_max_size]
-          %td Artifacts maximum size
+          %td= _('Artifacts maximum size')
           %td= instance_configuration_human_size_cell(artifacts_size[:value])
           %td= instance_configuration_human_size_cell(artifacts_size[:default])
diff --git a/app/views/help/instance_configuration/_gitlab_pages.html.haml b/app/views/help/instance_configuration/_gitlab_pages.html.haml
index 94c25edaf82..55f043214f6 100644
--- a/app/views/help/instance_configuration/_gitlab_pages.html.haml
+++ b/app/views/help/instance_configuration/_gitlab_pages.html.haml
@@ -1,35 +1,35 @@
 - gitlab_pages = @instance_configuration.settings[:gitlab_pages]
 - content_for :table_content do
-  %li= link_to 'GitLab Pages', '#gitlab-pages'
+  %li= link_to _('GitLab Pages'), '#gitlab-pages'
 
 - content_for :settings_content do
   %h2#gitlab-pages
-    GitLab Pages
+    = _('GitLab Pages')
 
   %p
-    Below are the settings for
-    = succeed('.') { link_to('GitLab Pages', gitlab_pages[:url], target: '_blank') }
+    - link_to_gitlab_pages = link_to(_('GitLab Pages'), gitlab_pages[:url], target: '_blank')
+    = _('Below are the settings for %{link_to_gitlab_pages}.').html_safe % { link_to_gitlab_pages: link_to_gitlab_pages }
   .table-responsive
     %table
       %thead
         %tr
-          %th Setting
+          %th= _('Setting')
           %th= instance_configuration_host(@instance_configuration.settings[:host])
       %tbody
         %tr
-          %td Domain Name
+          %td= _('Domain Name')
           %td
             %code= instance_configuration_cell_html(gitlab_pages[:host])
         %tr
-          %td IP Address
+          %td= _('IP Address')
           %td
             %code= instance_configuration_cell_html(gitlab_pages[:ip_address])
         %tr
-          %td Port
+          %td= _('Port')
           %td
             %code= instance_configuration_cell_html(gitlab_pages[:port])
   %br
 
   %p
-    The maximum size of your Pages site is regulated by the artifacts maximum
-    size which is part of #{succeed('.') { link_to('GitLab CI', '#gitlab-ci') }}
+    - link_to_gitlab_ci = link_to(_('GitLab CI'), '#gitlab-ci')
+    = _("The maximum size of your Pages site is regulated by the artifacts maximum size which is part of %{link_to_gitlab_ci}.").html_safe % { link_to_gitlab_ci: link_to_gitlab_ci }
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 47139917379..832289c3166 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -32,7 +32,7 @@
       %tbody
         - @user_map.each do |id, user|
           %tr
-            %td= (id)
+            %td= id
             %td= text_field_tag "users[#{id}][name]", user[:name], class: 'form-control'
             %td= text_field_tag "users[#{id}][email]", user[:email], class: 'form-control'
             %td
diff --git a/app/views/import/shared/_new_project_form.html.haml b/app/views/import/shared/_new_project_form.html.haml
index bfc4e65e23d..561c14dc68a 100644
--- a/app/views/import/shared/_new_project_form.html.haml
+++ b/app/views/import/shared/_new_project_form.html.haml
@@ -5,7 +5,7 @@
   .form-group.col-12.col-sm-6
     = label_tag :namespace_id, _('Project URL'), class: 'label-bold'
     .form-group
-      .input-group.flex-nowrap
+      .input-group.gl-flex-nowrap
         - if current_user.can_select_namespace?
           .input-group-prepend.flex-shrink-0.has-tooltip{ title: root_url }
             .input-group-text
diff --git a/app/views/invites/show.html.haml b/app/views/invites/show.html.haml
index 1492fea7fb2..ae13ef831dd 100644
--- a/app/views/invites/show.html.haml
+++ b/app/views/invites/show.html.haml
@@ -25,5 +25,5 @@
 
 - if !member?
   .actions
-    = link_to _("Accept invitation"), accept_invite_url(@token), method: :post, class: "btn gl-button btn-success"
+    = link_to _("Accept invitation"), accept_invite_url(@token), method: :post, class: "btn gl-button btn-confirm"
     = link_to _("Decline"), decline_invite_url(@token), method: :post, class: "btn gl-button btn-danger gl-ml-3"
diff --git a/app/views/jira_connect/subscriptions/index.html.haml b/app/views/jira_connect/subscriptions/index.html.haml
index c7873991010..43672551caf 100644
--- a/app/views/jira_connect/subscriptions/index.html.haml
+++ b/app/views/jira_connect/subscriptions/index.html.haml
@@ -10,7 +10,7 @@
 
 %main.jira-connect-app.gl-px-5.gl-pt-7.gl-mx-auto
   - if current_user.blank? && @subscriptions.empty?
-    .jira-connect-app-body.gl-text-center
+    .jira-connect-app-body.gl-px-5.gl-text-center
       %h2= s_('JiraService|GitLab for Jira Configuration')
       %p= s_('JiraService|Sign in to GitLab.com to get started.')
 
@@ -22,30 +22,11 @@
   - else
     .js-jira-connect-app{ data: jira_connect_app_data(@subscriptions) }
 
-    .jira-connect-app-body
-      - if @subscriptions.present?
-        %table.subscriptions.gl-w-full
-          %thead
-            %tr
-              %th= _('Namespace')
-              %th= _('Added')
-              %th
-          %tbody
-            - @subscriptions.each do |subscription|
-              %tr
-                %td= subscription.namespace.full_path
-                %td= subscription.created_at
-                %td= link_to _('Remove'), jira_connect_subscription_path(subscription), class: 'js-jira-connect-remove-subscription'
-      - else
-        .gl-text-center
-          %h4= s_('Integrations|No linked namespaces')
-          %p= s_('Integrations|Namespaces are your GitLab groups and subgroups that will be linked to this Jira instance.')
-
-  %p.jira-connect-app-body.gl-mt-7.gl-font-base.gl-text-center
+  %p.jira-connect-app-body.gl-px-5.gl-mt-7.gl-font-base.gl-text-center
     %strong= s_('Integrations|Browser limitations')
     - firefox_link_url = 'https://www.mozilla.org/en-US/firefox/'
     - firefox_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: firefox_link_url }
-    = s_('Integrations|Adding a namespace currently works only in browsers that allow cross‑site cookies. Please make sure to use %{firefox_link_start}Firefox%{firefox_link_end} or enable cross‑site cookies in your browser when adding a namespace.').html_safe % { firefox_link_start: firefox_link_start, firefox_link_end: '</a>'.html_safe }
+    = s_('Integrations|Adding a namespace works only in browsers that allow cross‑site cookies. Use %{firefox_link_start}Firefox%{firefox_link_end}, or enable cross‑site cookies in your browser, when adding a namespace.').html_safe % { firefox_link_start: firefox_link_start, firefox_link_end: '</a>'.html_safe }
     = link_to _('Learn more'), 'https://gitlab.com/gitlab-org/gitlab/-/issues/284211', target: '_blank', rel: 'noopener noreferrer'
 
 = webpack_bundle_tag 'performance_bar' if performance_bar_enabled?
diff --git a/app/views/jira_connect/users/show.html.haml b/app/views/jira_connect/users/show.html.haml
index 2ff92ab0dc8..cf88acd6976 100644
--- a/app/views/jira_connect/users/show.html.haml
+++ b/app/views/jira_connect/users/show.html.haml
@@ -1,11 +1,11 @@
 .jira-connect-users-container.gl-text-center
   - user_link = link_to(current_user.to_reference, user_path(current_user), target: '_blank', rel: 'noopener noreferrer')
-  %h2= _('You are signed into GitLab as %{user_link}').html_safe % { user_link: user_link }
+  %h2= _('You are signed in to GitLab as %{user_link}').html_safe % { user_link: user_link }
 
   %p= s_('Integrations|You can now close this window and return to the GitLab for Jira application.')
 
   - if @jira_app_link
-    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'btn btn-success'
+    %p= external_link s_('Integrations|Return to GitLab for Jira'), @jira_app_link, class: 'gl-button btn btn-confirm'
 
   %p= link_to _('Sign out'), destroy_user_session_path, method: :post
 
diff --git a/app/views/kaminari/gitlab/_page.html.haml b/app/views/kaminari/gitlab/_page.html.haml
index b000a490e3e..92df78f358d 100644
--- a/app/views/kaminari/gitlab/_page.html.haml
+++ b/app/views/kaminari/gitlab/_page.html.haml
@@ -10,5 +10,5 @@
   ('sibling' if page.next? || page.prev?),
   ('js-first-button' if page.first?),
   ('js-last-button' if page.last?),
-  ('d-none d-md-block' if !page.current?) ] }
+  ('d-none d-md-block' if !page.current?)] }
   = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: ['page-link', active_when(page.current?)] }
diff --git a/app/views/layouts/_flash.html.haml b/app/views/layouts/_flash.html.haml
index 35fefe40d39..433337602f1 100644
--- a/app/views/layouts/_flash.html.haml
+++ b/app/views/layouts/_flash.html.haml
@@ -1,5 +1,5 @@
 -# We currently only support `alert`, `notice`, `success`, 'toast'
-- icons = {'alert' => 'error', 'notice' => 'information-o', 'success' => 'check-circle'};
+- icons = {'alert' => 'error', 'notice' => 'information-o', 'success' => 'check-circle'}
 .flash-container.flash-container-page.sticky{ data: { qa_selector: 'flash_container' } }
   - flash.each do |key, value|
     - if key == 'toast' && value
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 601598d65da..6694ad5968a 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -52,6 +52,8 @@
 
   = stylesheet_link_tag 'performance_bar' if performance_bar_enabled?
 
+  -# Rendering this above Gon, to use in JS later
+  = render 'layouts/header/new_repo_experiment'
   = Gon::Base.render_data(nonce: content_security_policy_nonce)
 
   = javascript_include_tag locale_path unless I18n.locale == :en
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 1f2fcd1c70b..c91d27e3ed1 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -11,6 +11,7 @@
       = render "layouts/broadcast"
       = render "layouts/header/read_only_banner"
       = render "layouts/header/registration_enabled_callout"
+      = render "layouts/header/service_templates_deprecation_callout"
       = render "layouts/nav/classification_level_banner"
       = yield :flash_message
       = render "shared/ping_consent"
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index c902c687378..2032d1e95a6 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -25,7 +25,7 @@
     = hidden_field_tag :group_id, search_context.for_group? ? search_context.group.id : '', class: 'js-search-group-options', data: search_context.group_metadata
     = hidden_field_tag :project_id, search_context.for_project? ? search_context.project.id : '', id: 'search_project_id', class: 'js-search-project-options', data: search_context.project_metadata
 
-    - if search_context.for_project?
+    - if search_context.for_project? || search_context.for_group?
       = hidden_field_tag :scope, search_context.scope
       = hidden_field_tag :search_code, search_context.code_search?
 
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index 25fe4c898ca..57260ccedea 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -20,4 +20,10 @@
               history.back();
             });
           }
+
+          // We do not have rails_ujs here, so we're manually making a link trigger a form submit.
+          document.getElementById('sign_out_link').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('sign_out_form').submit();
+          });
         }());
diff --git a/app/views/layouts/group_settings.html.haml b/app/views/layouts/group_settings.html.haml
index 9db78ec58e4..c4e5e811280 100644
--- a/app/views/layouts/group_settings.html.haml
+++ b/app/views/layouts/group_settings.html.haml
@@ -1,4 +1,5 @@
 - page_title _("Settings")
 - nav "group"
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
 = render template: "layouts/group"
diff --git a/app/views/layouts/header/_current_user_dropdown.html.haml b/app/views/layouts/header/_current_user_dropdown.html.haml
index 5ac0db4137f..0251a8b6d7c 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.btn.menu-item.js-set-status-modal-trigger{ type: 'button' }
+      %button.gl-button.btn.btn-link.menu-item.js-set-status-modal-trigger{ type: 'button' }
         - if show_status_emoji?(current_user.status) || user_status_set_to_busy?(current_user.status)
           = s_('SetStatusModal|Edit status')
         - else
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index c54ad23c094..481e83c9701 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -2,7 +2,7 @@
 - user_status_data = user_status_properties(current_user)
 
 %header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { qa_selector: 'navbar' } }
-  %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
+  %a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
   .container-fluid
     .header-content
       .title-container
@@ -19,10 +19,13 @@
               %span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
                 = _('Next')
 
-        - if current_user
-          = render "layouts/nav/dashboard"
+        - if Feature.enabled?(:combined_menu, current_user, default_enabled: :yaml)
+          = render "layouts/nav/combined_menu"
         - else
-          = render "layouts/nav/explore"
+          - if current_user
+            = render "layouts/nav/dashboard"
+          - else
+            = render "layouts/nav/explore"
 
       .navbar-collapse.collapse
         %ul.nav.navbar-nav
@@ -110,14 +113,15 @@
             %li.nav-item
               %div
                 - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in')
-                = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in'
+                = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'gl-button btn btn-default btn-sign-in'
 
       %button.navbar-toggler.d-block.d-sm-none{ type: 'button' }
         %span.sr-only= _('Toggle navigation')
         = sprite_icon('ellipsis_h', size: 12, css_class: 'more-icon js-navbar-toggle-right')
         = sprite_icon('close', size: 12, css_class: 'close-icon js-navbar-toggle-left')
 
-#whats-new-app{ data: { storage_key: whats_new_storage_key, versions: whats_new_versions, gitlab_dot_com: Gitlab.dev_env_org_or_com? } }
+- if display_whats_new?
+  #whats-new-app{ data: { version_digest: whats_new_version_digest } }
 
 - if can?(current_user, :update_user_status, current_user)
   .js-set-status-modal-wrapper{ data: user_status_data }
diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.html.haml
index 1fc9831d271..7b49e6f716e 100644
--- a/app/views/layouts/header/_new_dropdown.haml
+++ b/app/views/layouts/header/_new_dropdown.html.haml
@@ -1,4 +1,4 @@
-%li.header-new.dropdown{ data: { track_label: "new_dropdown", track_event: "click_dropdown", track_value: "" } }
+%li.header-new.dropdown{ data: { track_label: "new_dropdown", track_event: "click_dropdown", track_experiment: "new_repo" } }
   = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip qa-new-menu-toggle", id: "js-onboarding-new-project-link", title: _("New..."), ref: 'tooltip', aria: { label: _("New...") }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static' } do
     = sprite_icon('plus-square')
     = sprite_icon('chevron-down', css_class: 'caret-down')
@@ -37,8 +37,7 @@
           = render 'layouts/header/project_invite_members_new_dropdown_item'
           %li.divider
           %li.dropdown-bold-header GitLab
-      - if current_user.can_create_project?
-        %li= link_to _('New project'), new_project_path, class: 'qa-global-new-project-link'
+      = content_for :new_repo_experiment
       - if current_user.can_create_group?
         %li= link_to _('New group'), new_group_path
       - if current_user.can?(:create_snippet)
diff --git a/app/views/layouts/header/_new_repo_experiment.html.haml b/app/views/layouts/header/_new_repo_experiment.html.haml
new file mode 100644
index 00000000000..73f960844cb
--- /dev/null
+++ b/app/views/layouts/header/_new_repo_experiment.html.haml
@@ -0,0 +1,7 @@
+- content_for :new_repo_experiment do
+  - if current_user&.can_create_project?
+    - experiment(:new_repo, user: current_user) do |e|
+      - e.use do
+        %li= link_to _('New project'), new_project_path, class: 'qa-global-new-project-link', data: { track_experiment: 'new_repo', track_event: 'click_link', track_label: 'plus_menu_dropdown' }
+      - e.try do
+        %li= link_to _('New project/repository'), new_project_path, class: 'qa-global-new-project-link', data: { track_experiment: 'new_repo', track_event: 'click_link', track_label: 'plus_menu_dropdown' }
diff --git a/app/views/layouts/header/_read_only_banner.html.haml b/app/views/layouts/header/_read_only_banner.html.haml
index f3d563c362f..86c1d34c0b7 100644
--- a/app/views/layouts/header/_read_only_banner.html.haml
+++ b/app/views/layouts/header/_read_only_banner.html.haml
@@ -2,6 +2,6 @@
 - if message
   .flash-container.flash-container-page
     .flash-notice
-      %div{ class: (container_class) }
+      %div{ class: container_class }
         %span
           = message
diff --git a/app/views/layouts/header/_service_templates_deprecation_callout.html.haml b/app/views/layouts/header/_service_templates_deprecation_callout.html.haml
new file mode 100644
index 00000000000..056d4426d5a
--- /dev/null
+++ b/app/views/layouts/header/_service_templates_deprecation_callout.html.haml
@@ -0,0 +1,21 @@
+- return unless show_service_templates_deprecated_callout?
+
+- doc_link_start = "<a href=\"#{integrations_help_page_path}\" target='_blank' rel='noopener noreferrer'>".html_safe
+- settings_link_start = "<a href=\"#{integrations_admin_application_settings_path}\">".html_safe
+
+%div{ class: [container_class, @content_class, 'gl-pt-5!'] }
+  .gl-alert.gl-alert-warning.js-service-templates-deprecated-callout{ role: 'alert', data: { feature_id: UserCalloutsHelper::SERVICE_TEMPLATES_DEPRECATED_CALLOUT, dismiss_endpoint: user_callouts_path } }
+    = sprite_icon('warning', size: 16, css_class: 'gl-alert-icon')
+    %button.gl-alert-dismiss.js-close{ type: 'button', aria: { label: _('Close') }, data: { testid: 'close-service-templates-deprecated-callout' } }
+      = sprite_icon('close', size: 16)
+    .gl-alert-title
+      = s_('AdminSettings|Service templates are deprecated and will be removed in GitLab 14.0.')
+    .gl-alert-body
+      = html_escape_once(s_('AdminSettings|You should migrate to %{doc_link_start}Project integration management%{link_end}, available at %{settings_link_start}Settings &gt; Integrations.%{link_end}')).html_safe % { doc_link_start: doc_link_start, settings_link_start: settings_link_start, link_end: '</a>'.html_safe }
+    .gl-alert-actions
+      = link_to admin_application_settings_services_path, class: 'btn gl-alert-action btn-info btn-md gl-button' do
+        %span.gl-button-text
+          = s_('AdminSettings|See affected service templates')
+      = link_to "https://gitlab.com/gitlab-org/gitlab/-/issues/325905", class: 'btn gl-alert-action btn-default btn-md gl-button', target: '_blank', rel: 'noopener noreferrer' do
+        %span.gl-button-text
+          = _('Leave feedback')
diff --git a/app/views/layouts/header/_whats_new_dropdown_item.html.haml b/app/views/layouts/header/_whats_new_dropdown_item.html.haml
index f79b741ced0..9fe98a54aae 100644
--- a/app/views/layouts/header/_whats_new_dropdown_item.html.haml
+++ b/app/views/layouts/header/_whats_new_dropdown_item.html.haml
@@ -1,5 +1,6 @@
-%li
-  %button.gl-justify-content-space-between.gl-align-items-center.js-whats-new-trigger{ type: 'button', data: { storage_key: whats_new_storage_key }, class: 'gl-display-flex!' }
-    = _("What's new")
-    %span.js-whats-new-notification-count.whats-new-notification-count
-      = whats_new_most_recent_release_items_count
+- if display_whats_new?
+  %li
+    %button.gl-justify-content-space-between.gl-align-items-center.js-whats-new-trigger{ type: 'button', class: 'gl-display-flex!' }
+      = _("What's new")
+      %span.js-whats-new-notification-count.whats-new-notification-count
+        = whats_new_most_recent_release_items_count
diff --git a/app/views/layouts/nav/_breadcrumbs.html.haml b/app/views/layouts/nav/_breadcrumbs.html.haml
index aeeffb6f4b6..c111714f552 100644
--- a/app/views/layouts/nav/_breadcrumbs.html.haml
+++ b/app/views/layouts/nav/_breadcrumbs.html.haml
@@ -9,7 +9,7 @@
       = button_tag class: 'toggle-mobile-nav', type: 'button' do
         %span.sr-only= _("Open sidebar")
         = sprite_icon('hamburger', size: 18)
-    .breadcrumbs-links.js-title-container{ data: { qa_selector: 'breadcrumb_links_content' } }
+    .breadcrumbs-links{ data: { testid: 'breadcrumb-links', qa_selector: 'breadcrumb_links_content' } }
       %ul.list-unstyled.breadcrumbs-list.js-breadcrumbs-list
         - unless hide_top_links
           = header_title
@@ -21,7 +21,7 @@
           %li
             %h2.breadcrumbs-sub-title
               = link_to @breadcrumb_title, breadcrumb_title_link
-    %script{ type:'application/ld+json' }
+    %script{ type: 'application/ld+json' }
       :plain
         #{schema_breadcrumb_json}
     = yield :header_content
diff --git a/app/views/layouts/nav/_combined_menu.html.haml b/app/views/layouts/nav/_combined_menu.html.haml
new file mode 100644
index 00000000000..db5a7012e8f
--- /dev/null
+++ b/app/views/layouts/nav/_combined_menu.html.haml
@@ -0,0 +1,3 @@
+%button{ type: 'button', data: { toggle: "dropdown" } }
+  = sprite_icon('ellipsis_v')
+  = _('Projects')
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 7cbef6b00b1..42e3ae7e717 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -2,7 +2,7 @@
 -# https://gitlab.com/gitlab-org/gitlab-foss/issues/49713 for more information.
 %ul.list-unstyled.navbar-sub-nav
   - if dashboard_nav_link?(:projects)
-    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown", data: { track_label: "projects_dropdown", track_event: "click_dropdown" } }) do
+    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown", data: { track_label: "projects_dropdown", track_event: "click_dropdown", track_experiment: "new_repo" } }) do
       %button{ type: 'button', data: { toggle: "dropdown" } }
         = _('Projects')
         = sprite_icon('chevron-down', css_class: 'caret-down')
@@ -50,7 +50,7 @@
             = nav_link(controller: 'admin/dashboard') do
               = link_to admin_root_path, class: 'admin-icon qa-admin-area-link d-xl-none' do
                 = _('Admin Area')
-          - if Feature.enabled?(:user_mode_in_session)
+          - if Gitlab::CurrentSettings.admin_mode
             - if header_link?(:admin_mode)
               = nav_link(controller: 'admin/sessions') do
                 = link_to destroy_admin_session_path, method: :post, class: 'd-lg-none lock-open-icon' do
@@ -69,7 +69,7 @@
       = link_to admin_root_path, class: 'admin-icon qa-admin-area-link', title: _('Admin Area'), aria: { label: _('Admin Area') }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
         = sprite_icon('admin', size: 18)
 
-  - if Feature.enabled?(:user_mode_in_session)
+  - if Gitlab::CurrentSettings.admin_mode
     - if header_link?(:admin_mode)
       = nav_link(controller: 'admin/sessions', html_options: { class: "d-none d-lg-block"}) do
         = link_to destroy_admin_session_path, method: :post, title: _('Leave Admin Mode'), aria: { label: _('Leave Admin Mode') }, data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
diff --git a/app/views/layouts/nav/projects_dropdown/_show.html.haml b/app/views/layouts/nav/projects_dropdown/_show.html.haml
index d8bf64fab64..b95a9cdb00f 100644
--- a/app/views/layouts/nav/projects_dropdown/_show.html.haml
+++ b/app/views/layouts/nav/projects_dropdown/_show.html.haml
@@ -11,14 +11,21 @@
       = nav_link(path: 'projects#trending') do
         = link_to explore_root_path, data: { track_label: "projects_dropdown_explore_projects", track_event: "click_link" } do
           = _('Explore projects')
-      = nav_link(path: 'projects/new#blank_project',
-          html_options: { class: 'gl-border-0 gl-border-t-1 gl-border-solid gl-border-gray-100' },
-          data: { track_label: "projects_dropdown_blank_project", track_event: "click_link" }) do
-        = link_to new_project_path(anchor: 'blank_project') do
-          = _('Create blank project')
-      = nav_link(path: 'projects/new#import_project') do
-        = link_to new_project_path(anchor: 'import_project'), data: { track_label: "projects_dropdown_import_project", track_event: "click_link" } do
-          = _('Import project')
+      - experiment(:new_repo, user: current_user) do |e|
+        - e.use do
+          = nav_link(path: 'projects/new#blank_project', html_options: { class: 'gl-border-0 gl-border-t-1 gl-border-solid gl-border-gray-100' }) do
+            = link_to new_project_path(anchor: 'blank_project'), data: { track_label: "projects_dropdown_blank_project", track_event: "click_link", track_experiment: "new_repo" } do
+              = _('Create blank project')
+          = nav_link(path: 'projects/new#import_project') do
+            = link_to new_project_path(anchor: 'import_project'), data: { track_label: "projects_dropdown_import_project", track_event: "click_link", track_experiment: "new_repo" } do
+              = _('Import project')
+        - e.try do
+          = nav_link(path: 'projects/new#blank_project', html_options: { class: 'gl-border-0 gl-border-t-1 gl-border-solid gl-border-gray-100' }) do
+            = link_to new_project_path(anchor: 'blank_project'), data: { track_label: "projects_dropdown_blank_project", track_event: "click_link", track_experiment: "new_repo" } do
+              = _('Create blank project/repository')
+          = nav_link(path: 'projects/new#import_project') do
+            = link_to new_project_path(anchor: 'import_project'), data: { track_label: "projects_dropdown_import_project", track_event: "click_link", track_experiment: "new_repo" } do
+              = _('Import project/repository')
       = nav_link(path: 'projects/new#create_from_template') do
         = link_to new_project_path(anchor: 'create_from_template'), data: { track_label: "projects_dropdown_create_from_template", track_event: "click_link" } do
           = _('Create from template')
diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml
index 7350db64462..41bec996de1 100644
--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/app/views/layouts/nav/sidebar/_group.html.haml
@@ -1,9 +1,9 @@
-- issues_count = group_open_issues_count(@group)
-- merge_requests_count = group_merge_requests_count(state: 'opened')
+- issues_count = cached_issuables_count(@group, type: :issues)
+- merge_requests_count = group_open_merge_requests_count(@group)
 - aside_title = @group.subgroup? ? _('Subgroup navigation') : _('Group navigation')
 - overview_title = @group.subgroup? ? _('Subgroup overview') : _('Group overview')
 
-%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('groups_side_navigation', 'render', 'groups_side_navigation'), 'aria-label': aside_title }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(@group), 'aria-label': aside_title }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do
@@ -91,14 +91,14 @@
             .nav-icon-container
               = sprite_icon('git-merge')
             %span.nav-item-name
-              = _('Merge Requests')
-            %span.badge.badge-pill.count= number_with_delimiter(merge_requests_count)
+              = _('Merge requests')
+            %span.badge.badge-pill.count= merge_requests_count
           %ul.sidebar-sub-level-items.is-fly-out-only
             = nav_link(path: 'groups#merge_requests', html_options: { class: "fly-out-top-item" } ) do
               = link_to merge_requests_group_path(@group) do
                 %strong.fly-out-top-item-name
-                  = _('Merge Requests')
-                %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= number_with_delimiter(merge_requests_count)
+                  = _('Merge requests')
+                %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge= merge_requests_count
 
       = render_if_exists "layouts/nav/ee/security_link" # EE-specific
 
@@ -145,7 +145,7 @@
             %span.nav-item-name.qa-group-settings-item
               = _('Settings')
           %ul.sidebar-sub-level-items.qa-group-sidebar-submenu{ data: { testid: 'group-settings-menu' } }
-            = nav_link(path: %w[groups#projects groups#edit badges#index ci_cd#show], html_options: { class: "fly-out-top-item" } ) do
+            = nav_link(path: %w[groups#projects groups#edit badges#index ci_cd#show groups/applications#index], html_options: { class: "fly-out-top-item" } ) do
               = link_to edit_group_path(@group) do
                 %strong.fly-out-top-item-name
                   = _('Settings')
@@ -175,6 +175,11 @@
                 %span
                   = _('CI/CD')
 
+            = nav_link(controller: :applications) do
+              = link_to group_settings_applications_path(@group), title: _('Applications') do
+                %span
+                  = _('Applications')
+
             = render 'groups/sidebar/packages_settings'
 
             = render_if_exists "groups/ee/settings_nav"
diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml
index 4ae81d69c16..dda5e6b9636 100644
--- a/app/views/layouts/nav/sidebar/_profile.html.haml
+++ b/app/views/layouts/nav/sidebar/_profile.html.haml
@@ -1,4 +1,4 @@
-%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('user_side_navigation', 'render', 'user_side_navigation'), 'aria-label': _('User settings') }
+%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(current_user), 'aria-label': _('User settings') }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 4c331dbd69d..3d0c6baffd5 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -1,469 +1,3 @@
-%aside.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?), **tracking_attrs('projects_side_navigation', 'render', 'projects_side_navigation'), 'aria-label': _('Project navigation') }
-  .nav-sidebar-inner-scroll
-    .context-header
-      = link_to project_path(@project), title: @project.name do
-        .avatar-container.rect-avatar.s40.project-avatar
-          = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile', width: 40, height: 40)
-        .sidebar-context-title
-          = @project.name
-    %ul.sidebar-top-level-items.qa-project-sidebar
-      = nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do
-        = link_to project_path(@project), class: 'shortcuts-project rspec-project-link', data: { qa_selector: 'project_link' } do
-          .nav-icon-container
-            = sprite_icon('home')
-          %span.nav-item-name
-            = _('Project overview')
-
-        %ul.sidebar-sub-level-items
-          = nav_link(path: 'projects#show', html_options: { class: "fly-out-top-item" } ) do
-            = link_to project_path(@project) do
-              %strong.fly-out-top-item-name
-                = _('Project overview')
-          %li.divider.fly-out-top-item
-          = nav_link(path: 'projects#show') do
-            = link_to project_path(@project), title: _('Project details'), class: 'shortcuts-project' do
-              %span= _('Details')
-
-          = nav_link(path: 'projects#activity') do
-            = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity', data: { qa_selector: 'activity_link' } do
-              %span= _('Activity')
-
-          - if project_nav_tab?(:releases)
-            = nav_link(controller: :releases) do
-              = link_to project_releases_path(@project), title: _('Releases'), class: 'shortcuts-project-releases' do
-                %span= _('Releases')
-
-      - if project_nav_tab? :learn_gitlab
-        = nav_link(controller: :learn_gitlab, html_options: { class: 'home' }) do
-          = link_to project_learn_gitlab_path(@project) do
-            .nav-icon-container
-              = sprite_icon('home')
-            %span.nav-item-name
-              = _('Learn GitLab')
-
-      - if project_nav_tab? :files
-        = nav_link(controller: sidebar_repository_paths, unless: -> { current_path?('projects/graphs#charts') }) do
-          = link_to project_tree_path(@project), class: 'shortcuts-tree', data: { qa_selector: "repository_link" } do
-            .nav-icon-container
-              = sprite_icon('doc-text')
-            %span.nav-item-name#js-onboarding-repo-link
-              = _('Repository')
-
-          %ul.sidebar-sub-level-items
-            = nav_link(controller: sidebar_repository_paths, html_options: { class: "fly-out-top-item" } ) do
-              = link_to project_tree_path(@project) do
-                %strong.fly-out-top-item-name
-                  = _('Repository')
-            %li.divider.fly-out-top-item
-            = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
-              = link_to project_tree_path(@project) do
-                = _('Files')
-
-            = nav_link(controller: [:commit, :commits]) do
-              = link_to project_commits_path(@project, current_ref), id: 'js-onboarding-commits-link' do
-                = _('Commits')
-
-            = nav_link(html_options: {class: branches_tab_class}) do
-              = link_to project_branches_path(@project), data: { qa_selector: "branches_link" }, id: 'js-onboarding-branches-link' do
-                = _('Branches')
-
-            = nav_link(controller: [:tags]) do
-              = link_to project_tags_path(@project), data: { qa_selector: "tags_link" } do
-                = _('Tags')
-
-            = nav_link(path: 'graphs#show') do
-              = link_to project_graph_path(@project, current_ref) do
-                = _('Contributors')
-
-            = nav_link(controller: %w(network)) do
-              = link_to project_network_path(@project, current_ref) do
-                = _('Graph')
-
-            = nav_link(controller: :compare) do
-              = link_to project_compare_index_path(@project, from: @repository.root_ref, to: current_ref) do
-                = _('Compare')
-
-            = render_if_exists 'projects/sidebar/repository_locked_files'
-
-      - if project_nav_tab? :issues
-        = nav_link(controller: @project.issues_enabled? ? ['projects/issues', :labels, :milestones, :boards, :iterations] : 'projects/issues') do
-          = link_to project_issues_path(@project), class: 'shortcuts-issues qa-issues-item' do
-            .nav-icon-container
-              = sprite_icon('issues')
-            %span.nav-item-name#js-onboarding-issues-link
-              = _('Issues')
-            - if @project.issues_enabled?
-              %span.badge.badge-pill.count.issue_counter
-                = number_with_delimiter(@project.open_issues_count(current_user))
-
-          %ul.sidebar-sub-level-items
-            = nav_link(controller: 'projects/issues', action: :index, html_options: { class: "fly-out-top-item" } ) do
-              = link_to project_issues_path(@project) do
-                %strong.fly-out-top-item-name
-                  = _('Issues')
-                - if @project.issues_enabled?
-                  %span.badge.badge-pill.count.issue_counter.fly-out-badge
-                    = number_with_delimiter(@project.open_issues_count(current_user))
-            %li.divider.fly-out-top-item
-            = nav_link(controller: :issues, action: :index) do
-              = link_to project_issues_path(@project), title: _('Issues') do
-                %span
-                  = _('List')
-
-            = nav_link(controller: :boards) do
-              = link_to project_boards_path(@project), title: boards_link_text, data: { qa_selector: "issue_boards_link" } do
-                %span
-                  = boards_link_text
-
-            = nav_link(controller: :labels) do
-              = link_to project_labels_path(@project), title: _('Labels'), class: 'qa-labels-link' do
-                %span
-                  = _('Labels')
-
-            = render 'projects/sidebar/issues_service_desk'
-
-            = nav_link(controller: :milestones) do
-              = link_to project_milestones_path(@project), title: _('Milestones'), class: 'qa-milestones-link' do
-                %span
-                  = _('Milestones')
-
-            = render_if_exists 'layouts/nav/sidebar/project_iterations_link'
-
-      - if project_nav_tab?(:external_issue_tracker)
-        - issue_tracker = @project.external_issue_tracker
-        - if issue_tracker.is_a?(JiraService) && project_jira_issues_integration?
-          = render_if_exists 'layouts/nav/sidebar/project_jira_issues_link', issue_tracker: issue_tracker
-        - else
-          = nav_link do
-            = link_to issue_tracker.issue_tracker_path, target: '_blank', rel: 'noopener noreferrer', class: 'shortcuts-external_tracker' do
-              .nav-icon-container
-                = sprite_icon('external-link')
-              %span.nav-item-name
-                = issue_tracker.title
-            %ul.sidebar-sub-level-items.is-fly-out-only
-              = nav_link(html_options: { class: "fly-out-top-item" } ) do
-                = link_to issue_tracker.issue_tracker_path, target: '_blank', rel: 'noopener noreferrer' do
-                  %strong.fly-out-top-item-name
-                    = issue_tracker.title
-
-      - if (project_nav_tab? :labels) && !@project.issues_enabled?
-        = nav_link(controller: [:labels]) do
-          = link_to project_labels_path(@project), title: _('Labels'), class: 'shortcuts-labels qa-labels-items' do
-            .nav-icon-container
-              = sprite_icon('label')
-            %span.nav-item-name#js-onboarding-labels-link
-              = _('Labels')
-
-      - if project_nav_tab? :merge_requests
-        = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :milestones]) do
-          = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests', data: { qa_selector: 'merge_requests_link' } do
-            .nav-icon-container
-              = sprite_icon('git-merge')
-            %span.nav-item-name#js-onboarding-mr-link
-              = _('Merge Requests')
-            %span.badge.badge-pill.count.merge_counter.js-merge-counter
-              = number_with_delimiter(@project.open_merge_requests_count)
-          %ul.sidebar-sub-level-items.is-fly-out-only
-            = nav_link(controller: :merge_requests, html_options: { class: "fly-out-top-item" } ) do
-              = link_to project_merge_requests_path(@project) do
-                %strong.fly-out-top-item-name
-                  = _('Merge Requests')
-                %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge
-                  = number_with_delimiter(@project.open_merge_requests_count)
-
-      = render_if_exists "layouts/nav/requirements_link", project: @project
-
-      - if project_nav_tab? :pipelines
-        = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], unless: -> { current_path?('projects/pipelines#charts') }) do
-          = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines qa-link-pipelines rspec-link-pipelines', data: { qa_selector: 'ci_cd_link' } do
-            .nav-icon-container
-              = sprite_icon('rocket')
-            %span.nav-item-name#js-onboarding-pipelines-link
-              = _('CI/CD')
-
-          %ul.sidebar-sub-level-items
-            = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], html_options: { class: "fly-out-top-item" }) do
-              = link_to project_pipelines_path(@project) do
-                %strong.fly-out-top-item-name
-                  =  _('CI/CD')
-            %li.divider.fly-out-top-item
-            - if project_nav_tab? :pipelines
-              = nav_link(path: ['pipelines#index', 'pipelines#show']) do
-                = link_to project_pipelines_path(@project), title: _('Pipelines'), class: 'shortcuts-pipelines' do
-                  %span
-                    = _('Pipelines')
-
-            - if can_view_pipeline_editor?(@project)
-              = nav_link(controller: :pipeline_editor, action: :show) do
-                = link_to project_ci_pipeline_editor_path(@project), title: s_('Pipelines|Editor') do
-                  %span
-                    = s_('Pipelines|Editor')
-
-            - if project_nav_tab? :builds
-              = nav_link(controller: :jobs) do
-                = link_to project_jobs_path(@project), title: _('Jobs'), class: 'shortcuts-builds' do
-                  %span
-                    = _('Jobs')
-
-              - if Feature.enabled?(:artifacts_management_page, @project)
-                = nav_link(controller: :artifacts, action: :index) do
-                  = link_to project_artifacts_path(@project), title: _('Artifacts'), class: 'shortcuts-builds' do
-                    %span
-                      = _('Artifacts')
-
-            - if project_nav_tab?(:pipelines)
-              = nav_link(controller: :pipeline_schedules) do
-                = link_to pipeline_schedules_path(@project), title: _('Schedules'), class: 'shortcuts-builds' do
-                  %span
-                    = _('Schedules')
-
-            = render_if_exists "layouts/nav/test_cases_link", project: @project
-
-      - if project_nav_tab? :security_and_compliance
-        = render_if_exists 'layouts/nav/sidebar/project_security_link' # EE-specific
-
-      - if project_nav_tab? :operations
-        = nav_link(controller: sidebar_operations_paths) do
-          = link_to sidebar_operations_link_path, class: 'shortcuts-operations', data: { qa_selector: 'operations_link' } do
-            .nav-icon-container
-              = sprite_icon('cloud-gear')
-            %span.nav-item-name
-              = _('Operations')
-
-          %ul.sidebar-sub-level-items
-            = nav_link(controller: sidebar_operations_paths, html_options: { class: "fly-out-top-item" } ) do
-              = link_to sidebar_operations_link_path do
-                %strong.fly-out-top-item-name
-                  =  _('Operations')
-            %li.divider.fly-out-top-item
-
-            - if project_nav_tab? :metrics_dashboards
-              = nav_link(controller: :metrics_dashboard, action: [:show]) do
-                = link_to project_metrics_dashboard_path(@project), title: _('Metrics'), class: 'shortcuts-metrics', data: { qa_selector: 'operations_metrics_link' } do
-                  %span
-                    = _('Metrics')
-
-            - if project_nav_tab?(:environments) && can?(current_user, :read_pod_logs, @project)
-              = nav_link(controller: :logs, action: [:index]) do
-                = link_to project_logs_path(@project), title: _('Logs') do
-                  %span
-                    = _('Logs')
-
-            - if project_nav_tab? :environments
-              = render "layouts/nav/sidebar/tracing_link"
-
-            - if project_nav_tab?(:error_tracking)
-              = nav_link(controller: :error_tracking) do
-                = link_to project_error_tracking_index_path(@project), title: _('Error Tracking') do
-                  %span
-                    = _('Error Tracking')
-
-            - if project_nav_tab?(:alert_management)
-              = nav_link(controller: :alert_management) do
-                = link_to project_alert_management_index_path(@project), title: _('Alerts') do
-                  %span
-                    = _('Alerts')
-
-            - if project_nav_tab?(:incidents)
-              = nav_link(controller: :incidents) do
-                = link_to project_incidents_path(@project), title: _('Incidents'), data: { qa_selector: 'operations_incidents_link' } do
-                  %span
-                    = _('Incidents')
-
-            = render_if_exists 'projects/sidebar/oncall_schedules'
-
-            - if project_nav_tab? :serverless
-              = nav_link(controller: :functions) do
-                = link_to project_serverless_functions_path(@project), title: _('Serverless') do
-                  %span
-                    = _('Serverless')
-
-            - if project_nav_tab? :terraform
-              = nav_link(controller: :terraform) do
-                = link_to project_terraform_index_path(@project), title: _('Terraform') do
-                  %span
-                    = _('Terraform')
-
-            - if project_nav_tab? :clusters
-              - show_cluster_hint = show_gke_cluster_integration_callout?(@project)
-              = nav_link(controller: [:cluster_agents, :clusters]) do
-                = link_to project_clusters_path(@project), title: _('Kubernetes'), class: 'shortcuts-kubernetes' do
-                  %span
-                    = _('Kubernetes')
-                  - if show_cluster_hint
-                    .js-feature-highlight{ disabled: true,
-                      data: { trigger: 'manual',
-                        container: 'body',
-                        placement: 'right',
-                        highlight: UserCalloutsHelper::GKE_CLUSTER_INTEGRATION,
-                        highlight_priority: UserCallout.feature_names[:GKE_CLUSTER_INTEGRATION],
-                        dismiss_endpoint: user_callouts_path,
-                        auto_devops_help_path: help_page_path('topics/autodevops/index.md') } }
-            - if project_nav_tab? :environments
-              = nav_link(controller: :environments, action: [:index, :folder, :show, :new, :edit, :create, :update, :stop, :terminal]) do
-                = link_to project_environments_path(@project), title: _('Environments'), class: 'shortcuts-environments qa-operations-environments-link' do
-                  %span
-                    = _('Environments')
-
-            - if project_nav_tab? :feature_flags
-              = nav_link(controller: :feature_flags) do
-                = link_to project_feature_flags_path(@project), title: _('Feature Flags'), class: 'shortcuts-feature-flags' do
-                  %span
-                    = _('Feature Flags')
-
-            - if project_nav_tab?(:product_analytics)
-              = nav_link(controller: :product_analytics) do
-                = link_to project_product_analytics_path(@project), title: _('Product Analytics') do
-                  %span
-                    = _('Product Analytics')
-
-      = render_if_exists 'layouts/nav/sidebar/project_packages_link'
-
-      - if project_nav_tab? :analytics
-        = render 'layouts/nav/sidebar/analytics_links', links: project_analytics_navbar_links(@project, current_user)
-
-      - if project_nav_tab?(:confluence)
-        - confluence_url = project_wikis_confluence_path(@project)
-        = nav_link do
-          = link_to confluence_url, class: 'shortcuts-confluence' do
-            .nav-icon-container
-              = image_tag 'confluence.svg', alt: _('Confluence')
-            %span.nav-item-name
-              = _('Confluence')
-          %ul.sidebar-sub-level-items.is-fly-out-only
-            = nav_link(html_options: { class: 'fly-out-top-item' } ) do
-              = link_to confluence_url, target: '_blank', rel: 'noopener noreferrer' do
-                %strong.fly-out-top-item-name
-                  = _('Confluence')
-
-      - if project_nav_tab? :wiki
-        = render 'layouts/nav/sidebar/wiki_link', wiki_url: wiki_path(@project.wiki)
-
-      - if project_nav_tab?(:external_wiki)
-        - external_wiki_url = @project.external_wiki.external_wiki_url
-        = nav_link do
-          = link_to external_wiki_url, class: 'shortcuts-external_wiki' do
-            .nav-icon-container
-              = sprite_icon('external-link')
-            %span.nav-item-name
-              = _('External Wiki')
-          %ul.sidebar-sub-level-items.is-fly-out-only
-            = nav_link(html_options: { class: "fly-out-top-item" } ) do
-              = link_to external_wiki_url do
-                %strong.fly-out-top-item-name
-                  = _('External Wiki')
-
-      - if project_nav_tab? :snippets
-        = nav_link(controller: :snippets) do
-          = link_to project_snippets_path(@project), class: 'shortcuts-snippets', data: { qa_selector: 'snippets_link' } do
-            .nav-icon-container
-              = sprite_icon('snippet')
-            %span.nav-item-name
-              = _('Snippets')
-          %ul.sidebar-sub-level-items.is-fly-out-only
-            = nav_link(controller: :snippets, html_options: { class: "fly-out-top-item" } ) do
-              = link_to project_snippets_path(@project) do
-                %strong.fly-out-top-item-name
-                  = _('Snippets')
-
-      = nav_link(controller: :project_members) do
-        = link_to project_project_members_path(@project), title: _('Members'), class: 'qa-members-link', id: 'js-onboarding-members-link' do
-          .nav-icon-container
-            = sprite_icon('users')
-          %span.nav-item-name
-            = _('Members')
-        %ul.sidebar-sub-level-items.is-fly-out-only
-          = nav_link(path: %w[members#show], html_options: { class: "fly-out-top-item" } ) do
-            = link_to project_project_members_path(@project) do
-              %strong.fly-out-top-item-name
-                = _('Members')
-
-      - if project_nav_tab? :settings
-        = nav_link(path: sidebar_settings_paths) do
-          = link_to edit_project_path(@project) do
-            .nav-icon-container
-              = sprite_icon('settings')
-            %span.nav-item-name.qa-settings-item#js-onboarding-settings-link
-              = _('Settings')
-
-          %ul.sidebar-sub-level-items
-            - can_edit = can?(current_user, :admin_project, @project)
-            - if can_edit
-              = nav_link(path: sidebar_settings_paths, html_options: { class: "fly-out-top-item" } ) do
-                = link_to edit_project_path(@project) do
-                  %strong.fly-out-top-item-name
-                    = _('Settings')
-              %li.divider.fly-out-top-item
-              = nav_link(path: %w[projects#edit]) do
-                = link_to edit_project_path(@project), title: _('General'), class: 'qa-general-settings-link' do
-                  %span
-                    = _('General')
-            - if can_edit
-              = nav_link(controller: [:integrations, :services]) do
-                = link_to project_settings_integrations_path(@project), title: _('Integrations'), data: { qa_selector: 'integrations_settings_link' } do
-                  %span
-                    = _('Integrations')
-              = nav_link(controller: [:hooks, :hook_logs]) do
-                = link_to project_hooks_path(@project), title: _('Webhooks'), data: { qa_selector: 'webhooks_settings_link' } do
-                  %span
-                    = _('Webhooks')
-              - if project_access_token_available?(@project)
-                = nav_link(controller: [:access_tokens]) do
-                  = link_to project_settings_access_tokens_path(@project), title: _('Access Tokens'), data: { qa_selector: 'access_tokens_settings_link' } do
-                    %span
-                      = _('Access Tokens')
-              = nav_link(controller: :repository) do
-                = link_to project_settings_repository_path(@project), title: _('Repository') do
-                  %span
-                    = _('Repository')
-              - if !@project.archived? && @project.feature_available?(:builds, current_user)
-                = nav_link(controller: :ci_cd) do
-                  = link_to project_settings_ci_cd_path(@project), title: _('CI/CD') do
-                    %span
-                      = _('CI/CD')
-              - if settings_operations_available?
-                = nav_link(controller: [:operations]) do
-                  = link_to project_settings_operations_path(@project), title: _('Operations'), data: { qa_selector: 'operations_settings_link' } do
-                    = _('Operations')
-              - if @project.pages_available?
-                = nav_link(controller: :pages) do
-                  = link_to project_pages_path(@project), title: _('Pages') do
-                    %span
-                      = _('Pages')
-
-      -# Shortcut to Project > Activity
-      %li.hidden
-        = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity' do
-          %span
-            = _('Activity')
-
-      -# Shortcut to Repository > Graph (formerly, Network)
-      - if project_nav_tab? :network
-        %li.hidden
-          = link_to project_network_path(@project, current_ref), title: _('Network'), class: 'shortcuts-network' do
-            = _('Graph')
-
-      -# Shortcut to Issues > New Issue
-      - if project_nav_tab?(:issues)
-        %li.hidden
-          = link_to new_project_issue_path(@project), class: 'shortcuts-new-issue' do
-            = _('Create a new issue')
-
-      -# Shortcut to Pipelines > Jobs
-      - if project_nav_tab? :builds
-        %li.hidden
-          = link_to project_jobs_path(@project), title: _('Jobs'), class: 'shortcuts-builds' do
-            = _('Jobs')
-
-      -# Shortcut to commits page
-      - if project_nav_tab? :commits
-        %li.hidden
-          = link_to project_commits_path(@project), title: _('Commits'), class: 'shortcuts-commits' do
-            = _('Commits')
-
-      -# Shortcut to issue boards
-      - if project_nav_tab?(:issues)
-        %li.hidden
-          = link_to _('Issue Boards'), project_boards_path(@project), title: _('Issue Boards'), class: 'shortcuts-issue-boards'
-
-    = render 'shared/sidebar_toggle_button'
+-# We're migration the project sidebar to a logical model based structure. If you need to update
+-# any of the existing menus, you can find them in app/views/layouts/nav/sidebar/_project_menus.html.haml.
+= render partial: 'shared/nav/sidebar', object: Sidebars::Projects::Panel.new(project_sidebar_context(@project, current_user, current_ref))
diff --git a/app/views/layouts/nav/sidebar/_project_menus.html.haml b/app/views/layouts/nav/sidebar/_project_menus.html.haml
new file mode 100644
index 00000000000..ed072c0f6a2
--- /dev/null
+++ b/app/views/layouts/nav/sidebar/_project_menus.html.haml
@@ -0,0 +1,380 @@
+- if project_nav_tab? :issues
+  = nav_link(controller: @project.issues_enabled? ? ['projects/issues', :labels, :milestones, :boards, :iterations] : 'projects/issues') do
+    = link_to project_issues_path(@project), class: 'shortcuts-issues qa-issues-item' do
+      .nav-icon-container
+        = sprite_icon('issues')
+      %span.nav-item-name#js-onboarding-issues-link
+        = _('Issues')
+      - if @project.issues_enabled?
+        %span.badge.badge-pill.count.issue_counter
+          = number_with_delimiter(@project.open_issues_count(current_user))
+
+    %ul.sidebar-sub-level-items
+      = nav_link(controller: 'projects/issues', action: :index, html_options: { class: "fly-out-top-item" } ) do
+        = link_to project_issues_path(@project) do
+          %strong.fly-out-top-item-name
+            = _('Issues')
+          - if @project.issues_enabled?
+            %span.badge.badge-pill.count.issue_counter.fly-out-badge
+              = number_with_delimiter(@project.open_issues_count(current_user))
+      %li.divider.fly-out-top-item
+      = nav_link(controller: :issues, action: :index) do
+        = link_to project_issues_path(@project), title: _('Issues') do
+          %span
+            = _('List')
+
+      = nav_link(controller: :boards) do
+        = link_to project_boards_path(@project), title: boards_link_text, data: { qa_selector: "issue_boards_link" } do
+          %span
+            = boards_link_text
+
+      = nav_link(controller: :labels) do
+        = link_to project_labels_path(@project), title: _('Labels'), class: 'qa-labels-link' do
+          %span
+            = _('Labels')
+
+      = render 'projects/sidebar/issues_service_desk'
+
+      = nav_link(controller: :milestones) do
+        = link_to project_milestones_path(@project), title: _('Milestones'), class: 'qa-milestones-link' do
+          %span
+            = _('Milestones')
+
+      = render_if_exists 'layouts/nav/sidebar/project_iterations_link'
+
+- if project_nav_tab?(:external_issue_tracker)
+  - issue_tracker = @project.external_issue_tracker
+  - if issue_tracker.is_a?(JiraService) && project_jira_issues_integration?
+    = render_if_exists 'layouts/nav/sidebar/project_jira_issues_link', issue_tracker: issue_tracker
+  - else
+    = nav_link do
+      = link_to issue_tracker.issue_tracker_path, target: '_blank', rel: 'noopener noreferrer', class: 'shortcuts-external_tracker' do
+        .nav-icon-container
+          = sprite_icon('external-link')
+        %span.nav-item-name
+          = issue_tracker.title
+      %ul.sidebar-sub-level-items.is-fly-out-only
+        = nav_link(html_options: { class: "fly-out-top-item" } ) do
+          = link_to issue_tracker.issue_tracker_path, target: '_blank', rel: 'noopener noreferrer' do
+            %strong.fly-out-top-item-name
+              = issue_tracker.title
+
+- if (project_nav_tab? :labels) && !@project.issues_enabled?
+  = nav_link(controller: [:labels]) do
+    = link_to project_labels_path(@project), title: _('Labels'), class: 'shortcuts-labels qa-labels-items' do
+      .nav-icon-container
+        = sprite_icon('label')
+      %span.nav-item-name#js-onboarding-labels-link
+        = _('Labels')
+
+- if project_nav_tab? :merge_requests
+  = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :milestones]) do
+    = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests', data: { qa_selector: 'merge_requests_link' } do
+      .nav-icon-container
+        = sprite_icon('git-merge')
+      %span.nav-item-name#js-onboarding-mr-link
+        = _('Merge requests')
+      %span.badge.badge-pill.count.merge_counter.js-merge-counter
+        = number_with_delimiter(@project.open_merge_requests_count)
+    %ul.sidebar-sub-level-items.is-fly-out-only
+      = nav_link(controller: :merge_requests, html_options: { class: "fly-out-top-item" } ) do
+        = link_to project_merge_requests_path(@project) do
+          %strong.fly-out-top-item-name
+            = _('Merge requests')
+          %span.badge.badge-pill.count.merge_counter.js-merge-counter.fly-out-badge
+            = number_with_delimiter(@project.open_merge_requests_count)
+
+= render_if_exists "layouts/nav/requirements_link", project: @project
+
+- if project_nav_tab? :pipelines
+  = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], unless: -> { current_path?('projects/pipelines#charts') }) do
+    = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines qa-link-pipelines rspec-link-pipelines', data: { qa_selector: 'ci_cd_link' } do
+      .nav-icon-container
+        = sprite_icon('rocket')
+      %span.nav-item-name#js-onboarding-pipelines-link
+        = _('CI/CD')
+
+    %ul.sidebar-sub-level-items
+      = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :artifacts, :test_cases, :pipeline_editor], html_options: { class: "fly-out-top-item" }) do
+        = link_to project_pipelines_path(@project) do
+          %strong.fly-out-top-item-name
+            =  _('CI/CD')
+      %li.divider.fly-out-top-item
+      - if project_nav_tab? :pipelines
+        = nav_link(path: ['pipelines#index', 'pipelines#show']) do
+          = link_to project_pipelines_path(@project), title: _('Pipelines'), class: 'shortcuts-pipelines' do
+            %span
+              = _('Pipelines')
+
+      - if can_view_pipeline_editor?(@project)
+        = nav_link(controller: :pipeline_editor, action: :show) do
+          = link_to project_ci_pipeline_editor_path(@project), title: s_('Pipelines|Editor') do
+            %span
+              = s_('Pipelines|Editor')
+
+      - if project_nav_tab? :builds
+        = nav_link(controller: :jobs) do
+          = link_to project_jobs_path(@project), title: _('Jobs'), class: 'shortcuts-builds' do
+            %span
+              = _('Jobs')
+
+        - if Feature.enabled?(:artifacts_management_page, @project)
+          = nav_link(controller: :artifacts, action: :index) do
+            = link_to project_artifacts_path(@project), title: _('Artifacts'), class: 'shortcuts-builds' do
+              %span
+                = _('Artifacts')
+
+      - if project_nav_tab?(:pipelines)
+        = nav_link(controller: :pipeline_schedules) do
+          = link_to pipeline_schedules_path(@project), title: _('Schedules'), class: 'shortcuts-builds' do
+            %span
+              = _('Schedules')
+
+      = render_if_exists "layouts/nav/test_cases_link", project: @project
+
+- if project_nav_tab? :security_and_compliance
+  = render_if_exists 'layouts/nav/sidebar/project_security_link' # EE-specific
+
+- if project_nav_tab? :operations
+  = nav_link(controller: sidebar_operations_paths) do
+    = link_to sidebar_operations_link_path, class: 'shortcuts-operations', data: { qa_selector: 'operations_link' } do
+      .nav-icon-container
+        = sprite_icon('cloud-gear')
+      %span.nav-item-name
+        = _('Operations')
+
+    %ul.sidebar-sub-level-items
+      = nav_link(controller: sidebar_operations_paths, html_options: { class: "fly-out-top-item" } ) do
+        = link_to sidebar_operations_link_path do
+          %strong.fly-out-top-item-name
+            =  _('Operations')
+      %li.divider.fly-out-top-item
+
+      - if project_nav_tab? :metrics_dashboards
+        = nav_link(controller: :metrics_dashboard, action: [:show]) do
+          = link_to project_metrics_dashboard_path(@project), title: _('Metrics'), class: 'shortcuts-metrics', data: { qa_selector: 'operations_metrics_link' } do
+            %span
+              = _('Metrics')
+
+      - if project_nav_tab?(:environments) && can?(current_user, :read_pod_logs, @project)
+        = nav_link(controller: :logs, action: [:index]) do
+          = link_to project_logs_path(@project), title: _('Logs') do
+            %span
+              = _('Logs')
+
+      - if project_nav_tab? :environments
+        = render "layouts/nav/sidebar/tracing_link"
+
+      - if project_nav_tab?(:error_tracking)
+        = nav_link(controller: :error_tracking) do
+          = link_to project_error_tracking_index_path(@project), title: _('Error Tracking') do
+            %span
+              = _('Error Tracking')
+
+      - if project_nav_tab?(:alert_management)
+        = nav_link(controller: :alert_management) do
+          = link_to project_alert_management_index_path(@project), title: _('Alerts') do
+            %span
+              = _('Alerts')
+
+      - if project_nav_tab?(:incidents)
+        = nav_link(controller: :incidents) do
+          = link_to project_incidents_path(@project), title: _('Incidents'), data: { qa_selector: 'operations_incidents_link' } do
+            %span
+              = _('Incidents')
+
+      = render_if_exists 'projects/sidebar/oncall_schedules'
+
+      - if project_nav_tab? :serverless
+        = nav_link(controller: :functions) do
+          = link_to project_serverless_functions_path(@project), title: _('Serverless') do
+            %span
+              = _('Serverless')
+
+      - if project_nav_tab? :terraform
+        = nav_link(controller: :terraform) do
+          = link_to project_terraform_index_path(@project), title: _('Terraform') do
+            %span
+              = _('Terraform')
+
+      - if project_nav_tab? :clusters
+        - show_cluster_hint = show_gke_cluster_integration_callout?(@project)
+        = nav_link(controller: [:cluster_agents, :clusters]) do
+          = link_to project_clusters_path(@project), title: _('Kubernetes'), class: 'shortcuts-kubernetes' do
+            %span
+              = _('Kubernetes')
+            - if show_cluster_hint
+              .js-feature-highlight{ disabled: true,
+                data: { trigger: 'manual',
+                  container: 'body',
+                  placement: 'right',
+                  highlight: UserCalloutsHelper::GKE_CLUSTER_INTEGRATION,
+                  highlight_priority: UserCallout.feature_names[:GKE_CLUSTER_INTEGRATION],
+                  dismiss_endpoint: user_callouts_path,
+                  auto_devops_help_path: help_page_path('topics/autodevops/index.md') } }
+      - if project_nav_tab? :environments
+        = nav_link(controller: :environments, action: [:index, :folder, :show, :new, :edit, :create, :update, :stop, :terminal]) do
+          = link_to project_environments_path(@project), title: _('Environments'), class: 'shortcuts-environments qa-operations-environments-link' do
+            %span
+              = _('Environments')
+
+      - if project_nav_tab? :feature_flags
+        = nav_link(controller: :feature_flags) do
+          = link_to project_feature_flags_path(@project), title: _('Feature Flags'), class: 'shortcuts-feature-flags' do
+            %span
+              = _('Feature Flags')
+
+      - if project_nav_tab?(:product_analytics)
+        = nav_link(controller: :product_analytics) do
+          = link_to project_product_analytics_path(@project), title: _('Product Analytics') do
+            %span
+              = _('Product Analytics')
+
+= render_if_exists 'layouts/nav/sidebar/project_packages_link'
+
+- if project_nav_tab? :analytics
+  = render 'layouts/nav/sidebar/analytics_links', links: project_analytics_navbar_links(@project, current_user)
+
+- if project_nav_tab?(:confluence)
+  - confluence_url = project_wikis_confluence_path(@project)
+  = nav_link do
+    = link_to confluence_url, class: 'shortcuts-confluence' do
+      .nav-icon-container
+        = image_tag 'confluence.svg', alt: _('Confluence')
+      %span.nav-item-name
+        = _('Confluence')
+    %ul.sidebar-sub-level-items.is-fly-out-only
+      = nav_link(html_options: { class: 'fly-out-top-item' } ) do
+        = link_to confluence_url, target: '_blank', rel: 'noopener noreferrer' do
+          %strong.fly-out-top-item-name
+            = _('Confluence')
+
+- if project_nav_tab? :wiki
+  = render 'layouts/nav/sidebar/wiki_link', wiki_url: wiki_path(@project.wiki)
+
+- if project_nav_tab?(:external_wiki)
+  - external_wiki_url = @project.external_wiki.external_wiki_url
+  = nav_link do
+    = link_to external_wiki_url, class: 'shortcuts-external_wiki' do
+      .nav-icon-container
+        = sprite_icon('external-link')
+      %span.nav-item-name
+        = s_('ExternalWikiService|External wiki')
+    %ul.sidebar-sub-level-items.is-fly-out-only
+      = nav_link(html_options: { class: "fly-out-top-item" } ) do
+        = link_to external_wiki_url do
+          %strong.fly-out-top-item-name
+            = s_('ExternalWikiService|External wiki')
+
+- if project_nav_tab? :snippets
+  = nav_link(controller: :snippets) do
+    = link_to project_snippets_path(@project), class: 'shortcuts-snippets', data: { qa_selector: 'snippets_link' } do
+      .nav-icon-container
+        = sprite_icon('snippet')
+      %span.nav-item-name
+        = _('Snippets')
+    %ul.sidebar-sub-level-items.is-fly-out-only
+      = nav_link(controller: :snippets, html_options: { class: "fly-out-top-item" } ) do
+        = link_to project_snippets_path(@project) do
+          %strong.fly-out-top-item-name
+            = _('Snippets')
+
+= nav_link(controller: :project_members) do
+  = link_to project_project_members_path(@project), title: _('Members'), class: 'qa-members-link', id: 'js-onboarding-members-link' do
+    .nav-icon-container
+      = sprite_icon('users')
+    %span.nav-item-name
+      = _('Members')
+  %ul.sidebar-sub-level-items.is-fly-out-only
+    = nav_link(path: %w[members#show], html_options: { class: "fly-out-top-item" } ) do
+      = link_to project_project_members_path(@project) do
+        %strong.fly-out-top-item-name
+          = _('Members')
+
+- if project_nav_tab? :settings
+  = nav_link(path: sidebar_settings_paths) do
+    = link_to edit_project_path(@project) do
+      .nav-icon-container
+        = sprite_icon('settings')
+      %span.nav-item-name.qa-settings-item#js-onboarding-settings-link
+        = _('Settings')
+
+    %ul.sidebar-sub-level-items
+      - can_edit = can?(current_user, :admin_project, @project)
+      - if can_edit
+        = nav_link(path: sidebar_settings_paths, html_options: { class: "fly-out-top-item" } ) do
+          = link_to edit_project_path(@project) do
+            %strong.fly-out-top-item-name
+              = _('Settings')
+        %li.divider.fly-out-top-item
+        = nav_link(path: %w[projects#edit]) do
+          = link_to edit_project_path(@project), title: _('General'), class: 'qa-general-settings-link' do
+            %span
+              = _('General')
+      - if can_edit
+        = nav_link(controller: [:integrations, :services]) do
+          = link_to project_settings_integrations_path(@project), title: _('Integrations'), data: { qa_selector: 'integrations_settings_link' } do
+            %span
+              = _('Integrations')
+        = nav_link(controller: [:hooks, :hook_logs]) do
+          = link_to project_hooks_path(@project), title: _('Webhooks'), data: { qa_selector: 'webhooks_settings_link' } do
+            %span
+              = _('Webhooks')
+        - if can?(current_user, :read_resource_access_tokens, @project)
+          = nav_link(controller: [:access_tokens]) do
+            = link_to project_settings_access_tokens_path(@project), title: _('Access Tokens'), data: { qa_selector: 'access_tokens_settings_link' } do
+              %span
+                = _('Access Tokens')
+        = nav_link(controller: :repository) do
+          = link_to project_settings_repository_path(@project), title: _('Repository') do
+            %span
+              = _('Repository')
+        - if !@project.archived? && @project.feature_available?(:builds, current_user)
+          = nav_link(controller: :ci_cd) do
+            = link_to project_settings_ci_cd_path(@project), title: _('CI/CD') do
+              %span
+                = _('CI/CD')
+        - if settings_operations_available?
+          = nav_link(controller: [:operations]) do
+            = link_to project_settings_operations_path(@project), title: _('Operations'), data: { qa_selector: 'operations_settings_link' } do
+              = _('Operations')
+        - if @project.pages_available?
+          = nav_link(controller: :pages) do
+            = link_to project_pages_path(@project), title: _('Pages') do
+              %span
+                = _('Pages')
+
+-# Shortcut to Project > Activity
+%li.hidden
+  = link_to activity_project_path(@project), title: _('Activity'), class: 'shortcuts-project-activity' do
+    %span
+      = _('Activity')
+
+-# Shortcut to Repository > Graph (formerly, Network)
+- if project_nav_tab? :network
+  %li.hidden
+    = link_to project_network_path(@project, current_ref), title: _('Network'), class: 'shortcuts-network' do
+      = _('Graph')
+
+-# Shortcut to Issues > New Issue
+- if project_nav_tab?(:issues)
+  %li.hidden
+    = link_to new_project_issue_path(@project), class: 'shortcuts-new-issue' do
+      = _('Create a new issue')
+
+-# Shortcut to Pipelines > Jobs
+- if project_nav_tab? :builds
+  %li.hidden
+    = link_to project_jobs_path(@project), title: _('Jobs'), class: 'shortcuts-builds' do
+      = _('Jobs')
+
+-# Shortcut to commits page
+- if project_nav_tab? :commits
+  %li.hidden
+    = link_to project_commits_path(@project), title: _('Commits'), class: 'shortcuts-commits' do
+      = _('Commits')
+
+-# Shortcut to issue boards
+- if project_nav_tab?(:issues)
+  %li.hidden
+    = link_to _('Issue Boards'), project_boards_path(@project), title: _('Issue Boards'), class: 'shortcuts-issue-boards'
diff --git a/app/views/layouts/nav/sidebar/_project_packages_link.html.haml b/app/views/layouts/nav/sidebar/_project_packages_link.html.haml
index e9989abe5a0..b28468a7969 100644
--- a/app/views/layouts/nav/sidebar/_project_packages_link.html.haml
+++ b/app/views/layouts/nav/sidebar/_project_packages_link.html.haml
@@ -1,14 +1,14 @@
 - packages_link = project_nav_tab?(:packages) ? project_packages_path(@project) : project_container_registry_index_path(@project)
 
 - if (project_nav_tab?(:packages) || project_nav_tab?(:container_registry))
-  = nav_link controller: [:packages, :repositories] do
+  = nav_link controller: [:packages, :repositories, :infrastructure_registry] do
     = link_to packages_link, data: { qa_selector: 'packages_link' } do
       .nav-icon-container
         = sprite_icon('package')
       %span.nav-item-name
         = _('Packages & Registries')
     %ul.sidebar-sub-level-items
-      = nav_link(controller: [:packages, :repositories], html_options: { class: "fly-out-top-item" } ) do
+      = nav_link(controller: [:packages, :repositories, :infrastructure_registry], html_options: { class: "fly-out-top-item" } ) do
         = link_to packages_link do
           %strong.fly-out-top-item-name
             = _('Packages & Registries')
@@ -21,3 +21,7 @@
         = nav_link controller: :repositories do
           = link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry', title: _('Container Registry') do
             %span= _('Container Registry')
+      - if project_nav_tab? :infrastructure_registry
+        = nav_link controller: :infrastructure_registry do
+          = link_to project_infrastructure_registry_index_path(@project), title: _('Infrastructure Registry') do
+            %span= _('Infrastructure Registry')
diff --git a/app/views/layouts/project_settings.html.haml b/app/views/layouts/project_settings.html.haml
index 93214c2a674..97d9f2fbc78 100644
--- a/app/views/layouts/project_settings.html.haml
+++ b/app/views/layouts/project_settings.html.haml
@@ -1,4 +1,6 @@
 - page_title  _("Settings")
 - nav         "project"
 
+- enable_search_settings locals: { container_class: 'gl-my-5' }
+
 = render template: "layouts/project"
diff --git a/app/views/notify/_successful_pipeline.text.erb b/app/views/notify/_successful_pipeline.text.erb
index 628976e2dda..5798a2346fa 100644
--- a/app/views/notify/_successful_pipeline.text.erb
+++ b/app/views/notify/_successful_pipeline.text.erb
@@ -3,7 +3,7 @@
 Project: <%= @project.name %> ( <%= project_url(@project) %> )
 Branch: <%= @pipeline.source_ref %> ( <%= commits_url(@pipeline) %> )
 <% if @merge_request -%>
-Merge Request: <%= @merge_request.to_reference %> ( <%= merge_request_url(@merge_request) %> )
+Merge request: <%= @merge_request.to_reference %> ( <%= merge_request_url(@merge_request) %> )
 <% end -%>
 
 Commit: <%= @pipeline.short_sha %> ( <%= commit_url(@pipeline) %> )
diff --git a/app/views/notify/closed_merge_request_email.html.haml b/app/views/notify/closed_merge_request_email.html.haml
index 6caa0e59e8f..749584a7044 100644
--- a/app/views/notify/closed_merge_request_email.html.haml
+++ b/app/views/notify/closed_merge_request_email.html.haml
@@ -1,3 +1,3 @@
 %p
-  Merge Request #{merge_request_reference_link(@merge_request)}
+  Merge request #{merge_request_reference_link(@merge_request)}
   was closed by #{sanitize_name(@updated_by.name)}
diff --git a/app/views/notify/closed_merge_request_email.text.haml b/app/views/notify/closed_merge_request_email.text.haml
index 28766f861d9..942e771261a 100644
--- a/app/views/notify/closed_merge_request_email.text.haml
+++ b/app/views/notify/closed_merge_request_email.text.haml
@@ -1,6 +1,6 @@
-Merge Request #{@merge_request.to_reference} was closed by #{sanitize_name(@updated_by.name)}
+Merge request #{@merge_request.to_reference} was closed by #{sanitize_name(@updated_by.name)}
 
-Merge Request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
 = merge_path_description(@merge_request, 'to')
 
diff --git a/app/views/notify/merge_request_status_email.html.haml b/app/views/notify/merge_request_status_email.html.haml
index a15c5a752d4..49f2366c594 100644
--- a/app/views/notify/merge_request_status_email.html.haml
+++ b/app/views/notify/merge_request_status_email.html.haml
@@ -1,3 +1,3 @@
 %p
-  Merge Request #{merge_request_reference_link(@merge_request)}
+  Merge request #{merge_request_reference_link(@merge_request)}
   was #{@mr_status} by #{sanitize_name(@updated_by.name)}
diff --git a/app/views/notify/merge_request_status_email.text.haml b/app/views/notify/merge_request_status_email.text.haml
index ab663b65199..1a8f848218c 100644
--- a/app/views/notify/merge_request_status_email.text.haml
+++ b/app/views/notify/merge_request_status_email.text.haml
@@ -1,6 +1,6 @@
-Merge Request #{@merge_request.to_reference} was #{@mr_status} by #{sanitize_name(@updated_by.name)}
+Merge request #{@merge_request.to_reference} was #{@mr_status} by #{sanitize_name(@updated_by.name)}
 
-Merge Request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
 = merge_path_description(@merge_request, 'to')
 
diff --git a/app/views/notify/merge_request_unmergeable_email.html.haml b/app/views/notify/merge_request_unmergeable_email.html.haml
index ee459a26551..fddf9eaf95a 100644
--- a/app/views/notify/merge_request_unmergeable_email.html.haml
+++ b/app/views/notify/merge_request_unmergeable_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  Merge Request #{merge_request_reference_link(@merge_request)} can no longer be merged due to conflict.
+  Merge request #{merge_request_reference_link(@merge_request)} can no longer be merged due to conflict.
diff --git a/app/views/notify/merge_request_unmergeable_email.text.haml b/app/views/notify/merge_request_unmergeable_email.text.haml
index a23d083747c..3db5f21e6c2 100644
--- a/app/views/notify/merge_request_unmergeable_email.text.haml
+++ b/app/views/notify/merge_request_unmergeable_email.text.haml
@@ -1,6 +1,6 @@
-Merge Request #{@merge_request.to_reference} can no longer be merged due to conflict.
+Merge request #{@merge_request.to_reference} can no longer be merged due to conflict.
 
-Merge Request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
 = merge_path_description(@merge_request, 'to')
 
diff --git a/app/views/notify/merge_when_pipeline_succeeds_email.text.haml b/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
index de29dda6c71..568ca995e04 100644
--- a/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
+++ b/app/views/notify/merge_when_pipeline_succeeds_email.text.haml
@@ -1,6 +1,6 @@
-Merge Request #{@merge_request.to_reference} was scheduled to merge after pipeline succeeds by #{sanitize_name(@mwps_set_by.name)}
+Merge request #{@merge_request.to_reference} was scheduled to merge after pipeline succeeds by #{sanitize_name(@mwps_set_by.name)}
 
-Merge Request url: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request url: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
 = merge_path_description(@merge_request, 'to')
 
diff --git a/app/views/notify/merged_merge_request_email.html.haml b/app/views/notify/merged_merge_request_email.html.haml
index c84c0d1d14b..f0dadd9ce91 100644
--- a/app/views/notify/merged_merge_request_email.html.haml
+++ b/app/views/notify/merged_merge_request_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  Merge Request #{merge_request_reference_link(@merge_request)} was merged
+  Merge request #{merge_request_reference_link(@merge_request)} was merged
diff --git a/app/views/notify/merged_merge_request_email.text.haml b/app/views/notify/merged_merge_request_email.text.haml
index a8e07fa8d1c..91f920dec21 100644
--- a/app/views/notify/merged_merge_request_email.text.haml
+++ b/app/views/notify/merged_merge_request_email.text.haml
@@ -1,6 +1,6 @@
-Merge Request #{@merge_request.to_reference} was merged
+Merge request #{@merge_request.to_reference} was merged
 
-Merge Request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 
 = merge_path_description(@merge_request, 'to')
 
diff --git a/app/views/notify/new_mention_in_merge_request_email.html.haml b/app/views/notify/new_mention_in_merge_request_email.html.haml
index ddcf287e501..a28d944529f 100644
--- a/app/views/notify/new_mention_in_merge_request_email.html.haml
+++ b/app/views/notify/new_mention_in_merge_request_email.html.haml
@@ -1,4 +1,4 @@
 %p
-  You have been mentioned in Merge Request #{merge_request_reference_link(@merge_request)}
+  You have been mentioned in merge request #{merge_request_reference_link(@merge_request)}
 
 = render template: 'notify/new_merge_request_email'
diff --git a/app/views/notify/new_mention_in_merge_request_email.text.erb b/app/views/notify/new_mention_in_merge_request_email.text.erb
index 0121006852c..9ba86f17ef6 100644
--- a/app/views/notify/new_mention_in_merge_request_email.text.erb
+++ b/app/views/notify/new_mention_in_merge_request_email.text.erb
@@ -1,4 +1,4 @@
-You have been mentioned in Merge Request <%= @merge_request.to_reference %>
+You have been mentioned in merge request <%= @merge_request.to_reference %>
 
 <%= url_for(project_merge_request_url(@merge_request.target_project, @merge_request)) %>
 
diff --git a/app/views/notify/new_review_email.html.haml b/app/views/notify/new_review_email.html.haml
index ad870473681..11da7723d8d 100644
--- a/app/views/notify/new_review_email.html.haml
+++ b/app/views/notify/new_review_email.html.haml
@@ -1,4 +1,4 @@
-%table{ border: "0", cellpadding:"0", cellspacing: "0", style: "width:100%;margin:0 auto;border-collapse:separate;border-spacing:0;" }
+%table{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;margin:0 auto;border-collapse:separate;border-spacing:0;" }
   %tbody
     %tr
       %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;overflow:hidden;" }
diff --git a/app/views/notify/pipeline_failed_email.text.erb b/app/views/notify/pipeline_failed_email.text.erb
index 2deca375db1..1fe7d554bc3 100644
--- a/app/views/notify/pipeline_failed_email.text.erb
+++ b/app/views/notify/pipeline_failed_email.text.erb
@@ -3,7 +3,7 @@ Pipeline #<%= @pipeline.id %> has failed!
 Project: <%= @project.name %> ( <%= project_url(@project) %> )
 Branch: <%= @pipeline.source_ref %> ( <%= commits_url(@pipeline) %> )
 <% if @merge_request -%>
-Merge Request: <%= @merge_request.to_reference %> ( <%= merge_request_url(@merge_request) %> )
+Merge request: <%= @merge_request.to_reference %> ( <%= merge_request_url(@merge_request) %> )
 <% end -%>
 
 Commit: <%= @pipeline.short_sha %> ( <%= commit_url(@pipeline) %> )
diff --git a/app/views/notify/push_to_merge_request_email.text.haml b/app/views/notify/push_to_merge_request_email.text.haml
index 5c2005a47e5..8ab9cb0fb8d 100644
--- a/app/views/notify/push_to_merge_request_email.text.haml
+++ b/app/views/notify/push_to_merge_request_email.text.haml
@@ -1,6 +1,6 @@
 #{sanitize_name(@updated_by_user.name)} pushed new commits to merge request #{@merge_request.to_reference}
 
-Merge Request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
+Merge request URL: #{project_merge_request_url(@merge_request.target_project, @merge_request)}
 \
 - if @existing_commits.any?
   - count = @existing_commits.size
diff --git a/app/views/notify/reassigned_merge_request_email.text.erb b/app/views/notify/reassigned_merge_request_email.text.erb
index 2b51f48db3a..888b995b67c 100644
--- a/app/views/notify/reassigned_merge_request_email.text.erb
+++ b/app/views/notify/reassigned_merge_request_email.text.erb
@@ -1,4 +1,4 @@
-Reassigned Merge Request <%= @merge_request.iid %>
+Reassigned merge request <%= @merge_request.iid %>
 
 <%= url_for([@merge_request.project, @merge_request, { only_path: false }]) %>
 
diff --git a/app/views/notify/resolved_all_discussions_email.html.haml b/app/views/notify/resolved_all_discussions_email.html.haml
index 0b3c56c9bd1..209415e0aee 100644
--- a/app/views/notify/resolved_all_discussions_email.html.haml
+++ b/app/views/notify/resolved_all_discussions_email.html.haml
@@ -1,3 +1,3 @@
 %p
-  All discussions on Merge Request #{merge_request_reference_link(@merge_request)}
+  All discussions on merge request #{merge_request_reference_link(@merge_request)}
   were resolved by #{sanitize_name(@resolved_by.name)}
diff --git a/app/views/notify/resolved_all_discussions_email.text.erb b/app/views/notify/resolved_all_discussions_email.text.erb
index c4b36bfe1a8..226ea3fb445 100644
--- a/app/views/notify/resolved_all_discussions_email.text.erb
+++ b/app/views/notify/resolved_all_discussions_email.text.erb
@@ -1,3 +1,3 @@
-All discussions on Merge Request <%= @merge_request.to_reference %> were resolved by <%= sanitize_name(@resolved_by.name) %>
+All discussions on merge request <%= @merge_request.to_reference %> were resolved by <%= sanitize_name(@resolved_by.name) %>
 
 <%= url_for(project_merge_request_url(@merge_request.target_project, @merge_request)) %>
diff --git a/app/views/notify/ssh_key_expired_email.html.haml b/app/views/notify/ssh_key_expired_email.html.haml
new file mode 100644
index 00000000000..21138bb0113
--- /dev/null
+++ b/app/views/notify/ssh_key_expired_email.html.haml
@@ -0,0 +1,13 @@
+%p
+  = _('Hi %{username}!') % { username: sanitize_name(@user.name) }
+%p
+  = _('Your SSH keys with the following fingerprints has expired:')
+%table
+  %tbody
+    - @fingerprints.each do |fingerprint|
+      %tr
+        %td= fingerprint
+
+%p
+  - ssh_key_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: @target_url }
+  = html_escape(_('You can create a new one or check them in your %{ssh_key_link_start}SSH keys%{ssh_key_link_end} settings.')) % { ssh_key_link_start: ssh_key_link_start, ssh_key_link_end: '</a>'.html_safe }
diff --git a/app/views/notify/ssh_key_expired_email.text.erb b/app/views/notify/ssh_key_expired_email.text.erb
new file mode 100644
index 00000000000..77b76084606
--- /dev/null
+++ b/app/views/notify/ssh_key_expired_email.text.erb
@@ -0,0 +1,9 @@
+<%= _('Hi %{username}!') % { username: sanitize_name(@user.name) } %>
+
+<%= _('Your SSH keys with the following fingerprints has expired:') %>
+
+<% @fingerprints.each do |fingerprint| %>
+  - <%= fingerprint %>
+<% end %>
+
+<%= _('You can create a new one or check them in your SSH keys settings %{ssh_key_link}.') % { ssh_key_link: @target_url } %>
diff --git a/app/views/notify/ssh_key_expiring_soon.text.erb b/app/views/notify/ssh_key_expiring_soon.text.erb
new file mode 100644
index 00000000000..2a7c0cafe83
--- /dev/null
+++ b/app/views/notify/ssh_key_expiring_soon.text.erb
@@ -0,0 +1,9 @@
+<%= _('Hi %{username}!') % { username: sanitize_name(@user.name) } %>
+
+<%= _('Your SSH keys with the following fingerprints are scheduled to expire soon:') %>
+
+<% @fingerprints.each do |fingerprint| %>
+  - <%= fingerprint %>
+<% end %>
+
+<%= _('You can create a new one or check them in your SSH keys settings %{ssh_key_link}.') % { ssh_key_link: @target_url } %>
diff --git a/app/views/notify/ssh_key_expiring_soon_email.html.haml b/app/views/notify/ssh_key_expiring_soon_email.html.haml
new file mode 100644
index 00000000000..f4aee9c5fde
--- /dev/null
+++ b/app/views/notify/ssh_key_expiring_soon_email.html.haml
@@ -0,0 +1,13 @@
+%p
+  = _('Hi %{username}!') % { username: sanitize_name(@user.name) }
+%p
+  = _('Your SSH keys with the following fingerprints are scheduled to expire soon:')
+%table
+  %tbody
+    - @fingerprints.each do |fingerprint|
+      %tr
+        %td= fingerprint
+
+%p
+  - ssh_key_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: @target_url }
+  = html_escape(_('You can create a new one or check them in your %{ssh_key_link_start}SSH keys%{ssh_key_link_end} settings.')) % { ssh_key_link_start: ssh_key_link_start, ssh_key_link_end: '</a>'.html_safe }
diff --git a/app/views/notify/unknown_sign_in_email.html.haml b/app/views/notify/unknown_sign_in_email.html.haml
index 914242da5c6..8d0993e9ff8 100644
--- a/app/views/notify/unknown_sign_in_email.html.haml
+++ b/app/views/notify/unknown_sign_in_email.html.haml
@@ -44,9 +44,11 @@
           %td{ style: "#{default_style}text-align:center;" }
             - password_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://docs.gitlab.com/ee/user/profile/#changing-your-password' }
             = _('If you recently signed in and recognize the IP address, you may disregard this email.')
-            %p
-              = _('If you did not recently sign in, you should immediately %{password_link_start}change your password%{password_link_end}.').html_safe % { password_link_start: password_link_start, password_link_end: '</a>'.html_safe }
-              = _('Passwords should be unique and not used for any other sites or services.')
+
+            - if password_authentication_enabled_for_web?
+              %p
+                = _('If you did not recently sign in, you should immediately %{password_link_start}change your password%{password_link_end}.').html_safe % { password_link_start: password_link_start, password_link_end: '</a>'.html_safe }
+                = _('Passwords should be unique and not used for any other sites or services.')
 
             - unless @user.two_factor_enabled?
               %p
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index 1f09f3097ad..c4de47f276c 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -28,7 +28,7 @@
       = link_to _('Manage two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-confirm'
     - else
       .gl-mb-3
-        = link_to _('Enable two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-success', data: { qa_selector: 'enable_2fa_button' }
+        = link_to _('Enable two-factor authentication'), profile_two_factor_auth_path, class: 'gl-button btn btn-confirm', data: { qa_selector: 'enable_2fa_button' }
   .col-lg-12
     %hr
 
@@ -69,7 +69,7 @@
       = render 'users/deletion_guidance', user: current_user
 
       -# Delete button here
-      %button#delete-account-button.btn.btn-danger.disabled{ data: { qa_selector: 'delete_account_button' } }
+      %button#delete-account-button.gl-button.btn.btn-danger.disabled{ data: { qa_selector: 'delete_account_button' } }
         = s_('Profiles|Delete account')
 
       #delete-account-modal{ data: { action_url: user_registration_path,
diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
index 6805824cebc..ca895972b71 100644
--- a/app/views/profiles/chat_names/_chat_name.html.haml
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -6,7 +6,7 @@
       - if can?(current_user, :read_project, project)
         = link_to project.full_name, project_path(project)
       - else
-        .light N/A
+        .light= _('N/A')
   %td
     %strong
       - if can?(current_user, :admin_project, project)
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
index 4651854a551..f008abf376d 100644
--- a/app/views/profiles/chat_names/new.html.haml
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -8,7 +8,7 @@
   .actions
     = form_tag profile_chat_names_path, method: :post do
       = hidden_field_tag :token, @chat_name_token.token
-      = submit_tag _("Authorize"), class: "gl-button btn btn-success wide float-left"
+      = submit_tag _("Authorize"), class: "gl-button btn btn-confirm wide float-left"
     = form_tag deny_profile_chat_names_path, method: :delete do
       = hidden_field_tag :token, @chat_name_token.token
       = submit_tag _("Deny"), class: "gl-button btn btn-danger gl-ml-3"
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 89198b0a65b..d78b542ae8a 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -15,7 +15,7 @@
         = 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'), class: 'gl-button btn btn-success', data: { qa_selector: 'add_email_address_button' }
+        = f.submit _('Add email address'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'add_email_address_button' }
     %hr
     %h4.gl-mt-0
       = _('Linked emails (%{email_count})') % { email_count: @emails.load.size + 1 }
diff --git a/app/views/profiles/gpg_keys/_form.html.haml b/app/views/profiles/gpg_keys/_form.html.haml
index 7a7b5802cd8..9804a3b7735 100644
--- a/app/views/profiles/gpg_keys/_form.html.haml
+++ b/app/views/profiles/gpg_keys/_form.html.haml
@@ -4,7 +4,7 @@
 
     .form-group
       = f.label :key, s_('Profiles|Key'), class: 'label-bold'
-      = f.text_area :key, class: "form-control", rows: 8, required: true, placeholder: _("Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'.")
+      = f.text_area :key, class: "form-control gl-form-input", rows: 8, required: true, placeholder: _("Don't paste the private part of the GPG key. Paste the public part which begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'.")
 
     .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-success"
+      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-confirm"
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index c851601d4c3..ec48a611377 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -18,8 +18,8 @@
               %code= subkey.fingerprint
   .float-right
     %span.key-created-at
-      = s_('Profiles|Created %{time_ago}'.html_safe) % { time_ago:time_ago_with_tooltip(key.created_at)}
-    = link_to profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.') }, method: :delete, class: "gl-button btn btn-danger gl-ml-3" do
+      = s_('Profiles|Created %{time_ago}'.html_safe) % { time_ago: time_ago_with_tooltip(key.created_at) }
+    = link_to profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.') }, method: :delete, class: "gl-button btn btn-icon btn-danger gl-ml-3" do
       %span.sr-only= _('Remove')
       = sprite_icon('remove')
     = link_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-button btn btn-danger gl-ml-3" do
diff --git a/app/views/profiles/gpg_keys/index.html.haml b/app/views/profiles/gpg_keys/index.html.haml
index 053cb3547ba..bf9c77cb3ec 100644
--- a/app/views/profiles/gpg_keys/index.html.haml
+++ b/app/views/profiles/gpg_keys/index.html.haml
@@ -12,10 +12,10 @@
       = _('Add a GPG key')
     %p.profile-settings-content
       - 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') }
-      = _('Before you can add a GPG key you need to %{help_link_start}Generate it.%{help_link_end}'.html_safe) % {help_link_start: help_link_start, help_link_end:'</a>'.html_safe }
+      = _('Before you can add a GPG key you need to %{help_link_start}Generate it.%{help_link_end}'.html_safe) % {help_link_start: help_link_start, help_link_end: '</a>'.html_safe }
     = render 'form'
     %hr
     %h5
-      = _('Your GPG keys (%{count})') % { count:@gpg_keys.count}
+      = _('Your GPG keys (%{count})') % { count: @gpg_keys.count }
     .gl-mb-3
       = render 'key_table'
diff --git a/app/views/profiles/keys/_form.html.haml b/app/views/profiles/keys/_form.html.haml
index 81a543de7a3..35335f3ef80 100644
--- a/app/views/profiles/keys/_form.html.haml
+++ b/app/views/profiles/keys/_form.html.haml
@@ -15,13 +15,14 @@
       .col.form-group
         = f.label :expires_at, s_('Profiles|Expires at'), class: 'label-bold'
         = f.date_field :expires_at, class: "form-control input-lg", min: Date.tomorrow, data: { qa_selector: 'key_expiry_date_field' }
+        %p.form-text.text-muted{ data: { qa_selector: 'key_expiry_date_field_description' } }= ssh_key_expires_field_description
 
     .js-add-ssh-key-validation-warning.hide
       .bs-callout.bs-callout-warning{ role: 'alert', aria_live: 'assertive' }
         %strong= _('Oops, are you sure?')
-        %p= s_("Profiles|This doesn't look like a public SSH key, are you sure you want to add it? It will be publicly visible.")
+        %p= s_("Profiles|Publicly visible private SSH keys can compromise your system.")
 
-      %button.btn.gl-button.btn-success.js-add-ssh-key-validation-confirm-submit= _("Yes, add it")
+      %button.btn.gl-button.btn-confirm.js-add-ssh-key-validation-confirm-submit= _("Yes, add it")
 
     .gl-mt-3
-      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-success js-add-ssh-key-validation-original-submit qa-add-key-button"
+      = f.submit s_('Profiles|Add key'), class: "gl-button btn btn-confirm js-add-ssh-key-validation-original-submit qa-add-key-button"
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index cc2e2a30052..4eb321050ad 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -1,3 +1,5 @@
+- 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
@@ -5,15 +7,11 @@
         = key.title
 
       .gl-display-flex.gl-align-items-center.gl-mt-2
-        - if key.valid?
-          - if key.expired?
-            %span.gl-display-inline-block.has-tooltip{ title: s_('Profiles|Your key has expired') }
-              = sprite_icon('warning-solid', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
-          - else
-            = sprite_icon('key', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
+        - if key.valid? && !key.expired?
+          = sprite_icon('key', css_class: icon_classes)
         - else
-          %span.gl-display-inline-block.has-tooltip{ title: key.errors.full_messages.join(', ') }
-            = sprite_icon('warning-solid', css_class: 'settings-list-icon gl-display-none gl-sm-display-block')
+          %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
@@ -25,7 +23,7 @@
           = s_('Profiles|Last used:')
           = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : _('Never')
         %span.expires.gl-mr-3
-          = s_('Profiles|Expires:')
+          = key.expired? ? s_('Profiles|Expired:') : s_('Profiles|Expires:')
           = key.expires_at ? key.expires_at.to_date : _('Never')
     %span.key-created-at.gl-display-flex.gl-align-items-center
       - if key.can_delete?
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 80027cdfed0..69b8d2ddafe 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -19,6 +19,6 @@
     = render 'form'
     %hr
     %h5
-      = _('Your SSH keys (%{count})') % { count:@keys.count }
+      = _('Your SSH keys (%{count})') % { count: @keys.count }
     .gl-mb-3
       = render 'key_table'
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index b281dbb4367..2cc919fc70e 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -30,6 +30,6 @@
         = f.label :password_confirmation, _('Password confirmation'), class: 'label-bold'
         = f.password_field :password_confirmation, required: true, class: 'form-control gl-form-input', data: { qa_selector: 'confirm_password_field' }
       .gl-mt-3.gl-mb-3
-        = f.submit _('Save password'), class: "gl-button btn btn-success gl-mr-3", data: { qa_selector: 'save_password_button' }
+        = f.submit _('Save password'), class: "gl-button btn btn-confirm gl-mr-3", data: { qa_selector: 'save_password_button' }
         - unless @user.password_automatically_set?
           = link_to _('I forgot my password'), reset_profile_password_path, method: :put
diff --git a/app/views/profiles/passwords/new.html.haml b/app/views/profiles/passwords/new.html.haml
index ffec6baa20e..efcd0bb621f 100644
--- a/app/views/profiles/passwords/new.html.haml
+++ b/app/views/profiles/passwords/new.html.haml
@@ -28,4 +28,4 @@
     .col-sm-10
       = f.password_field :password_confirmation, required: true, class: 'form-control gl-form-input'
   .form-actions
-    = f.submit _('Set new password'), class: 'gl-button btn btn-success'
+    = f.submit _('Set new password'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 7995231c739..15544fb9c45 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -33,7 +33,7 @@
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
       .gl-mt-2.gl-mb-3
         %button.gl-button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
-        %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
+        %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
       .form-text.text-muted= s_("Profiles|The maximum file size allowed is 200KB.")
       - if @user.avatar?
@@ -84,7 +84,7 @@
     .col-lg-8
       -# TODO: might need an entry in user/profile.md to describe some of these settings
       -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
-      %h5= ("Time zone")
+      %h5= _("Time zone")
       = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
       %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }
     .col-lg-12
@@ -127,7 +127,7 @@
         = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
   .row.gl-mt-3.gl-mb-3.gl-justify-content-end
     .col-lg-8
-      = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-success'
+      = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-confirm'
       = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'
 
 .modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 3853f428447..a9134057777 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -51,7 +51,7 @@
             = label_tag :pin_code, _('Pin code'), class: "label-bold"
             = text_field_tag :pin_code, nil, class: "form-control", required: true, data: { qa_selector: 'pin_code_field' }
           .gl-mt-3
-            = submit_tag _('Register with two-factor app'), class: 'gl-button btn btn-success', data: { qa_selector: 'register_2fa_app_button' }
+            = submit_tag _('Register with two-factor app'), class: 'gl-button btn btn-confirm', data: { qa_selector: 'register_2fa_app_button' }
 
   %hr
 
diff --git a/app/views/projects/_commit_button.html.haml b/app/views/projects/_commit_button.html.haml
index 87c0933747d..4b41231ba20 100644
--- a/app/views/projects/_commit_button.html.haml
+++ b/app/views/projects/_commit_button.html.haml
@@ -1,5 +1,5 @@
 .form-actions
-  = button_tag 'Commit changes', id: 'commit-changes', class: 'gl-button btn btn-success js-commit-button  qa-commit-button'
+  = button_tag 'Commit changes', id: 'commit-changes', class: 'gl-button btn btn-confirm js-commit-button  qa-commit-button'
 
   = link_to 'Cancel', cancel_path,
             class: 'gl-button btn btn-default btn-cancel', data: {confirm: leave_edit_message}
diff --git a/app/views/projects/_customize_workflow.html.haml b/app/views/projects/_customize_workflow.html.haml
index 8e4e5ca93e0..ded43a34b48 100644
--- a/app/views/projects/_customize_workflow.html.haml
+++ b/app/views/projects/_customize_workflow.html.haml
@@ -5,4 +5,4 @@
     %p
       Get started with GitLab by enabling features that work best for your project. From issues and wikis, to merge requests and pipelines, GitLab can help manage your workflow from idea to production!
     - if can?(current_user, :admin_project, @project)
-      = link_to "Get started", edit_project_path(@project), class: "gl-button btn btn-success"
+      = link_to "Get started", edit_project_path(@project), class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 30d885964b5..0369ee50c40 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -21,5 +21,4 @@
 
   #js-tree-list{ data: vue_file_list_data(project, ref) }
   - if can_edit_tree?
-    = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
     = render 'projects/blob/new_dir'
diff --git a/app/views/projects/_fork_suggestion.html.haml b/app/views/projects/_fork_suggestion.html.haml
index 59c9c279a39..9888ce417f8 100644
--- a/app/views/projects/_fork_suggestion.html.haml
+++ b/app/views/projects/_fork_suggestion.html.haml
@@ -5,6 +5,6 @@
       edit
     files in this project directly. Please fork this project,
     make your changes there, and submit a merge request.
-  = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-inverted btn-success'
+  = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-confirm-secondary'
   %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
     Cancel
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index f5eea9aa9c6..b2380a3ba57 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -6,19 +6,20 @@
 .project-home-panel.js-show-on-project-root.gl-my-5{ class: [("empty-project" if empty_repo)] }
   .gl-display-flex.gl-justify-content-space-between.gl-flex-wrap.gl-sm-flex-direction-column.gl-mb-3
     .home-panel-title-row.gl-display-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-flex-shrink-0.gl-w-11.gl-h-11.gl-mr-3.float-none
+      %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')
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline
-          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-font-size-h1.gl-line-height-24.gl-font-weight-bold{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
+          %h1.home-panel-title.gl-mt-3.gl-mb-2.gl-font-size-h1.gl-line-height-24.gl-font-weight-bold.gl-ml-3{ data: { qa_selector: 'project_name_content' }, itemprop: 'name' }
             = @project.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
               = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
         .home-panel-metadata.d-flex.flex-wrap.text-secondary.gl-font-base.gl-font-weight-normal.gl-line-height-normal
           - if can?(current_user, :read_project, @project)
-            %span.text-secondary{ itemprop: 'identifier', data: { qa_selector: 'project_id_content' } }
-              = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+            - button_class = "btn gl-button btn-sm btn-tertiary btn-default-tertiary home-panel-metadata"
+            - button_text = s_('ProjectPage|Project ID: %{project_id}') % { project_id: @project.id }
+            = clipboard_button(title: s_('ProjectPage|Copy project ID'), text: @project.id, hide_button_icon: true, button_text: button_text, class: button_class, qa_selector: 'project_id_content', itemprop: 'identifier')
           - if current_user
             %span.access-request-links.gl-ml-3
               = render 'shared/members/access_request_links', source: @project
diff --git a/app/views/projects/_invite_members.html.haml b/app/views/projects/_invite_members.html.haml
index ef030cabc93..e3a512d6451 100644
--- a/app/views/projects/_invite_members.html.haml
+++ b/app/views/projects/_invite_members.html.haml
@@ -4,5 +4,5 @@
   = s_('InviteMember|Invite your team')
 %p= s_('InviteMember|Add members to this project and start collaborating with your team.')
 = link_to s_('InviteMember|Invite members'), project_project_members_path(@project, sort: :access_level_desc),
-        class: 'gl-button btn btn-success gl-mb-8 gl-xs-w-full',
+        class: 'gl-button btn btn-confirm gl-mb-8 gl-xs-w-full',
         data: { track_event: 'click_button', track_label: 'invite_members_empty_project' }
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index a54eb2dddac..f595b4f709b 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -9,3 +9,6 @@
 = render 'projects/merge_request_merge_checks_settings', project: @project, form: form
 
 = render 'projects/merge_request_merge_suggestions_settings', project: @project, form: form
+
+- if @project.forked?
+  = render 'projects/merge_request_target_project_settings', project: @project, form: form
diff --git a/app/views/projects/_merge_request_target_project_settings.html.haml b/app/views/projects/_merge_request_target_project_settings.html.haml
new file mode 100644
index 00000000000..41d37884ac9
--- /dev/null
+++ b/app/views/projects/_merge_request_target_project_settings.html.haml
@@ -0,0 +1,23 @@
+- return unless @project.mr_can_target_upstream? && can?(current_user, :read_project, @project.forked_from_project)
+
+- form = local_assigns.fetch(:form)
+
+= form.fields_for :project_setting do |settings|
+  .form-group
+    %b= s_('ProjectSettings|Target project')
+    %p.text-secondary
+      = s_('ProjectSettings|The default target project for merge requests created in this fork project.')
+
+    .form-check.gl-mb-2
+      = settings.radio_button :mr_default_target_self, false, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_mr_default_target_self_false, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|Upstream project')
+        = @project.forked_from_project.full_name
+
+    .form-check.gl-mb-2
+      = settings.radio_button :mr_default_target_self, true, class: "form-check-input"
+      = label_tag :project_project_setting_attributes_mr_default_target_self_true, class: 'form-check-label' do
+        .gl-font-weight-bold
+          = s_('ProjectSettings|This project')
+        = @project.full_name
diff --git a/app/views/projects/_new_project_fields.html.haml b/app/views/projects/_new_project_fields.html.haml
index 8b1bf37ff10..4695cd59f32 100644
--- a/app/views/projects/_new_project_fields.html.haml
+++ b/app/views/projects/_new_project_fields.html.haml
@@ -12,7 +12,7 @@
   .form-group.project-path.col-sm-6
     = f.label :namespace_id, class: 'label-bold' do
       %span= s_("Project URL")
-    .input-group.flex-nowrap
+    .input-group.gl-flex-nowrap
       - if current_user.can_select_namespace?
         .input-group-prepend.flex-shrink-0.has-tooltip{ title: root_url }
           .input-group-text
@@ -62,5 +62,5 @@
           .option-description
             = s_('ProjectsNew|Allows you to immediately clone this project’s repository. Skip this if you plan to push up an existing repository.')
 
-= f.submit _('Create project'), class: "btn gl-button btn-success", data: { track_label: "#{track_label}", track_event: "click_button", track_property: "create_project", track_value: "" }
+= f.submit _('Create project'), class: "btn gl-button btn-confirm", data: { track_label: "#{track_label}", track_event: "click_button", track_property: "create_project", track_value: "" }
 = link_to _('Cancel'), dashboard_projects_path, class: 'btn gl-button btn-default btn-cancel', data: { track_label: "#{track_label}", track_event: "click_button", track_property: "cancel", track_value: "" }
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index da3133dfe15..85a53edc160 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -24,4 +24,4 @@
         distributed with computer software, forming part of its documentation.
         GitLab will render it here instead of this message.
       %p
-        = link_to "Add Readme", @project.add_readme_path, class: 'btn btn-success'
+        = link_to "Add Readme", @project.add_readme_path, class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/_service_desk_settings.html.haml b/app/views/projects/_service_desk_settings.html.haml
index 53b9e7f3d65..7b345941cf7 100644
--- a/app/views/projects/_service_desk_settings.html.haml
+++ b/app/views/projects/_service_desk_settings.html.haml
@@ -2,7 +2,7 @@
 %section.settings.js-service-desk-setting-wrapper.no-animate#js-service-desk{ class: ('expanded' if expanded), data: { qa_selector: 'service_desk_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Service Desk')
-    %button.btn.gl-button.js-settings-toggle
+    %button.btn.gl-button.btn-default.js-settings-toggle
       = 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 }
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index 2669c4c0042..45d0aee4332 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -14,4 +14,4 @@
       - if can_create_wiki
         %p
           = _("Add a homepage to your wiki that contains information about your project and GitLab will display it here instead of this message.")
-        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-primary"
+        = link_to _("Create your first page"), wiki_path(@project.wiki) + '?view=create', class: "btn gl-button btn-confirm"
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index a0f644717ad..84f2d352bc9 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -11,6 +11,11 @@
 #blob-content-holder.blob-content-holder
   - if @code_navigation_path
     #js-code-navigation{ data: { code_navigation_path: @code_navigation_path, blob_path: blob.path, definition_path_prefix: project_blob_path(@project, @ref) } }
-  %article.file-holder
-    = render 'projects/blob/header', blob: blob
-    = render 'projects/blob/content', blob: blob
+  - if Feature.enabled?(:refactor_blob_viewer, @project, default_enabled: :yaml)
+    #js-view-blob-app{ data: { blob_path: blob.path } }
+      .gl-spinner-container
+        = loading_icon(size: 'md')
+  - else
+    %article.file-holder
+      = render 'projects/blob/header', blob: blob
+      = render 'projects/blob/content', blob: blob
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index a7f13989ca7..d7668dd1c91 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -9,6 +9,8 @@
     - else
       = edit_blob_button(@project, @ref, @path, blob: blob)
       = ide_edit_button(@project, @ref, @path, blob: blob)
+    - if can_view_pipeline_editor?(@project) && @path == @project.ci_config_path_or_default
+      = link_to "Pipeline Editor", project_ci_pipeline_editor_path(@project), class: "btn gl-button btn-confirm-secondary gl-ml-3"
     .btn-group{ role: "group", class: ("gl-ml-3" if current_user) }>
       = render_if_exists 'projects/blob/header_file_locks_link'
       - if current_user
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index ca60827863a..57477e59167 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -15,7 +15,7 @@
           = render 'shared/new_commit_form', placeholder: _("Add new directory")
 
           .form-actions
-            = submit_tag _("Create directory"), class: 'btn gl-button btn-success'
-            = link_to "Cancel", '#', class: "btn gl-button btn-cancel", "data-dismiss" => "modal"
+            = submit_tag _("Create directory"), class: 'btn gl-button btn-confirm'
+            = link_to "Cancel", '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
 
             = render 'shared/projects/edit_information'
diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml
index 717c03ad27d..24a4db010c8 100644
--- a/app/views/projects/blob/_template_selectors.html.haml
+++ b/app/views/projects/blob/_template_selectors.html.haml
@@ -10,7 +10,7 @@
     .metrics-dashboard-selector.js-metrics-dashboard-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-metrics-dashboard-selector qa-metrics-dashboard-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: metrics_dashboard_ymls(@project) } } )
     #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 qa-gitlab-ci-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project) } } )
+      = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitlab-ci-yml-selector qa-gitlab-ci-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project), selected: params[:template] } } )
     - if experiment_enabled?(:ci_syntax_templates_b, subject: current_user) && @project.namespace.recent?
       .gitlab-ci-syntax-yml-selector.js-gitlab-ci-syntax-yml-selector-wrap.js-template-selector-wrap.hidden
         = dropdown_tag(_("Learn CI/CD syntax"), options: { toggle_class: 'js-gitlab-ci-syntax-yml-selector qa-gitlab-ci-syntax-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_syntax_ymls(@project) } } )
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index b68c75701b9..c42b54ec61d 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -20,9 +20,9 @@
           = render 'shared/new_commit_form', placeholder: placeholder, ref: local_assigns[:ref]
 
           .form-actions
-            = button_tag class: 'btn gl-button btn-success btn-upload-file', id: 'submit-all', type: 'button' do
+            = button_tag class: 'btn gl-button btn-confirm btn-upload-file', id: 'submit-all', type: 'button' do
               .spinner.spinner-sm.gl-mr-2.js-loading-icon.hidden
               = button_title
-            = link_to _("Cancel"), '#', class: "btn gl-button btn-cancel", "data-dismiss" => "modal"
+            = link_to _("Cancel"), '#', class: "btn gl-button btn-default btn-cancel", "data-dismiss" => "modal"
 
             = render 'shared/projects/edit_information'
diff --git a/app/views/projects/blob/viewers/_empty.html.haml b/app/views/projects/blob/viewers/_empty.html.haml
index a293a8de231..c15dabc9111 100644
--- a/app/views/projects/blob/viewers/_empty.html.haml
+++ b/app/views/projects/blob/viewers/_empty.html.haml
@@ -1,3 +1,3 @@
 .file-content.code
   .nothing-here-block
-    Empty file
+    = _("Empty file")
diff --git a/app/views/projects/blob/viewers/_loading_auxiliary.html.haml b/app/views/projects/blob/viewers/_loading_auxiliary.html.haml
index 5a6c1a493a5..5a2212e0b4e 100644
--- a/app/views/projects/blob/viewers/_loading_auxiliary.html.haml
+++ b/app/views/projects/blob/viewers/_loading_auxiliary.html.haml
@@ -1,2 +1,2 @@
 = loading_icon(css_class: "gl-vertical-align-text-bottom")
-Analyzing file…
+= _("Analyzing file…")
diff --git a/app/views/projects/blob/viewers/_stl.html.haml b/app/views/projects/blob/viewers/_stl.html.haml
index 44c986595df..f98deebacf9 100644
--- a/app/views/projects/blob/viewers/_stl.html.haml
+++ b/app/views/projects/blob/viewers/_stl.html.haml
@@ -3,7 +3,7 @@
     = loading_icon(size: "md", css_class: "gl-mt-4 gl-mb-3")
   .text-center.gl-mt-3.gl-mb-3.stl-controls
     .btn-group
-      %button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
+      %button.gl-button.btn.btn-default.btn-sm.js-material-changer{ data: { type: 'wireframe' } }
         Wireframe
-      %button.btn.btn-default.btn-sm.active.js-material-changer{ data: { type: 'default' } }
+      %button.gl-button.btn.btn-default.btn-sm.selected.js-material-changer{ data: { type: 'default' } }
         Solid
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 6f86ccd7824..a5414ce7ef2 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -52,11 +52,11 @@
       - if branch.name == @project.repository.root_ref
         - delete_default_branch_tooltip = s_('Branches|The default branch cannot be deleted')
         %span.has-tooltip{ title: delete_default_branch_tooltip }
-          %button{ class: "gl-button btn btn-danger remove-row disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
+          %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
             = sprite_icon("remove")
       - elsif protected_branch?(@project, branch)
         - if can?(current_user, :push_to_delete_protected_branch, @project)
-          %button{ class: "gl-button btn btn-danger remove-row has-tooltip",
+          %button{ class: "gl-button btn btn-danger has-tooltip",
             title: s_('Branches|Delete protected branch'),
             data: { toggle: "modal",
               target: "#modal-delete-branch",
@@ -67,11 +67,11 @@
         - else
           - delete_protected_branch_tooltip = s_('Branches|Only a project maintainer or owner can delete a protected branch')
           %span.has-tooltip{ title: delete_protected_branch_tooltip }
-            %button{ class: "gl-button btn btn-danger remove-row  disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
+            %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
               = sprite_icon("remove")
       - else
         = link_to project_branch_path(@project, branch.name),
-          class: "gl-button btn btn-danger remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
+          class: "gl-button btn btn-danger js-remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
           title: s_('Branches|Delete branch'),
           method: :delete,
           data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },
diff --git a/app/views/projects/branches/_delete_protected_modal.html.haml b/app/views/projects/branches/_delete_protected_modal.html.haml
index 24beeeb0ae1..5c5653401fb 100644
--- a/app/views/projects/branches/_delete_protected_modal.html.haml
+++ b/app/views/projects/branches/_delete_protected_modal.html.haml
@@ -34,7 +34,7 @@
         = text_field_tag 'delete_branch_input', '', class: 'form-control js-delete-branch-input'
 
       .modal-footer
-        %button.btn{ data: { dismiss: 'modal' } } Cancel
+        %button.gl-button.btn.btn-default{ data: { dismiss: 'modal' } } Cancel
         = link_to s_('Branches|Delete protected branch'), '',
           class: "gl-button btn btn-danger js-delete-branch",
           title: s_('Branches|Delete branch'),
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index beccf458138..129b207a26f 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -16,21 +16,7 @@
       = link_to s_('Branches|All'), project_branches_filtered_path(@project, state: 'all'), title: s_('Branches|Show all branches')
 
   .nav-controls
-    = form_tag(project_branches_filtered_path(@project, state: 'all'), method: :get) do
-      = search_field_tag :search, params[:search], { placeholder: s_('Branches|Filter by branch name'), id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
-
-    - unless @mode == 'overview'
-      .dropdown.inline>
-        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-          %span.light
-            = branches_sort_options_hash[@sort]
-          = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-          %li.dropdown-header
-            = s_('Branches|Sort by')
-          - branches_sort_options_hash.each do |value, title|
-            %li
-              = link_to title, project_branches_filtered_path(@project, state: 'all', search: params[:search], sort: value), class: ("is-active" if @sort == value)
+    #js-branches-sort-dropdown{ data: { project_branches_filtered_path: project_branches_path(@project, state: 'all'), sort_options: branches_sort_options_hash.to_json, mode: @mode } }
 
     - if can? current_user, :push_code, @project
       = link_to project_merged_branches_path(@project),
@@ -40,12 +26,12 @@
         data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
           container: 'body' } do
         = s_('Branches|Delete merged branches')
-      = link_to new_project_branch_path(@project), class: 'gl-button btn btn-success' do
+      = link_to new_project_branch_path(@project), class: 'gl-button btn btn-confirm' do
         = s_('Branches|New branch')
 
 = render_if_exists 'projects/commits/mirror_status'
 
-.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json) } }
+.js-branch-list{ data: { diverging_counts_endpoint: diverging_commit_counts_namespace_project_branches_path(@project.namespace, @project, format: :json), default_branch: @project.default_branch } }
 - if can?(current_user, :admin_project, @project)
   - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
   .row-content-block
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 17314cd7c5a..6cb2c435a30 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -29,6 +29,6 @@
         = render 'shared/ref_dropdown', dropdown_class: 'wide'
       .form-text.text-muted Existing branch name, tag, or commit SHA
   .form-actions
-    = button_tag 'Create branch', class: 'gl-button btn btn-success'
-    = link_to 'Cancel', project_branches_path(@project), class: 'gl-button btn btn-cancel'
+    = button_tag 'Create branch', class: 'gl-button btn btn-confirm'
+    = link_to 'Cancel', project_branches_path(@project), class: 'gl-button btn btn-default btn-cancel'
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/buttons/_remove_tag.html.haml b/app/views/projects/buttons/_remove_tag.html.haml
index 68a9d715674..cdf6336a259 100644
--- a/app/views/projects/buttons/_remove_tag.html.haml
+++ b/app/views/projects/buttons/_remove_tag.html.haml
@@ -2,5 +2,5 @@
 - tag = local_assigns.fetch(:tag, nil)
 - return unless project && tag
 
-%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon remove-row has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
+%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
   = sprite_icon("remove")
diff --git a/app/views/projects/ci/pipeline_editor/show.html.haml b/app/views/projects/ci/pipeline_editor/show.html.haml
index 3e10cf49b66..eb588e150f7 100644
--- a/app/views/projects/ci/pipeline_editor/show.html.haml
+++ b/app/views/projects/ci/pipeline_editor/show.html.haml
@@ -1,14 +1,3 @@
 - page_title s_('Pipelines|Pipeline Editor')
 
-#js-pipeline-editor{ data: { "ci-config-path": @project.ci_config_path_or_default,
-  "commit-sha" => @project.commit ? @project.commit.sha : '',
-  "default-branch" => @project.default_branch,
-  "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
-  "initial-branch-name": params[:branch_name],
-  "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
-  "new-merge-request-path" => namespace_project_new_merge_request_path,
-  "project-path" => @project.path,
-  "project-full-path" => @project.full_path,
-  "project-namespace" => @project.namespace.full_path,
-  "yml-help-page-path" => help_page_path('ci/yaml/README'),
-} }
+#js-pipeline-editor{ data: js_pipeline_editor_data(@project) }
diff --git a/app/views/projects/cleanup/_show.html.haml b/app/views/projects/cleanup/_show.html.haml
index b0112be0e3d..5e14b6dacfd 100644
--- a/app/views/projects/cleanup/_show.html.haml
+++ b/app/views/projects/cleanup/_show.html.haml
@@ -21,7 +21,7 @@
         .gl-mb-3
           %h5.gl-mt-0
             = _("Upload object map")
-          %button.btn.btn-default.js-choose-file{ type: "button" }
+          %button.gl-button.btn.btn-default.js-choose-file{ type: "button" }
             = _("Choose a file")
           %span.gl-ml-3.js-filename
             = _("No file selected")
@@ -29,4 +29,4 @@
         .form-text.text-muted
           = _("The maximum file size is %{size}.") % { size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes) }
 
-      = f.submit _('Start cleanup'), class: 'gl-button btn btn-success'
+      = f.submit _('Start cleanup'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 974393b893b..1b28136e82c 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,5 +1,3 @@
-- can_collaborate = can_collaborate_with_project?(@project)
-
 .page-content-header
   .header-main-content
     = render partial: 'signature', object: @commit.signature
@@ -20,36 +18,9 @@
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
 
-  .header-action-buttons
-    - if defined?(@notes_count) && @notes_count > 0
-      %span.btn.gl-button.btn-default.disabled.gl-button.btn-icon.d-none.d-sm-inline.gl-mr-3.has-tooltip{ title: n_("%d comment on this commit", "%d comments on this commit", @notes_count) % @notes_count }
-        = sprite_icon('comment')
-        = @notes_count
-    = link_to project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 d-none d-md-inline" do
-      #{ _('Browse files') }
-    .dropdown.inline
-      %a.btn.gl-button.btn-default.dropdown-toggle.qa-options-button.d-md-inline{ data: { toggle: "dropdown" } }
-        %span= _('Options')
-        = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
-      %ul.dropdown-menu.dropdown-menu-right
-        %li.d-block.d-sm-none
-          = link_to project_tree_path(@project, @commit) do
-            #{ _('Browse Files') }
-        - if can_collaborate && !@commit.has_been_reverted?(current_user)
-          %li.clearfix
-            = revert_commit_link
-        - if can_collaborate
-          %li.clearfix
-            = cherry_pick_commit_link
-        - if can?(current_user, :push_code, @project)
-          %li.clearfix
-            = link_to s_('CreateTag|Tag'), new_project_tag_path(@project, ref: @commit)
-        %li.divider
-        %li.dropdown-header
-          #{ _('Download') }
-        - unless @commit.parents.length > 1
-          %li= link_to s_('DownloadCommit|Email Patches'), project_commit_path(@project, @commit, format: :patch), class: "qa-email-patches", rel: 'nofollow', download: ''
-        %li= link_to s_('DownloadCommit|Plain Diff'), project_commit_path(@project, @commit, format: :diff), class: "qa-plain-diff", rel: 'nofollow', download: ''
+  #js-commit-comments-button{ data: { comments_count: @notes_count.to_i } }
+  = link_to _('Browse files'), project_tree_path(@project, @commit), class: "btn gl-button btn-default gl-mr-3 gl-xs-w-full gl-xs-mb-3"
+  #js-commit-options-dropdown{ data: commit_options_dropdown_data(@project, @commit) }
 
 .commit-box{ data: { project_path: project_path(@project) } }
   %h3.commit-title
@@ -85,11 +56,8 @@
       - if @last_pipeline.stages_count.nonzero?
         #{ n_(s_('Pipeline|with stage'), s_('Pipeline|with stages'), @last_pipeline.stages_count) }
         .mr-widget-pipeline-graph
-          - if ::Gitlab::Ci::Features.ci_commit_pipeline_mini_graph_vue_enabled?(@project)
-            .stage-cell
-              .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe } }
-          - else
-            = render 'shared/mini_pipeline_graph', pipeline: @last_pipeline, klass: 'js-commit-pipeline-graph'
+          .stage-cell
+            .js-commit-pipeline-mini-graph{ data: { stages: @last_pipeline_stages.to_json.html_safe } }
       - if @last_pipeline.duration
         in
         = time_interval_in_words @last_pipeline.duration
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index a8a928515fe..9e2dca3ad71 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -20,7 +20,7 @@
   %li.commit-header.js-commit-header
     %span.font-weight-bold= n_("%d previously merged commit", "%d previously merged commits", context_commits.count) % context_commits.count
     - if project.context_commits_enabled? && can_update_merge_request
-      %button.btn.btn-default.ml-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'false' } }
+      %button.gl-button.btn.btn-default.ml-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'false' } }
         = _('Add/remove')
 
   %li.commits-row
@@ -33,7 +33,7 @@
     = n_('%s additional commit has been omitted to prevent performance issues.', '%s additional commits have been omitted to prevent performance issues.', hidden) % number_with_delimiter(hidden)
 
 - if project.context_commits_enabled? && can_update_merge_request && context_commits&.empty?
-  %button.btn.btn-default.mt-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'true' } }
+  %button.gl-button.btn.btn-default.mt-3.add-review-item-modal-trigger{ type: "button", data: { context_commits_empty: 'true' } }
     = _('Add previously merged commits')
 
 - if commits.size == 0 && context_commits.nil?
diff --git a/app/views/projects/default_branch/_show.html.haml b/app/views/projects/default_branch/_show.html.haml
index 728f035555e..9e9fc08dac0 100644
--- a/app/views/projects/default_branch/_show.html.haml
+++ b/app/views/projects/default_branch/_show.html.haml
@@ -28,4 +28,4 @@
               = _("When merge requests and commits in the default branch close, any issues they reference also close.")
               = link_to sprite_icon('question-o'), help_page_path('user/project/issues/managing_issues.md', anchor: 'disabling-automatic-issue-closing'), target: '_blank'
 
-      = f.submit _('Save changes'), class: "gl-button btn btn-success"
+      = f.submit _('Save changes'), class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 780ec128d63..f0214ade313 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -6,5 +6,5 @@
   = 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', class: 'btn-success btn'
-      = link_to 'Cancel', project_settings_repository_path(@project), class: 'gl-button btn btn-cancel'
+      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
+      = link_to _('Cancel'), project_settings_repository_path(@project), class: 'gl-button btn btn-default btn-cancel'
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index cec8948aaa4..1c7a9ffe0bb 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -8,7 +8,7 @@
 
 .content-block.oneline-block.files-changed.diff-files-changed.js-diff-files-changed
   .files-changed-inner
-    .inline-parallel-buttons.d-none.d-md-block
+    .inline-parallel-buttons.gl-display-none.gl-md-display-flex
       - if !diffs_expanded? && diff_files.any? { |diff_file| diff_file.collapsed? }
         = link_to _('Expand all'), url_for(safe_params.merge(expanded: 1, format: nil)), class: 'gl-button btn btn-default'
       - if show_whitespace_toggle
@@ -20,7 +20,7 @@
           = diff_compare_whitespace_link(diffs.project, params[:from], params[:to], class: 'd-none d-sm-inline-block')
         - elsif current_controller?(:wikis)
           = toggle_whitespace_link(url_for(params_with_whitespace), class: 'd-none d-sm-inline-block')
-      .btn-group
+      .btn-group.gl-ml-3
         = inline_diff_btn
         = parallel_diff_btn
     = render 'projects/diffs/stats', diff_files: diff_files
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 9197b177b7b..35e2fe1b398 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -14,10 +14,10 @@
         = submodule_diff_compare_link(diff_file)
 
     - unless diff_file.submodule?
-      .file-actions.d-none.d-sm-block
+      .file-actions.gl-display-none.gl-sm-display-flex
         - if diff_file.blob&.readable_text?
-          %span.has-tooltip{ title: _("Toggle comments for this file") }
-            = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default selected', disabled: @diff_notes_disabled do
+          %span.has-tooltip.gl-mr-3{ title: _("Toggle comments for this file") }
+            = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do
               = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index 4a00e0af9d9..d1792826522 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -23,7 +23,7 @@
       %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.new_path, container: 'body' } }
         = new_path
     - else
-      %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.file_path, container: 'body' } }
+      %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.file_path, container: 'body', qa_selector: 'file_name_content' } }
         = diff_file.file_path
 
       - if diff_file.deleted_file?
@@ -37,3 +37,4 @@
 
   - if diff_file.stored_externally? && diff_file.external_storage == :lfs
     %span.badge.label-lfs.gl-mr-2 LFS
+
diff --git a/app/views/projects/diffs/viewers/_collapsed.html.haml b/app/views/projects/diffs/viewers/_collapsed.html.haml
index 02f499144c0..578b0af3241 100644
--- a/app/views/projects/diffs/viewers/_collapsed.html.haml
+++ b/app/views/projects/diffs/viewers/_collapsed.html.haml
@@ -1,3 +1,3 @@
 .nothing-here-block.diff-collapsed{ data: { diff_for_path: collapsed_diff_url(viewer.diff_file) } }
   = _("This diff is collapsed.")
-  %button.click-to-expand.btn.btn-link= _("Click to expand it.")
+  %button.click-to-expand.gl-button.btn.btn-link= _("Click to expand it.")
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 9388c5fad6d..ecaf3467cd2 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -3,8 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
 
-- enable_search_settings
-
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Naming, topics, avatar')
@@ -25,7 +23,7 @@
       .js-project-permissions-form
       - if show_visibility_confirm_modal?(@project)
         = render "visibility_modal"
-      = f.submit _('Save changes'), class: "btn gl-button btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "btn gl-button btn-confirm #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)], data: { qa_selector: 'merge_request_settings_content' } }
   .settings-header
@@ -39,7 +37,7 @@
     = form_for @project, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "btn gl-button btn-success rspec-save-merge-request-changes", data: { qa_selector: 'save_merge_request_changes_button' }
+      = f.submit _('Save changes'), class: "btn gl-button btn-confirm rspec-save-merge-request-changes", data: { qa_selector: 'save_merge_request_changes_button' }
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 0c682226df3..171222368d6 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -5,6 +5,7 @@
 = render partial: 'flash_messages', locals: { project: @project }
 
 = render "home_panel"
+= render "archived_notice", project: @project
 
 = render "invite_members" if experiment_enabled?(:invite_members_empty_project_version_a) && can_import_members?
 
diff --git a/app/views/projects/environments/_form.html.haml b/app/views/projects/environments/_form.html.haml
index 10890bf1921..a295c8f6fb0 100644
--- a/app/views/projects/environments/_form.html.haml
+++ b/app/views/projects/environments/_form.html.haml
@@ -17,5 +17,5 @@
       = f.url_field :external_url, class: 'form-control'
 
     .form-actions
-      = f.submit _('Save'), class: 'gl-button btn btn-success'
+      = f.submit _('Save'), class: 'gl-button btn btn-confirm'
       = link_to _('Cancel'), project_environments_path(@project), class: 'gl-button btn btn-cancel'
diff --git a/app/views/projects/environments/empty_metrics.html.haml b/app/views/projects/environments/empty_metrics.html.haml
index 3ee51a318c6..df05909e8ef 100644
--- a/app/views/projects/environments/empty_metrics.html.haml
+++ b/app/views/projects/environments/empty_metrics.html.haml
@@ -11,4 +11,4 @@
       %p.state-description
         = s_('Metrics|Check out the CI/CD documentation on deploying to an environment')
       .text-center
-        = link_to s_("Environments|Learn about environments"), help_page_path('ci/environments/index.md'), class: 'gl-button btn btn-success'
+        = link_to s_("Environments|Learn about environments"), help_page_path('ci/environments/index.md'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 5da9c25b780..06a2ed46805 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -6,4 +6,5 @@
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments/index.md"),
-  "project-path" => @project.full_path } }
+  "project-path" => @project.full_path,
+  "default-branch-name" => @project.default_branch_or_master } }
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index 0cb44bd03fb..b3e4b7a4998 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -67,7 +67,7 @@
           %p.blank-state-text
             = html_escape(_("Define environments in the deploy stage(s) in %{code_open}.gitlab-ci.yml%{code_close} to track deployments here.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
           .text-center
-            = link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-success"
+            = link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-confirm"
     - else
       .table-holder.gl-overflow-visible
         .ci-table.environments{ role: 'grid' }
diff --git a/app/views/projects/forks/_fork_button.html.haml b/app/views/projects/forks/_fork_button.html.haml
index 60a4a5c9d70..84259890a44 100644
--- a/app/views/projects/forks/_fork_button.html.haml
+++ b/app/views/projects/forks/_fork_button.html.haml
@@ -17,4 +17,4 @@
       = link_to _("Select"), project_forks_path(@project, namespace_key: namespace.id),
           data: { qa_selector: 'fork_namespace_button', qa_name: namespace.human_name },
           method: "POST",
-          class: ["btn gl-button btn-success", ("disabled" unless can_create_project)]
+          class: ["btn gl-button btn-confirm", ("disabled" unless can_create_project)]
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index 89c2c826067..ba4e40a8675 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -30,11 +30,11 @@
 
     - if current_user && can?(current_user, :fork_project, @project)
       - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-success' do
+        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')
       - else
-        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-success' do
+        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')
 
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index c62d4a35973..1973b23a062 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -5,4 +5,4 @@
     = render 'shared/ref_switcher', destination: 'graphs'
   = link_to s_('Commits|History'), project_commits_path(@project, current_ref), class: 'btn gl-button btn-default'
 
-.js-contributors-graph{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json),'data-project-branch': current_ref }
+.js-contributors-graph{ class: container_class, data: { project_graph_path: project_graph_path(@project, current_ref, format: :json), project_branch: current_ref, default_branch: @project.default_branch } }
diff --git a/app/views/projects/hooks/edit.html.haml b/app/views/projects/hooks/edit.html.haml
index fb19b251d41..226cd7d89b6 100644
--- a/app/views/projects/hooks/edit.html.haml
+++ b/app/views/projects/hooks/edit.html.haml
@@ -10,7 +10,7 @@
     = form_for [@project, @hook], as: :hook, url: project_hook_path(@project, @hook) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
 
-      = f.submit 'Save changes', class: 'btn gl-button btn-success gl-mr-3'
+      = f.submit 'Save changes', class: 'btn gl-button btn-confirm gl-mr-3'
       = render 'shared/web_hooks/test_button', hook: @hook
       = link_to _('Delete'), project_hook_path(@project, @hook), method: :delete, class: 'btn gl-button btn-danger float-right', data: { confirm: _('Are you sure?') }
 
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 03ea623f4c6..5ca65d55eea 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -9,6 +9,6 @@
   .col-lg-8.gl-mb-3
     = form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]) do |f|
       = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-      = f.submit 'Add webhook', class: 'gl-button btn btn-success'
+      = f.submit 'Add webhook', class: 'gl-button btn btn-confirm'
 
     = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
diff --git a/app/views/projects/imports/new.html.haml b/app/views/projects/imports/new.html.haml
index 3064b8bf873..e2d8791b5d2 100644
--- a/app/views/projects/imports/new.html.haml
+++ b/app/views/projects/imports/new.html.haml
@@ -16,4 +16,4 @@
   = render "shared/import_form", f: f
 
   .form-actions
-    = f.submit 'Start import', class: "gl-button btn btn-success"
+    = f.submit 'Start import', class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/issuable/_show.html.haml b/app/views/projects/issuable/_show.html.haml
index 8015b205568..f311ed2d8ae 100644
--- a/app/views/projects/issuable/_show.html.haml
+++ b/app/views/projects/issuable/_show.html.haml
@@ -1,3 +1,4 @@
+- api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 - page_description issuable.description_html
 - page_card_attributes issuable.card_attributes
 - if issuable.relocation_target
@@ -6,4 +7,4 @@
 = render "projects/issues/alert_moved_from_service_desk", issue: issuable
 
 = render 'shared/issue_type/details_header', issuable: issuable
-= render 'shared/issue_type/details_content', issuable: issuable
+= render 'shared/issue_type/details_content', issuable: issuable, api_awards_path: api_awards_path
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index d299d2846c6..45b2f86c03d 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -11,17 +11,18 @@
   - refs_path = refs_namespace_project_path(@project.namespace, @project, search: '')
 
   .create-mr-dropdown-wrap.d-inline-block.full-width-mobile.js-create-mr{ data: { project_path: @project.full_path, project_id: @project.id, can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path, is_confidential: can_create_confidential_merge_request?.to_s } }
-    .btn-group.btn-group-sm.unavailable
-      %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
-        .spinner.align-text-bottom.mr-1.hide
+    .btn-group.unavailable
+      %button.gl-button.btn{ type: 'button', disabled: 'disabled' }
+        .spinner.align-text-bottom.gl-button-icon.hide
         %span.text
           Checking branch availability…
 
-    .btn-group.btn-group-sm.available.hidden
-      %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
+    .btn-group.available.hidden
+      %button.gl-button.btn.js-create-merge-request.btn-confirm{ type: 'button', data: { action: data_action } }
+        .spinner.js-spinner.gl-mr-2.gl-display-none
         = value
 
-      %button.btn.gl-button.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle.gl-flex-grow-0.gl-h-7{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
+      %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.create-merge-request-dropdown-toggle.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
         = sprite_icon('chevron-down')
 
       .droplab-dropdown
@@ -57,7 +58,7 @@
               %span.js-ref-message.form-text.text-muted
 
             .form-group
-              %button.btn.gl-button.btn-success.js-create-target{ type: 'button', data: { action: 'create-mr' } }
+              %button.btn.gl-button.btn-confirm.js-create-target{ type: 'button', data: { action: 'create-mr' } }
                 = create_mr_text
 
             - if can_create_confidential_merge_request?
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 1d300c42768..9b043ea3c47 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -13,29 +13,24 @@
   issues_path: project_issues_path(@project),
   project_path: @project.full_path } }
 
-- if project_issues(@project).exists?
+- if Feature.enabled?(:vue_issues_list, @project)
+  .js-issues-list{ data: issues_list_data(@project, current_user, finder) }
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :issues
+- elsif project_issues(@project).exists?
   .top-area
     = render 'shared/issuable/nav', type: :issues
     = render "projects/issues/nav_btns"
+  = render 'shared/issuable/search_bar', type: :issues
 
-  - if Feature.enabled?(:vue_issues_list, @project)
-    - data_endpoint = local_assigns.fetch(:data_endpoint, expose_path(api_v4_projects_issues_path(id: @project.id)))
-    .js-issues-list{ data: { endpoint: data_endpoint,
-      full_path: @project.full_path,
-      has_blocked_issues_feature: Gitlab.ee? && @project.feature_available?(:blocked_issues).to_s,
-      has_issuable_health_status_feature: Gitlab.ee? && @project.feature_available?(:issuable_health_status).to_s,
-      has_issue_weights_feature: Gitlab.ee? && @project.feature_available?(:issue_weights).to_s } }
-  - else
-    = render 'shared/issuable/search_bar', type: :issues
+  - if @can_bulk_update
+    = render 'shared/issuable/bulk_update_sidebar', type: :issues
 
-    - if @can_bulk_update
-      = render 'shared/issuable/bulk_update_sidebar', type: :issues
-
-    .issues-holder
-      = render 'issues'
-      - if new_issue_email
-        .issuable-footer.text-center
-          .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
+  .issues-holder
+    = render 'issues'
+    - if new_issue_email
+      .issuable-footer.text-center
+        .js-issueable-by-email{ data: { initial_email: new_issue_email, issuable_type: issuable_type, emails_help_page_path: help_page_path('development/emails', anchor: 'email-namespace'), quick_actions_help_path: help_page_path('user/project/quick_actions'), markdown_help_path: help_page_path('user/markdown'), reset_path: new_issuable_address_project_path(@project, issuable_type: issuable_type) } }
 - else
   - new_project_issue_button_path = @project.archived? ? false : new_project_issue_path(@project)
   = render 'shared/empty_states/issues', new_project_issue_button_path: new_project_issue_button_path, show_import_button: true
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index c3949a83e3f..a465f59c559 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -3,4 +3,5 @@
 - breadcrumb_title @issue.to_reference
 - page_title "#{@issue.title} (#{@issue.to_reference})", _("Issues")
 
-= render 'projects/issuable/show', issuable: @issue
+= render 'projects/issuable/show', issuable: @issue, api_awards_path: award_emoji_issue_api_path(@issue)
+= render 'shared/issuable/invite_members_trigger', project: @project
diff --git a/app/views/projects/jobs/_table.html.haml b/app/views/projects/jobs/_table.html.haml
index 402f7ddb38d..819837a9eff 100644
--- a/app/views/projects/jobs/_table.html.haml
+++ b/app/views/projects/jobs/_table.html.haml
@@ -12,7 +12,7 @@
             = s_('Jobs|Use jobs to automate your tasks')
           %p
             = s_('Jobs|Jobs are the building blocks of a GitLab CI/CD pipeline. Each job has a specific task, like testing code. To set up jobs in a CI/CD pipeline, add a CI/CD configuration file to your project.')
-          = link_to s_('Jobs|Create CI/CD configuration file'), @project.present(current_user: current_user).add_ci_yml_path, class: 'btn gl-button btn-info js-empty-state-button'
+          = link_to s_('Jobs|Create CI/CD configuration file'), project_ci_pipeline_editor_path(project), class: 'btn gl-button btn-info js-empty-state-button'
   - else
     .nothing-here-block= s_('Jobs|No jobs to show')
 - else
@@ -28,7 +28,7 @@
             %th Runner
           %th Stage
           %th Name
-          %th Timing
+          %th Duration
           %th Coverage
           %th
 
diff --git a/app/views/projects/jobs/index.html.haml b/app/views/projects/jobs/index.html.haml
index a0ec6002db7..f2aab3d9394 100644
--- a/app/views/projects/jobs/index.html.haml
+++ b/app/views/projects/jobs/index.html.haml
@@ -1,15 +1,12 @@
 - page_title _("Jobs")
 - add_page_specific_style 'page_bundles/ci_status'
 
-.top-area
-  - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
-  = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
+- if Feature.enabled?(:jobs_table_vue, @project, default_enabled: :yaml)
+  #js-jobs-table{ data: { full_path: @project.full_path, job_counts: job_counts.to_json, job_statuses: job_statuses.to_json } }
+- else
+  .top-area
+    - build_path_proc = ->(scope) { project_jobs_path(@project, scope: scope) }
+    = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
-  .nav-controls
-    - if can?(current_user, :update_build, @project)
-      = link_to project_ci_lint_path(@project), class: 'btn gl-button btn-default' do
-        %span
-          = _('CI Lint')
-
-.content-list.builds-content-list
-  = render "table", builds: @builds, project: @project
+  .content-list.builds-content-list
+    = render "table", builds: @builds, project: @project
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 357d4d193df..e034e9c71ab 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -8,7 +8,7 @@
   #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.gl-mt-3
+  .labels-container.gl-mt-3.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
     - if can_admin_label && search.blank?
       %p.text-muted
         = _('Labels can be applied to issues and merge requests.')
diff --git a/app/views/projects/logs/empty_logs.html.haml b/app/views/projects/logs/empty_logs.html.haml
index 5e3db401d79..48403f5e55e 100644
--- a/app/views/projects/logs/empty_logs.html.haml
+++ b/app/views/projects/logs/empty_logs.html.haml
@@ -11,4 +11,4 @@
       %p.state-description.text-center
         = s_('Logs|To see the logs, deploy your code to an environment.')
       .text-center
-        = link_to s_('Environments|Learn about environments'), help_page_path('ci/environments/index.md'), class: 'gl-button btn btn-success'
+        = link_to s_('Environments|Learn about environments'), help_page_path('ci/environments/index.md'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/merge_requests/_awards_block.html.haml b/app/views/projects/merge_requests/_awards_block.html.haml
index e7577e13b68..09466ed2244 100644
--- a/app/views/projects/merge_requests/_awards_block.html.haml
+++ b/app/views/projects/merge_requests/_awards_block.html.haml
@@ -1,5 +1,5 @@
 .content-block.content-block-small.emoji-list-container.js-noteable-awards
-  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true do
+  = render 'award_emoji/awards_block', awardable: @merge_request, inline: true, api_awards_path: award_emoji_merge_request_api_path(@merge_request) do
     .ml-auto.mt-auto.mb-auto
       #js-vue-sort-issue-discussions
       = render "projects/merge_requests/discussion_filter"
diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml
index 354c6665a50..26d8e571973 100644
--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/_mr_title.html.haml
@@ -21,7 +21,7 @@
       #js-issuable-header-warnings
       = issuable_meta(@merge_request, @project)
 
-    %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.gl-button.btn.btn-default.btn-icon.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = sprite_icon('chevron-double-lg-left')
 
   .detail-page-header-actions.js-issuable-actions
@@ -50,4 +50,4 @@
       - if can_update_merge_request && !are_close_and_open_buttons_hidden
         = render 'projects/merge_requests/close_reopen_draft_report_toggle'
       - elsif !@merge_request.merged?
-        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')
+        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-default float-right gl-ml-3', title: _('Report abuse')
diff --git a/app/views/projects/merge_requests/conflicts/show.html.haml b/app/views/projects/merge_requests/conflicts/show.html.haml
index e02f126d165..ee296258d04 100644
--- a/app/views/projects/merge_requests/conflicts/show.html.haml
+++ b/app/views/projects/merge_requests/conflicts/show.html.haml
@@ -1,4 +1,4 @@
-- page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
+- page_title _("Merge Conflicts"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
 - add_page_specific_style 'page_bundles/merge_conflicts'
 
 = render "projects/merge_requests/mr_title"
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 2cb75d43d4b..7082bf4b8b0 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -1,5 +1,5 @@
 %h3.page-title
-  New Merge Request
+  New merge request
 
 = form_for [@project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form js-requires-input" } do |f|
   - if params[:nav_source].present?
@@ -64,4 +64,4 @@
 
   - if @merge_request.errors.any?
     = form_errors(@merge_request)
-  = f.submit 'Compare branches and continue', class: "gl-button btn btn-success mr-compare-btn"
+  = f.submit 'Compare branches and continue', class: "gl-button btn btn-confirm mr-compare-btn"
diff --git a/app/views/projects/merge_requests/creations/_new_submit.html.haml b/app/views/projects/merge_requests/creations/_new_submit.html.haml
index 79781e4a311..a8facf1c6fd 100644
--- a/app/views/projects/merge_requests/creations/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_submit.html.haml
@@ -1,5 +1,5 @@
 %h3.page-title
-  New Merge Request
+  New merge request
 = form_for [@project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits, presenter: @mr_presenter
   = f.hidden_field :source_project_id
@@ -33,7 +33,7 @@
                   Pipelines
                   %span.badge.badge-pill= @pipelines.size
             %li.diffs-tab
-              = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tabvue'} do
+              = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tabvue', qa_selector: 'diffs_tab'} do
                 Changes
                 %span.badge.badge-pill= @merge_request.diff_size
 
diff --git a/app/views/projects/merge_requests/creations/new.html.haml b/app/views/projects/merge_requests/creations/new.html.haml
index 0741b24a5a1..6a8894384df 100644
--- a/app/views/projects/merge_requests/creations/new.html.haml
+++ b/app/views/projects/merge_requests/creations/new.html.haml
@@ -1,6 +1,6 @@
-- add_to_breadcrumbs _("Merge Requests"), project_merge_requests_path(@project)
+- add_to_breadcrumbs _("Merge requests"), project_merge_requests_path(@project)
 - breadcrumb_title _("New")
-- page_title _("New Merge Request")
+- page_title _("New merge request")
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
 
diff --git a/app/views/projects/merge_requests/edit.html.haml b/app/views/projects/merge_requests/edit.html.haml
index a4bb790ce0b..019015a4d86 100644
--- a/app/views/projects/merge_requests/edit.html.haml
+++ b/app/views/projects/merge_requests/edit.html.haml
@@ -1,5 +1,5 @@
-- page_title _("Edit"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
+- page_title _("Edit"), "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
 
 %h3.page-title
-  Edit Merge Request #{@merge_request.to_reference}
+  Edit merge request #{@merge_request.to_reference}
 = render 'form'
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 62a251c7015..22d78418c5b 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -3,7 +3,7 @@
 - new_merge_request_path = project_new_merge_request_path(merge_project) if merge_project
 - issuable_type = 'merge_request'
 
-- page_title _("Merge Requests")
+- page_title _("Merge requests")
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 
 = render 'projects/last_push'
diff --git a/app/views/projects/merge_requests/invalid.html.haml b/app/views/projects/merge_requests/invalid.html.haml
index df942c11883..f0bf5af7732 100644
--- a/app/views/projects/merge_requests/invalid.html.haml
+++ b/app/views/projects/merge_requests/invalid.html.haml
@@ -1,4 +1,4 @@
-- page_title "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge Requests")
+- page_title "#{@merge_request.title} (#{@merge_request.to_reference}", _("Merge requests")
 - badge_css_classes = "badge gl-text-white"
 - badge_info_css_classes = "#{badge_css_classes} badge-info"
 - badge_inverse_css_classes = "#{badge_css_classes} badge-inverse"
@@ -25,4 +25,4 @@
         of internal error
 
     %strong
-      Please close Merge Request or change branches with existing one
+      Please close merge request or change branches with existing one
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index d664ee709dd..416cb932ec9 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1,8 +1,8 @@
 - @gfm_form = true
 - @content_class = "merge-request-container#{' limit-container-width' unless fluid_layout}"
-- add_to_breadcrumbs _("Merge Requests"), project_merge_requests_path(@project)
+- add_to_breadcrumbs _("Merge requests"), project_merge_requests_path(@project)
 - breadcrumb_title @merge_request.to_reference
-- page_title "#{@merge_request.title} (#{@merge_request.to_reference})", _("Merge Requests")
+- page_title "#{@merge_request.title} (#{@merge_request.to_reference})", _("Merge requests")
 - page_description @merge_request.description_html
 - page_card_attributes @merge_request.card_attributes
 - suggest_changes_help_path = help_page_path('user/discussions/index.md', anchor: 'suggest-changes')
@@ -13,6 +13,8 @@
 - add_page_specific_style 'page_bundles/reports'
 - add_page_specific_style 'page_bundles/ci_status'
 
+- add_page_startup_api_call @endpoint_metadata_url
+
 .merge-request{ data: { mr_action: mr_action, url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project), lock_version: @merge_request.lock_version } }
   = render "projects/merge_requests/mr_title"
 
@@ -24,21 +26,21 @@
           = render "projects/merge_requests/tabs/tab", class: "notes-tab", qa_selector: "notes_tab" do
             = tab_link_for @merge_request, :show, force_link: @commit.present? do
               = _("Overview")
-              %span.badge.badge-pill= @merge_request.related_notes.user.count
+              %span.badge.badge-pill.gl-badge.badge-muted.sm= @merge_request.related_notes.user.count
           - if @merge_request.source_project
-            = render "projects/merge_requests/tabs/tab", name: "commits", class: "commits-tab" do
+            = render "projects/merge_requests/tabs/tab", name: "commits", class: "commits-tab", qa_selector: "commits_tab" do
               = tab_link_for @merge_request, :commits do
                 = _("Commits")
-                %span.badge.badge-pill= @commits_count
+                %span.badge.badge-pill.gl-badge.badge-muted.sm= @commits_count
           - if number_of_pipelines.nonzero?
             = render "projects/merge_requests/tabs/tab", name: "pipelines", class: "pipelines-tab" do
               = tab_link_for @merge_request, :pipelines do
                 = _("Pipelines")
-                %span.badge.badge-pill.js-pipelines-mr-count= number_of_pipelines
+                %span.badge.badge-pill.gl-badge.badge-muted.sm.js-pipelines-mr-count= number_of_pipelines
           = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do
             = tab_link_for @merge_request, :diffs do
               = _("Changes")
-              %span.badge.badge-pill= @merge_request.diff_size
+              %span.badge.badge-pill.gl-badge.badge-muted.sm= @merge_request.diff_size
         .d-flex.flex-wrap.align-items-center.justify-content-lg-end
           #js-vue-discussion-counter
 
@@ -60,9 +62,10 @@
                   - add_page_startup_api_call notes_url
                 - else
                   - add_page_startup_api_call discussions_path(@merge_request)
-                - add_page_startup_api_call widget_project_json_merge_request_path(@project, @merge_request, format: :json)
+                - add_page_startup_api_call widget_project_json_merge_request_path(@project, @merge_request, async_mergeability_check: true, format: :json)
                 - add_page_startup_api_call cached_widget_project_json_merge_request_path(@project, @merge_request, format: :json)
               #js-vue-mr-discussions{ data: { notes_data: notes_data(@merge_request, Feature.enabled?(:paginated_notes, @project)).to_json,
+                endpoint_metadata: @endpoint_metadata_url,
                 noteable_data: serialize_issuable(@merge_request, serializer: 'noteable'),
                 noteable_type: 'MergeRequest',
                 target_type: 'merge_request',
@@ -75,26 +78,10 @@
       = render "projects/merge_requests/tabs/pane", name: "pipelines", id: "pipelines", class: "pipelines" do
         - if number_of_pipelines.nonzero?
           = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_project_merge_request_path(@project, @merge_request)
-      - if mr_action === "diffs"
-        - add_page_startup_api_call @endpoint_metadata_url
       - params = request.query_parameters
       - if Feature.enabled?(:default_merge_ref_for_diffs, @project, default_enabled: :yaml)
         - params = params.merge(diff_head: true)
-      = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: { "is-locked": @merge_request.discussion_locked?,
-        endpoint: diffs_project_merge_request_path(@project, @merge_request, 'json', params),
-        endpoint_metadata: @endpoint_metadata_url,
-        endpoint_batch: diffs_batch_project_json_merge_request_path(@project, @merge_request, 'json', params),
-        endpoint_coverage: @coverage_path,
-        help_page_path: suggest_changes_help_path,
-        current_user_data: @current_user_data,
-        project_path: project_path(@merge_request.project),
-        changes_empty_state_illustration: image_path('illustrations/merge_request_changes_empty.svg'),
-        is_fluid_layout: fluid_layout.to_s,
-        dismiss_endpoint: user_callouts_path,
-        show_suggest_popover: show_suggest_popover?.to_s,
-        show_whitespace_default: @show_whitespace_default.to_s,
-        file_by_file_default: @file_by_file_default.to_s,
-        default_suggestion_commit_message: default_suggestion_commit_message }
+      = render "projects/merge_requests/tabs/pane", name: "diffs", id: "js-diffs-app", class: "diffs", data: diffs_tab_pane_data(@project, @merge_request, params)
 
     .mr-loading-status
       .loading.hide
@@ -108,3 +95,6 @@
   = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit
 
 #js-review-bar
+
+= render 'shared/issuable/invite_members_trigger', project: @project
+
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 774fbc79430..3cff85a4979 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -6,7 +6,7 @@
     .controls.gl-bg-gray-50.gl-p-2.gl-font-base.gl-text-gray-400.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-300
       = form_tag project_network_path(@project, @id), method: :get, class: 'form-inline network-form' do |f|
         = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input input-mx-250 search-sha gl-mr-2'
-        = button_tag class: 'btn gl-button btn-success btn-icon' do
+        = button_tag class: 'btn gl-button btn-confirm btn-icon' do
           = sprite_icon('search')
         .inline.gl-ml-5
           .form-check.light
diff --git a/app/views/projects/packages/infrastructure_registry/index.html.haml b/app/views/projects/packages/infrastructure_registry/index.html.haml
new file mode 100644
index 00000000000..5a118997ff9
--- /dev/null
+++ b/app/views/projects/packages/infrastructure_registry/index.html.haml
@@ -0,0 +1,10 @@
+- page_title _("Infrastructure Registry")
+- @content_class = "limit-container-width" unless fluid_layout
+
+.row
+  .col-12
+    #js-vue-packages-list{ data: { resource_id: @project.id,
+      page_type: 'project',
+      empty_list_help_url: help_page_path('user/infrastructure/index'),
+      empty_list_illustration: image_path('illustrations/empty-state/empty-terraform-register-lg.svg'),
+      package_help_url: help_page_path('user/infrastructure/index') } }
diff --git a/app/views/projects/pages/_pages_settings.html.haml b/app/views/projects/pages/_pages_settings.html.haml
index f39941f6f0d..483f192109b 100644
--- a/app/views/projects/pages/_pages_settings.html.haml
+++ b/app/views/projects/pages/_pages_settings.html.haml
@@ -9,6 +9,10 @@
         = f.label :pages_https_only, class: pages_https_only_label_class do
           %strong
             = s_('GitLabPages|Force HTTPS (requires valid certificates)')
+        - docs_link_start = "<a href='#{help_page_path('user/project/pages/custom_domains_ssl_tls_certification/index', anchor: 'force-https-for-gitlab-pages-websites')}' target='_blank' rel='noopener noreferrer'>".html_safe
+        - link_end = '</a>'.html_safe
+        %p
+          = 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 }
 
-  .gl-mt-3
-    = f.submit s_('GitLabPages|Save'), class: 'btn btn-confirm gl-button'
+    .gl-mt-3
+      = f.submit s_('GitLabPages|Save'), class: 'btn btn-confirm gl-button'
diff --git a/app/views/projects/pages/_ssl_limitations_warning.html.haml b/app/views/projects/pages/_ssl_limitations_warning.html.haml
index 1f2907d183e..de74b703e95 100644
--- a/app/views/projects/pages/_ssl_limitations_warning.html.haml
+++ b/app/views/projects/pages/_ssl_limitations_warning.html.haml
@@ -2,6 +2,6 @@
   = sprite_icon("warning-solid", css_class: "gl-text-orange-600")
   %strong= _("Warning:")
   - pages_host = Gitlab.config.pages.host
-  = s_("GitLabPages|When using Pages under the general domain of a GitLab instance (%{pages_host}), you cannot use HTTPS with sub-subdomains. This means that if your username/groupname contains a dot it will not work. This is a limitation of the HTTP Over TLS protocol. HTTP pages will continue to work provided you don't redirect HTTP to HTTPS.").html_safe % { pages_host: pages_host }
-
-  %strong= external_link(s_("GitLabPages|Learn more."), "https://docs.gitlab.com/ee/user/project/pages/introduction.html#limitations")
+  - docs_link_start = "<a href='#{help_page_path('user/project/pages/introduction', anchor: 'limitations')}' target='_blank' rel='noopener noreferrer'>".html_safe
+  - link_end = '</a>'.html_safe
+  = s_("GitLabPages|When using Pages under the general domain of a GitLab instance (%{pages_host}), you cannot use HTTPS with sub-subdomains. This means that if your username/groupname contains a dot it will not work. This is a limitation of the HTTP Over TLS protocol. HTTP pages will continue to work provided you don't redirect HTTP to HTTPS. %{docs_link_start}Learn more.%{link_end}").html_safe % { pages_host: pages_host, docs_link_start: docs_link_start, link_end: link_end }
diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml
index ec3fc27dc20..20e6338fa76 100644
--- a/app/views/projects/pages/_use.html.haml
+++ b/app/views/projects/pages/_use.html.haml
@@ -4,8 +4,7 @@
       = s_('GitLabPages|Configure pages')
     .card-body
       %p.gl-mb-0
-        - docs_link_start = "<a href='#{help_page_path('user/project/pages/index.md')}' target='_blank' rel='noopener noreferrer'>".html_safe
+        - docs_link_start = "<a href='#{help_page_path('user/project/pages/index')}' target='_blank' rel='noopener noreferrer'>".html_safe
         - samples_link_start = "<a href='https://gitlab.com/pages' target='_blank' rel='noopener noreferrer'>".html_safe
-        - templates_link_start = "<a href='https://gitlab.com/gitlab-org/project-templates' target='_blank' rel='noopener noreferrer'>".html_safe
         - link_end = '</a>'.html_safe
-        = s_('GitLabPages|See the %{docs_link_start}GitLab Pages documentation%{link_end} to learn how to upload your static site and have GitLab serve it. You can also follow a %{samples_link_start}sample project%{link_end} or use a %{templates_link_start}GitLab CI template%{link_end}.').html_safe % { docs_link_start: docs_link_start, samples_link_start: samples_link_start, templates_link_start: templates_link_start, link_end: link_end }
+        = s_('GitLabPages|Your Pages site is not configured yet. See the %{docs_link_start}GitLab Pages documentation%{link_end} to learn how to upload your static site and have GitLab serve it. You can also take some inspiration from the %{samples_link_start}sample Pages projects%{link_end}.').html_safe % { docs_link_start: docs_link_start, samples_link_start: samples_link_start, link_end: link_end }
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
index d0d5e675fcb..64760d8972f 100644
--- a/app/views/projects/pages/show.html.haml
+++ b/app/views/projects/pages/show.html.haml
@@ -9,7 +9,9 @@
         = s_('GitLabPages|New Domain')
 
   %p.light
-    = s_('GitLabPages|With GitLab Pages you can host your static websites on GitLab.  Combined with the power of GitLab CI and the help of GitLab Runner you can deploy static pages for your individual projects, your user or your group.')
+    - docs_link_start = "<a href='#{help_page_path('user/project/pages/index')}' target='_blank' rel='noopener noreferrer'>".html_safe
+    - link_end = '</a>'.html_safe
+    = s_('GitLabPages|With GitLab Pages you can host your static website directly from your GitLab repository. %{docs_link_start}Learn more.%{link_end}').html_safe % { docs_link_start: docs_link_start, link_end: link_end }
 
   = render 'pages_settings'
 
diff --git a/app/views/projects/pages_domains/_dns.html.haml b/app/views/projects/pages_domains/_dns.html.haml
index dc8127ab068..267317196f8 100644
--- a/app/views/projects/pages_domains/_dns.html.haml
+++ b/app/views/projects/pages_domains/_dns.html.haml
@@ -23,7 +23,7 @@
           - text, status = domain_presenter.unverified? ? [_('Unverified'), 'badge-danger'] : [_('Verified'), 'badge-success']
           .badge{ class: status }
             = text
-          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "btn has-tooltip", title: _("Retry verification")
+          = link_to sprite_icon("redo"), verify_project_pages_domain_path(@project, domain_presenter), method: :post, class: "gl-button btn btn-default has-tooltip", title: _("Retry verification")
         .input-group
           = text_field_tag :domain_verification, verification_record, class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-append
diff --git a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
index 9072312c100..d6c213571f2 100644
--- a/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
+++ b/app/views/projects/pages_domains/_lets_encrypt_callout.html.haml
@@ -9,7 +9,7 @@
                 = sprite_icon('warning-solid', css_class: ' mr-2 gl-text-orange-600')
                 = _("Something went wrong while obtaining the Let's Encrypt certificate.")
               .row.mx-0.mt-3
-                = link_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: "btn btn-sm btn-grouped btn-warning", method: :post
+                = link_to s_('GitLabPagesDomains|Retry'), retry_auto_ssl_project_pages_domain_path(@project, domain_presenter), class: "gl-button btn btn-default btn-sm btn-grouped", method: :post
     - elsif !domain_presenter.certificate_gitlab_provided?
       .form-group.border-section.js-shown-if-auto-ssl{ class: ("d-none" unless auto_ssl_available_and_enabled) }
         .row
diff --git a/app/views/projects/pipeline_schedules/_form.html.haml b/app/views/projects/pipeline_schedules/_form.html.haml
index 8a369202555..628c4780cf2 100644
--- a/app/views/projects/pipeline_schedules/_form.html.haml
+++ b/app/views/projects/pipeline_schedules/_form.html.haml
@@ -3,7 +3,7 @@
   .form-group.row
     .col-md-9
       = f.label :description, _('Description'), class: 'label-bold'
-      = f.text_field :description, class: 'form-control', required: true, autofocus: true, placeholder: s_('PipelineSchedules|Provide a short description for this pipeline')
+      = f.text_field :description, class: 'form-control gl-form-input', required: true, autofocus: true, placeholder: s_('PipelineSchedules|Provide a short description for this pipeline')
   .form-group.row
     .col-md-9
       = f.label :cron, _('Interval Pattern'), class: 'label-bold'
@@ -11,12 +11,12 @@
   .form-group.row
     .col-md-9
       = f.label :cron_timezone, _('Cron Timezone'), class: 'label-bold'
-      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'btn js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
+      = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn btn-default js-timezone-dropdown w-100', dropdown_class: 'w-100', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
       = f.text_field :cron_timezone, value: @schedule.cron_timezone, id: 'schedule_cron_timezone', class: 'hidden', name: 'schedule[cron_timezone]', required: true
   .form-group.row
     .col-md-9
       = f.label :ref, _('Target Branch'), class: 'label-bold'
-      = dropdown_tag(_("Select target branch"), options: { toggle_class: 'btn js-target-branch-dropdown w-100', dropdown_class: 'git-revision-dropdown w-100', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
+      = dropdown_tag(_("Select target branch"), options: { toggle_class: 'gl-button btn btn-default js-target-branch-dropdown w-100', dropdown_class: 'git-revision-dropdown w-100', title: _("Select target branch"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: @project.repository.branch_names, default_branch: @project.default_branch } } )
       = f.text_field :ref, value: @schedule.ref, id: 'schedule_ref', class: 'hidden', name: 'schedule[ref]', required: true
   .form-group.row.js-ci-variable-list-section
     .col-md-9
@@ -27,7 +27,7 @@
           = render 'ci/variables/variable_row', form_field: 'schedule', variable: variable, only_key_value: true
         = render 'ci/variables/variable_row', form_field: 'schedule', only_key_value: true
       - if @schedule.variables.size > 0
-        %button.btn.btn-info.btn-inverted.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
+        %button.gl-button.btn.btn-confirm-secondary.gl-mt-3.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@schedule.variables.size == 0}" } }
           - if @schedule.variables.size == 0
             = n_('Hide value', 'Hide values', @schedule.variables.size)
           - else
@@ -39,5 +39,5 @@
         = f.check_box :active, required: false, value: @schedule.active?
         = f.label :active, _('Active'), class: 'gl-font-weight-normal'
   .footer-block.row-content-block
-    = f.submit _('Save pipeline schedule'), class: 'btn gl-button btn-success'
+    = f.submit _('Save pipeline schedule'), class: 'btn gl-button btn-confirm'
     = link_to _('Cancel'), pipeline_schedules_path(@project), class: 'btn gl-button btn-default btn-cancel'
diff --git a/app/views/projects/pipeline_schedules/index.html.haml b/app/views/projects/pipeline_schedules/index.html.haml
index 558c12c04e4..a56e8f7f5c7 100644
--- a/app/views/projects/pipeline_schedules/index.html.haml
+++ b/app/views/projects/pipeline_schedules/index.html.haml
@@ -9,7 +9,7 @@
 
   - if can?(current_user, :create_pipeline_schedule, @project)
     .nav-controls
-      = link_to new_project_pipeline_schedule_path(@project), class: 'btn gl-button btn-success' do
+      = link_to new_project_pipeline_schedule_path(@project), class: 'btn gl-button btn-confirm' do
         %span= _('New schedule')
 
 - if @schedules.present?
diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml
deleted file mode 100644
index 0651ad6fdb8..00000000000
--- a/app/views/projects/pipelines/_stage.html.haml
+++ /dev/null
@@ -1,5 +0,0 @@
-- grouped_statuses = @stage.statuses.latest_ordered.group_by(&:status)
-- Ci::HasStatus::ORDERED_STATUSES.each do |ordered_status|
-  - grouped_statuses.fetch(ordered_status, []).each do |status|
-    %li
-      = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index 58d125acc2d..f0b2349c493 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -28,7 +28,7 @@
     #js-pipeline-graph-vue
 
   #js-tab-builds.tab-pane
-    - if pipeline.legacy_stages.present?
+    - if stages.present?
       .table-holder.pipeline-holder
         %table.table.ci-table.pipeline
           %thead
@@ -39,7 +39,7 @@
               %th
               %th= _('Coverage')
               %th
-          = render partial: "projects/stage/stage", collection: pipeline.legacy_stages, as: :stage
+          = render partial: "projects/stage/stage", collection: stages, as: :stage
 
   - if @pipeline.failed_builds.present?
     #js-tab-failures.build-failures.tab-pane.build-page
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
index 139f6e3c94d..992407adf71 100644
--- a/app/views/projects/pipelines/charts.html.haml
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -1,4 +1,4 @@
 - page_title _('CI/CD Analytics')
 
 #js-project-pipelines-charts-app{ data: { project_path: @project.full_path,
-  should_render_deployment_frequency_charts: should_render_deployment_frequency_charts.to_s } }
+  should_render_dora_charts: should_render_dora_charts.to_s } }
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 7d7b8a155ac..4b0487f4685 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -14,5 +14,7 @@
   "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
   "new-pipeline-path" => can?(current_user, :create_pipeline, @project) && new_project_pipeline_path(@project),
   "ci-lint-path" => can?(current_user, :create_pipeline, @project) && project_ci_lint_path(@project),
-  "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project) ,
-  "has-gitlab-ci" => has_gitlab_ci?(@project).to_s } }
+  "reset-cache-path" => can?(current_user, :admin_pipeline, @project) && reset_cache_project_settings_ci_cd_path(@project),
+  "has-gitlab-ci" => has_gitlab_ci?(@project).to_s,
+  "add-ci-yml-path" => can?(current_user, :create_pipeline, @project) && @project.present(current_user: current_user).add_ci_yml_path,
+  "suggested-ci-templates" => experiment_suggested_ci_templates.to_json } }
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 7a3817fe87b..14de982e239 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -1,9 +1,9 @@
 - breadcrumb_title _('Pipelines')
-- page_title s_('Pipeline|Run Pipeline')
+- page_title s_('Pipeline|Run pipeline')
 - settings_link = link_to _('CI/CD settings'), project_settings_ci_cd_path(@project)
 
 %h3.page-title
-  = s_('Pipeline|Run Pipeline')
+  = s_('Pipeline|Run pipeline')
 %hr
 
 - if Feature.enabled?(:new_pipeline_form, @project, default_enabled: :yaml)
@@ -49,7 +49,7 @@
           = (s_("Pipeline|Specify variable values to be used in this run. The values specified in %{settings_link} will be used by default.") % {settings_link: settings_link}).html_safe
 
     .form-actions
-      = f.submit s_('Pipeline|Run Pipeline'), class: 'btn btn-success js-variables-save-button'
-      = link_to _('Cancel'), project_pipelines_path(@project), class: 'btn btn-default float-right'
+      = f.submit s_('Pipeline|Run pipeline'), class: 'btn gl-button btn-confirm gl-mr-3 js-variables-save-button'
+      = link_to _('Cancel'), project_pipelines_path(@project), class: 'btn gl-button btn-default'
 
   %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 68c80833299..98b1c5adcb5 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -24,6 +24,7 @@
       - lint_link_start = '<a href="%{url}">'.html_safe % { url: lint_link_url }
       = s_('You can also test your %{gitlab_ci_yml} in %{lint_link_start}CI Lint%{lint_link_end}').html_safe % { gitlab_ci_yml: '.gitlab-ci.yml', lint_link_start: lint_link_start, lint_link_end: '</a>'.html_safe }
 
-  = render "projects/pipelines/with_tabs", pipeline: @pipeline, pipeline_has_errors: pipeline_has_errors
+  #js-pipeline-notification{ data: { dag_doc_path: help_page_path('ci/yaml/README.md', anchor: 'needs') } }
+  = render "projects/pipelines/with_tabs", pipeline: @pipeline, stages: @stages, pipeline_has_errors: pipeline_has_errors
 
 .js-pipeline-details-vue{ data: { endpoint: project_pipeline_path(@project, @pipeline, format: :json), metrics_path: namespace_project_ci_prometheus_metrics_histograms_path(namespace_id: @project.namespace, project_id: @project, format: :json), pipeline_project_path: @project.full_path, pipeline_iid: @pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@pipeline) } }
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
index c88dae079ae..22bf61b6873 100644
--- a/app/views/projects/project_members/index.html.haml
+++ b/app/views/projects/project_members/index.html.haml
@@ -54,25 +54,25 @@
         = link_to '#tab-members', class: ['nav-link', ('active' unless groups_tab_active?)], data: { toggle: 'tab' } do
           %span
             = _('Members')
-          %span.badge.badge-pill= @project_members.total_count
+          %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @project_members.total_count
       - if show_groups?(@group_links)
         %li.nav-item
           = link_to '#tab-groups', class: ['nav-link', ('active' if groups_tab_active?)] , data: { toggle: 'tab', qa_selector: 'groups_list_tab' } do
             %span
               = _('Groups')
-            %span.badge.badge-pill= @group_links.count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @group_links.count
       - if show_invited_members?(@project, @invited_members)
         %li.nav-item
           = link_to '#tab-invited-members', class: 'nav-link', data: { toggle: 'tab' } do
             %span
               = _('Invited')
-            %span.badge.badge-pill= @invited_members.count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @invited_members.count
       - if show_access_requests?(@project, @requesters)
         %li.nav-item
           = link_to '#tab-access-requests', class: 'nav-link', data: { toggle: 'tab' } do
             %span
               = _('Access requests')
-            %span.badge.badge-pill= @requesters.count
+            %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= @requesters.count
     .tab-content
       #tab-members.tab-pane{ class: ('active' unless groups_tab_active?) }
         .js-project-members-list{ data: project_members_list_data_attributes(@project, @project_members) }
diff --git a/app/views/projects/protected_branches/shared/_branches_list.html.haml b/app/views/projects/protected_branches/shared/_branches_list.html.haml
index 522e9888bc6..2691513c994 100644
--- a/app/views/projects/protected_branches/shared/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/shared/_branches_list.html.haml
@@ -23,7 +23,7 @@
           %th
             = s_("ProtectedBranch|Allowed to push")
 
-          - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project)
+          - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project, default_enabled: :yaml)
             %th
               = s_("ProtectedBranch|Allow force push")
               %span.has-tooltip{ data: { container: 'body' }, title: s_('ProtectedBranch|Allow force push for all users with push access.'), 'aria-hidden': 'true' }
diff --git a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
index ae03b198bc9..9fdcea96c00 100644
--- a/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/shared/_create_protected_branch.html.haml
@@ -21,7 +21,7 @@
         = f.label :push_access_levels_attributes, s_("ProtectedBranch|Allowed to push:"), class: 'col-md-2 text-left text-md-right'
         .col-md-10
           = yield :push_access_levels
-      - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project)
+      - if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project, default_enabled: :yaml)
         .form-group.row
           = f.label :allow_force_push, s_("ProtectedBranch|Allow force push:"), class: 'col-md-2 gl-text-left text-md-right'
           .col-md-10
@@ -30,4 +30,4 @@
               = s_("ProtectedBranch|Allow force push for all users with push access.")
       = render_if_exists 'projects/protected_branches/ee/code_owner_approval_form', f: f
     .card-footer
-      = f.submit s_('ProtectedBranch|Protect'), class: 'btn-success gl-button btn', disabled: true, data: { qa_selector: 'protect_button' }
+      = f.submit s_('ProtectedBranch|Protect'), class: 'gl-button btn btn-confirm', disabled: true, data: { qa_selector: 'protect_button' }
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 332cdd98e4a..ba0935fff7d 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
@@ -20,4 +20,4 @@
             = yield :create_access_levels
 
     .card-footer
-      = f.submit _('Protect'), class: 'btn-success btn', disabled: true, data: { qa_selector: 'protect_tag_button' }
+      = f.submit _('Protect'), class: 'gl-button btn btn-confirm', disabled: true, data: { qa_selector: 'protect_tag_button' }
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 71c29f9b7b6..972c96dc882 100644
--- a/app/views/projects/protected_tags/shared/_protected_tag.html.haml
+++ b/app/views/projects/protected_tags/shared/_protected_tag.html.haml
@@ -19,4 +19,4 @@
 
   - if can? current_user, :admin_project, @project
     %td
-      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], data: { confirm: 'Tag will be writable for developers. Are you sure?' }, method: :delete, class: 'btn btn-warning'
+      = link_to 'Unprotect', [@project, protected_tag, { update_section: 'js-protected-tags-settings' }], data: { confirm: 'Tag will be writable for developers. Are you sure?' }, method: :delete, class: 'gl-button btn btn-danger-secondary'
diff --git a/app/views/projects/runners/_group_runners.html.haml b/app/views/projects/runners/_group_runners.html.haml
index 6e46423cde0..b37b530c33f 100644
--- a/app/views/projects/runners/_group_runners.html.haml
+++ b/app/views/projects/runners/_group_runners.html.haml
@@ -16,7 +16,7 @@
       = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
         = _('Disable group runners')
     - else
-      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-success btn-inverted', method: :post do
+      = link_to toggle_group_runners_project_runners_path(@project), class: 'btn gl-button btn-confirm-secondary', method: :post do
         = _('Enable group runners')
     &nbsp;
     = _('for this project')
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 7f5acbbe890..bf2e746b4a4 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,44 +1,40 @@
-%li.runner{ id: dom_id(runner) }
-  %h4
-    = runner_status_icon(runner)
-
-    - if @project_runners.include?(runner)
-      = link_to _("%{token}...") % { token: runner.short_sha }, project_runner_path(@project, runner), class: 'commit-sha has-tooltip', title: _("Partial token for reference only")
-
+%li{ id: dom_id(runner) }
+  .gl-display-flex.gl-justify-content-space-between
+    %div
+      = runner_status_icon(runner, size: 16)
+      - if @project_runners.include?(runner)
+        = link_to "##{runner.id} (#{runner.short_sha})", project_runner_path(@project, runner)
+      - else
+        %span
+          = "##{runner.id} (#{runner.short_sha})"
       - if runner.locked?
         %span.has-tooltip{ title: _('Locked to current projects') }
           = sprite_icon('lock')
-
-      %small.edit-runner
-        = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-edit' do
-          = sprite_icon('pencil', css_class: 'gl-my-2')
-    - else
-      %span.commit-sha
-        = runner.short_sha
-
-    .float-right
-      - if @project_runners.include?(runner)
-        - if runner.active?
-          = link_to _('Pause'), pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-sm btn-danger', data: { confirm: _("Are you sure?") }
-        - else
-          = link_to _('Resume'), resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-success btn-sm'
-        - if runner.belongs_to_one_project?
-          = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger btn-sm'
-        - else
-          - runner_project = @project.runner_projects.find_by(runner_id: runner) # rubocop: disable CodeReuse/ActiveRecord
-          = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger btn-sm'
-      - elsif runner.project_type?
-        = form_for [@project, @project.runner_projects.new] do |f|
-          = f.hidden_field :runner_id, value: runner.id
-          = f.submit _('Enable for this project'), class: 'btn gl-button btn-sm'
-  .float-right
-    %small.light
-      \##{runner.id}
+    .gl-ml-2
+      .btn-group.btn-group-sm
+        - if @project_runners.include?(runner)
+          = link_to edit_project_runner_path(@project, runner), class: 'btn gl-button btn-icon', title: _('Edit'), aria: { label: _('Edit') }, data: { testid: 'edit-runner-link', toggle: 'tooltip', placement: 'top', container: 'body' } do
+            = sprite_icon('pencil')
+          - if runner.active?
+            = link_to pause_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: _('Pause'), aria: { label: _('Pause') }, data: { toggle: 'tooltip', placement: 'top', container: 'body', confirm: _("Are you sure?") } do
+              = sprite_icon('pause')
+          - else
+            = link_to resume_project_runner_path(@project, runner), method: :post, class: 'btn gl-button btn-icon', title: _('Resume'), aria: { label: _('Resume') }, data: { toggle: 'tooltip', placement: 'top', container: 'body' } do
+              = sprite_icon('play')
+          - if runner.belongs_to_one_project?
+            = link_to _('Remove runner'), project_runner_path(@project, runner), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger'
+          - else
+            - runner_project = @project.runner_projects.find_by(runner_id: runner) # rubocop: disable CodeReuse/ActiveRecord
+            = link_to _('Disable for this project'), project_runner_project_path(@project, runner_project), data: { confirm: _("Are you sure?") }, method: :delete, class: 'btn gl-button btn-danger'
+        - elsif runner.project_type?
+          = form_for [@project, @project.runner_projects.new] do |f|
+            = f.hidden_field :runner_id, value: runner.id
+            = f.submit _('Enable for this project'), class: 'btn gl-button'
   - if runner.description.present?
-    %p.runner-description
+    %p.gl-my-2
       = runner.description
   - if runner.tags.present?
-    %p
+    .gl-my-2
       - runner.tags.map(&:name).sort.each do |tag|
         %span.badge.gl-badge.sm.badge-pill.badge-primary
           = tag
diff --git a/app/views/projects/runners/_shared_runners.html.haml b/app/views/projects/runners/_shared_runners.html.haml
index 484d8f8a40c..fccfca38013 100644
--- a/app/views/projects/runners/_shared_runners.html.haml
+++ b/app/views/projects/runners/_shared_runners.html.haml
@@ -12,7 +12,7 @@
         = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-warning-secondary', method: :post do
           = _('Disable shared runners')
       - else
-        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-success', method: :post do
+        = link_to toggle_shared_runners_project_runners_path(@project), class: 'btn gl-button btn-confirm', method: :post do
           = _('Enable shared runners')
       &nbsp; for this project
 
diff --git a/app/views/projects/runners/edit.html.haml b/app/views/projects/runners/edit.html.haml
index f93cd23c83e..77150715158 100644
--- a/app/views/projects/runners/edit.html.haml
+++ b/app/views/projects/runners/edit.html.haml
@@ -1,6 +1,9 @@
-- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('runners')
+- page_title _('Edit'), "#{@runner.description} ##{@runner.id}", _('Runners')
 
-%h4 Runner ##{@runner.id}
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
-%hr
-  = render 'shared/runners/form', runner: @runner, runner_form_url: project_runner_path(@project, @runner)
+= render 'shared/runners/runner_type_alert', runner: @runner
+
+= render 'shared/runners/form', runner: @runner, runner_form_url: project_runner_path(@project, @runner)
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 549ca36cb6a..fe983961657 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -1,20 +1,31 @@
 - pretty_name = @project&.full_name ? html_escape(@project&.full_name) : '<' + _('project name') + '>'
 - run_actions_text = html_escape(s_("ProjectService|Perform common operations on GitLab project: %{project_name}")) % { project_name: pretty_name }
 
-%p= s_("ProjectService|To set up this service:")
+%p= s_("ProjectService|To configure this integration, you should:")
 %ul.list-unstyled.indent-list
   %li
     1.
-    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands', target: '_blank', rel: 'noopener noreferrer nofollow' do
+    = link_to 'https://docs.gitlab.com/ee/user/project/integrations/mattermost_slash_commands.html#enable-custom-slash-commands', target: '_blank', rel: 'noopener noreferrer nofollow' do
       Enable custom slash commands
       = sprite_icon('external-link')
-    on your Mattermost installation
+    on your Mattermost installation.
   %li
     2.
-    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command', target: '_blank', rel: 'noopener noreferrer nofollow' do
+    = link_to 'https://docs.gitlab.com/ee/user/project/integrations/mattermost_slash_commands.html#create-a-slash-command', target: '_blank', rel: 'noopener noreferrer nofollow' do
       Add a slash command
       = sprite_icon('external-link')
-    in your Mattermost team with these options:
+    in your Mattermost team with the options listed below.
+  %li
+    3. Paste the token into the
+    %strong Token
+    field.
+  %li
+    4. Select the
+    %strong Active
+    check box, then select
+    %strong Save changes
+    to start using GitLab inside Mattermost!
+
 %hr
 
 .help-form
@@ -85,17 +96,3 @@
       = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
       .input-group-append
         = clipboard_button(target: '#autocomplete_description', class: 'input-group-text')
-
-%hr
-
-%ul.list-unstyled.indent-list
-  %li
-    3. Paste the
-    %strong Token
-    into the field below
-  %li
-    4. Select the
-    %strong Active
-    checkbox, press
-    %strong Save changes
-    and start using GitLab inside Mattermost!
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
index 1005d9f7990..4a7757daebc 100644
--- a/app/views/projects/services/mattermost_slash_commands/_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -3,15 +3,15 @@
 .info-well
   .well-segment
     %p
-      = s_("MattermostService|This service allows users to perform common operations on this project by entering slash commands in Mattermost.")
+      = s_("MattermostService|Use this service to perform common tasks in your project by entering slash commands in Mattermost.")
       = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
-        = _("View documentation")
+        = _("How do I configure this integration?")
         = sprite_icon('external-link')
     %p.inline
-      = s_("MattermostService|See list of available commands in Mattermost after setting up this service, by entering")
+      = s_("MattermostService|After you configure the integration, view your new Mattermost commands by entering")
     %kbd.inline /&lt;trigger&gt; help
-    - unless enabled || @service.template?
+    - if !enabled && @service.project_level?
       = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
 
-- if enabled && !@service.template?
+- if enabled && @service.project_level?
   = render 'projects/services/mattermost_slash_commands/installation_info', subject: @service
diff --git a/app/views/projects/services/prometheus/_configuration_banner.html.haml b/app/views/projects/services/prometheus/_configuration_banner.html.haml
index 9b8da857398..3786b845692 100644
--- a/app/views/projects/services/prometheus/_configuration_banner.html.haml
+++ b/app/views/projects/services/prometheus/_configuration_banner.html.haml
@@ -21,6 +21,6 @@
         .col-sm-10
           %p.gl-mt-3
             = s_('PrometheusService|Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments.')
-          = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn gl-button btn-success'
+          = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn gl-button btn-confirm'
 
 %hr
diff --git a/app/views/projects/services/prometheus/_custom_metrics.html.haml b/app/views/projects/services/prometheus/_custom_metrics.html.haml
index 70685a8a9eb..a901d5b3575 100644
--- a/app/views/projects/services/prometheus/_custom_metrics.html.haml
+++ b/app/views/projects/services/prometheus/_custom_metrics.html.haml
@@ -13,7 +13,7 @@
       -# haml-lint:disable NoPlainNodes
       %span.badge.badge-pill.js-custom-monitored-count 0
       -# haml-lint:enable NoPlainNodes
-      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn gl-button btn-success js-new-metric-button hidden', data: { qa_selector: 'new_metric_button' }
+      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn gl-button btn-confirm gl-ml-auto js-new-metric-button hidden', data: { qa_selector: 'new_metric_button' }
     .card-body
       .flash-container.hidden
         .flash-warning
diff --git a/app/views/projects/services/slack/_help.haml b/app/views/projects/services/slack/_help.haml
index 1fd448020a0..c5fcd5ca5fe 100644
--- a/app/views/projects/services/slack/_help.haml
+++ b/app/views/projects/services/slack/_help.haml
@@ -1,16 +1,4 @@
-- webhooks_link_url = 'https://slack.com/apps/A0F7XDUAZ-incoming-webhooks'
-- webhooks_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: webhooks_link_url }
-
 .info-well
   .well-segment
-    %p= s_('SlackIntegration|This service sends notifications about project events to Slack channels. To set up this service:')
-    %ol
-      %li
-        = html_escape(s_('SlackIntegration|%{webhooks_link_start}Add an incoming webhook%{webhooks_link_end} in your Slack team. The default channel can be overridden for each event.')) % { webhooks_link_start: webhooks_link_start.html_safe, webhooks_link_end: '</a>'.html_safe }
-      %li
-        = html_escape(s_('SlackIntegration|Paste the %{strong_open}Webhook URL%{strong_close} into the field below.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-      %li
-        = html_escape(s_('SlackIntegration|Select events below to enable notifications. The %{strong_open}Slack channel names%{strong_close} and %{strong_open}Slack username%{strong_close} fields are optional.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-    %p.mt-3.mb-0
-      = html_escape(s_('SlackIntegration|%{strong_open}Note:%{strong_close} Usernames and private channels are not supported.')) % { strong_open: '<strong>'.html_safe, strong_close: '</strong>'.html_safe }
-      = link_to _('Learn more'), help_page_path('user/project/integrations/slack')
+    %p= s_('SlackIntegration|Sends notifications about project events to Slack channels.')
+    = link_to _('How do I set up this service?'), help_page_path('user/project/integrations/slack')
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index 67c43bd2f33..b68addcb093 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -11,7 +11,7 @@
     %p.inline
       = s_("SlackService|See list of available commands in Slack after setting up this service, by entering")
     %kbd.inline /&lt;command&gt; help
-    - unless @service.template?
+    - if @service.project_level?
       %p= _("To set up this service:")
       %ul.list-unstyled.indent-list
         %li
@@ -58,7 +58,7 @@
           = label_tag nil, _('Customize icon'), class: 'col-12 col-form-label label-bold'
           .col-12
             = image_tag(asset_url('slash-command-logo.png', skip_pipeline: true), width: 36, height: 36, class: 'mr-3')
-            = link_to(_('Download image'), asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
+            = link_to(_('Download image'), asset_url('gitlab_logo.png'), class: 'gl-button btn btn-default btn-sm', target: '_blank', rel: 'noopener noreferrer')
 
         .form-group
           = label_tag nil, _('Autocomplete'), class: 'col-12 col-form-label label-bold'
diff --git a/app/views/projects/settings/_archive.html.haml b/app/views/projects/settings/_archive.html.haml
index 4300ebb4852..5e0f24cea21 100644
--- a/app/views/projects/settings/_archive.html.haml
+++ b/app/views/projects/settings/_archive.html.haml
@@ -11,7 +11,7 @@
     %p= _("Unarchiving the project will restore its members' ability to make changes to it. The repository can be committed to, and issues, comments, and other entities can be created. %{strong_start}Once active, this project shows up 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 }
     = link_to _('Unarchive project'), unarchive_project_path(@project),
         data: { confirm: _("Are you sure that you want to unarchive this project?"), qa_selector: 'unarchive_project_link' },
-        method: :post, class: "gl-button btn btn-success"
+        method: :post, class: "gl-button btn btn-confirm"
   - else
     - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/settings/index', anchor: 'archiving-a-project') }
     %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up 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 }
diff --git a/app/views/projects/settings/_general.html.haml b/app/views/projects/settings/_general.html.haml
index d1a95886115..845fb299b74 100644
--- a/app/views/projects/settings/_general.html.haml
+++ b/app/views/projects/settings/_general.html.haml
@@ -37,6 +37,6 @@
     = render 'shared/choose_avatar_button', f: f
     - if @project.avatar?
       %hr
-      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
+      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'
 
-  = f.submit _('Save changes'), class: "gl-button btn btn-success gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
+  = f.submit _('Save changes'), class: "gl-button btn btn-confirm gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }
diff --git a/app/views/projects/settings/access_tokens/index.html.haml b/app/views/projects/settings/access_tokens/index.html.haml
index 100eb5991dc..01f3e441eef 100644
--- a/app/views/projects/settings/access_tokens/index.html.haml
+++ b/app/views/projects/settings/access_tokens/index.html.haml
@@ -9,10 +9,20 @@
     %h4.gl-mt-0
       = page_title
     %p
+    - if current_user.can?(:create_resource_access_tokens, @project)
       = _('You can generate an access token scoped to this project for each application to use the GitLab API.')
-    -# Commented out until https://gitlab.com/gitlab-org/gitlab/-/issues/219551 is fixed
-    -# %p
-    -#   = _('You can also use project access tokens to authenticate against Git over HTTP.')
+      -# Commented out until https://gitlab.com/gitlab-org/gitlab/-/issues/219551 is fixed
+      -# %p
+      -#   = _('You can also use project access tokens to authenticate against Git over HTTP.')
+    - else
+      = _('Project access token creation is disabled in this group. You can still use and manage existing tokens.')
+      %p
+      - root_group = @project.group.root_ancestor
+      - if current_user.can?(:admin_group, root_group)
+        - group_settings_link = edit_group_path(root_group)
+        - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_settings_link }
+        = _('You can enable project access token creation in %{link_start}group settings%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
 
   .col-lg-8
     - if @new_project_access_token
@@ -20,12 +30,13 @@
           type: type,
           new_token_value: @new_project_access_token
 
-    = render 'shared/access_tokens/form',
-        type: type,
-        path: project_settings_access_tokens_path(@project),
-        token: @project_access_token,
-        scopes: @scopes,
-        prefix: :project_access_token
+    - if current_user.can?(:create_resource_access_tokens, @project)
+      = render 'shared/access_tokens/form',
+          type: type,
+          path: project_settings_access_tokens_path(@project),
+          token: @project_access_token,
+          scopes: @scopes,
+          prefix: :project_access_token
 
     = render 'shared/access_tokens/table',
         active_tokens: @active_project_access_tokens,
diff --git a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
index 5f79dd3d4bb..68e4bed8b9a 100644
--- a/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_autodevops_form.html.haml
@@ -54,4 +54,4 @@
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
                     = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
 
-          = f.submit _('Save changes'), class: "btn gl-button btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }
+          = f.submit _('Save changes'), class: "btn gl-button btn-confirm gl-mt-5", data: { qa_selector: 'save_changes_button' }
diff --git a/app/views/projects/settings/ci_cd/_form.html.haml b/app/views/projects/settings/ci_cd/_form.html.haml
index 3b0073848a6..c4b5c23be13 100644
--- a/app/views/projects/settings/ci_cd/_form.html.haml
+++ b/app/views/projects/settings/ci_cd/_form.html.haml
@@ -96,7 +96,7 @@
             = html_escape(_('The regular expression used to find test coverage output in the job log. For example, use %{regex} for Simplecov (Ruby). Leave blank to disable.')) % { regex: '<code>\(\d+.\d+%\)</code>'.html_safe }
             = link_to sprite_icon('question-o'), help_page_path('ci/pipelines/settings', anchor: 'test-coverage-parsing'), target: '_blank'
 
-        = f.submit _('Save changes'), class: "btn gl-button btn-success", data: { qa_selector: 'save_general_pipelines_changes_button' }
+        = f.submit _('Save changes'), class: "btn gl-button btn-confirm", data: { qa_selector: 'save_general_pipelines_changes_button' }
 
 %hr
 
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
index cca980b5359..d955dabd04c 100644
--- a/app/views/projects/settings/ci_cd/show.html.haml
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -5,8 +5,6 @@
 - expanded = expanded_by_default?
 - general_expanded = @project.errors.empty? ? expanded : true
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 %section.settings#js-general-pipeline-settings.no-animate{ class: ('expanded' if general_expanded), data: { qa_selector: 'general_pipelines_settings_content' } }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
diff --git a/app/views/projects/settings/integrations/show.html.haml b/app/views/projects/settings/integrations/show.html.haml
index 3f5fd765b11..af37795a7c5 100644
--- a/app/views/projects/settings/integrations/show.html.haml
+++ b/app/views/projects/settings/integrations/show.html.haml
@@ -12,7 +12,7 @@
     .gl-alert-actions
       = link_to _('Go to Webhooks'), project_hooks_path(@project), class: 'gl-button btn gl-alert-action btn-info'
 
-%h4= _('Integrations')
+%h3= _('Integrations')
 - integrations_link_start = '<a href="%{url}">'.html_safe % { url: help_page_url('user/project/integrations/overview') }
 - 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 }
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
index 079812f7077..0418d7df42d 100644
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -5,12 +5,12 @@
 
 %section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h4
-      = _('Alerts')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
+      = _('Alert integrations')
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
-      = _('Display alerts from all your monitoring tools directly within GitLab.')
-      = link_to _('More information'), help_page_path('operations/incident_management/index.md'), target: '_blank', rel: 'noopener noreferrer'
+      = _('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
     .js-alerts-settings{ data: alerts_settings_data }
diff --git a/app/views/projects/settings/operations/_configuration_banner.html.haml b/app/views/projects/settings/operations/_configuration_banner.html.haml
index 888625689f1..8551aa5380e 100644
--- a/app/views/projects/settings/operations/_configuration_banner.html.haml
+++ b/app/views/projects/settings/operations/_configuration_banner.html.haml
@@ -21,4 +21,4 @@
         .col-sm-10
           %p.gl-mt-3
             = s_('PrometheusService|Monitor your project’s environments by deploying and configuring Prometheus on your clusters.')
-          = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'btn btn-success'
+          = link_to s_('PrometheusService|Install Prometheus on clusters'), project_clusters_path(project), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/settings/operations/_error_tracking.html.haml b/app/views/projects/settings/operations/_error_tracking.html.haml
index fe302978da6..1e77f37ebb4 100644
--- a/app/views/projects/settings/operations/_error_tracking.html.haml
+++ b/app/views/projects/settings/operations/_error_tracking.html.haml
@@ -4,9 +4,9 @@
 
 %section.settings.no-animate.js-error-tracking-settings
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Error tracking')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
       = _('To link Sentry to GitLab, enter your Sentry URL and Auth Token.')
diff --git a/app/views/projects/settings/operations/_prometheus.html.haml b/app/views/projects/settings/operations/_prometheus.html.haml
index ccf5b5dc75f..1c7bcbbca0b 100644
--- a/app/views/projects/settings/operations/_prometheus.html.haml
+++ b/app/views/projects/settings/operations/_prometheus.html.haml
@@ -1,8 +1,8 @@
 %section.settings.no-animate.js-prometheus-settings
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Prometheus')
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
       = _('Link Prometheus monitoring to GitLab.')
diff --git a/app/views/projects/settings/operations/_tracing.html.haml b/app/views/projects/settings/operations/_tracing.html.haml
index 03970dfe0b9..a591fa33096 100644
--- a/app/views/projects/settings/operations/_tracing.html.haml
+++ b/app/views/projects/settings/operations/_tracing.html.haml
@@ -3,9 +3,9 @@
 
 %section.settings.border-0.no-animate
   .settings-header{ :class => "border-top" }
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("Jaeger tracing")
-    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
+    %button.btn.btn-default.gl-button.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
       - if has_jaeger_url
@@ -17,17 +17,18 @@
         - tracing_link = link_to project_tracing_path(@project) do
           %span
             = _('Tracing')
-      = _("To open Jaeger and easily view tracing from GitLab, link the %{link} page to your server").html_safe % { link: tracing_link }
+      = _("To open Jaeger from GitLab to view tracing from the %{link} page, add a URL to your Jaeger server.").html_safe % { link: tracing_link }
+      = link_to _('Learn more.'), help_page_path('operations/tracing'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = form_for @project, url: project_settings_operations_path(@project), method: :patch do |f|
       = form_errors(@project)
       .form-group
         = f.fields_for :tracing_setting_attributes, setting do |form|
           = form.label :external_url, _('Jaeger URL'), class: 'label-bold'
-          = form.url_field :external_url, class: 'form-control gl-form-input', placeholder: 'e.g. https://jaeger.mycompany.com'
+          = form.url_field :external_url, class: 'form-control gl-form-input', placeholder: 'https://jaeger.example.com'
           %p.form-text.text-muted
-            - jaeger_help_url = "https://www.jaegertracing.io/docs/1.7/getting-started/"
+            - jaeger_help_url = "https://www.jaegertracing.io/docs/getting-started/"
             - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }
             - link_end_tag = "#{sprite_icon('external-link', css_class: 'ml-1 vertical-align-middle')}</a>".html_safe
-            = _("For more information, please review %{link_start_tag}Jaeger's configuration doc%{link_end_tag}").html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
-      = f.submit _('Save changes'), class: 'btn btn-success'
+            = _("Learn more about %{link_start_tag}Jaeger configuration%{link_end_tag}.").html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
+      = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/projects/settings/operations/show.html.haml b/app/views/projects/settings/operations/show.html.haml
index 5ba796f5720..73722a5a789 100644
--- a/app/views/projects/settings/operations/show.html.haml
+++ b/app/views/projects/settings/operations/show.html.haml
@@ -2,8 +2,6 @@
 - page_title _('Operations Settings')
 - breadcrumb_title _('Operations Settings')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
 = render 'projects/settings/operations/error_tracking'
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
index 8ac42ce3f81..24fc137fd29 100644
--- a/app/views/projects/settings/repository/show.html.haml
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -3,8 +3,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
 - deploy_token_description = s_('DeployTokens|Deploy tokens allow access to packages, your repository, and registry images.')
 
-- enable_search_settings locals: { container_class: 'gl-my-5' }
-
 = render "projects/default_branch/show"
 = render_if_exists "projects/push_rules/index"
 = render "projects/mirrors/mirror_repos"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 40faf91eadf..90b79fddff1 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -1,4 +1,4 @@
-- current_route_path = request.fullpath.match(/-\/tree\/[^\/]+\/(.+$)/).to_a[1]
+- 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 || "" })
 - @content_class = "limit-container-width" unless fluid_layout
 - @skip_current_level_breadcrumb = true
diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml
index a505b34f46c..f53b2051835 100644
--- a/app/views/projects/snippets/index.html.haml
+++ b/app/views/projects/snippets/index.html.haml
@@ -9,7 +9,7 @@
 
       - if new_project_snippet_link.present?
         .nav-controls
-          = link_to _("New snippet"), new_project_snippet_link, class: "btn btn-success", title: _("New snippet")
+          = link_to _("New snippet"), new_project_snippet_link, class: "gl-button btn btn-confirm", title: _("New snippet")
 
   = render 'shared/snippets/list'
 - else
diff --git a/app/views/projects/stage/_stage.html.haml b/app/views/projects/stage/_stage.html.haml
index 387c8fb3234..92bfd5a48a8 100644
--- a/app/views/projects/stage/_stage.html.haml
+++ b/app/views/projects/stage/_stage.html.haml
@@ -1,5 +1,3 @@
-- stage = stage.present(current_user: current_user)
-
 %tr
   %th{ colspan: 10 }
     %strong
@@ -8,8 +6,8 @@
         = ci_icon_for_status(stage.status)
       &nbsp;
       = stage.name.titleize
-= render stage.latest_ordered_statuses, stage: false, ref: false, pipeline_link: false, allow_retry: true
-= render stage.retried_ordered_statuses, stage: false, ref: false, pipeline_link: false, retried: true
+= render stage.latest_statuses, stage: false, ref: false, pipeline_link: false, allow_retry: true
+= render stage.retried_statuses, stage: false, ref: false, pipeline_link: false, retried: true
 %tr
   %td{ colspan: 10 }
     &nbsp;
diff --git a/app/views/projects/starrers/_starrer.html.haml b/app/views/projects/starrers/_starrer.html.haml
index d8a2c72d9ce..28ec1ed206a 100644
--- a/app/views/projects/starrers/_starrer.html.haml
+++ b/app/views/projects/starrers/_starrer.html.haml
@@ -13,7 +13,7 @@
           %span.cgray= starrer.user.to_reference
 
           - if starrer.user == current_user
-            %span.badge.badge-success.gl-ml-2= _("It's you")
+            %span.badge-pill.badge-success.gl-badge.gl-ml-2.sm= _("It's you")
 
         .block-truncated
           = time_ago_with_tooltip(starrer.starred_since)
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 04d8c1f42bc..229f13d0ff3 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -9,22 +9,25 @@
       = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
 
     .nav-controls
-      = form_tag(filter_tags_path, method: :get) do
-        = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
+      - unless Gitlab::Ci::Features.gldropdown_tags_enabled?
+        = form_tag(filter_tags_path, method: :get) do
+          = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
-      .dropdown
-        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
-          %span.light
-            = tags_sort_options_hash[@sort]
-          = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-        %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
-          %li.dropdown-header
-            = s_('TagsPage|Sort by')
-          - tags_sort_options_hash.each do |value, title|
-            %li
-              = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
+        .dropdown
+          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
+            %span.light
+              = tags_sort_options_hash[@sort]
+            = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
+            %li.dropdown-header
+              = s_('TagsPage|Sort by')
+            - tags_sort_options_hash.each do |value, title|
+              %li
+                = link_to title, filter_tags_path(sort: value), class: ("is-active" if @sort == value)
+      - else
+        #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path, sort_options: tags_sort_options_hash.to_json } }
       - if can?(current_user, :admin_tag, @project)
-        = link_to new_project_tag_path(@project), class: 'btn gl-button btn-success', data: { qa_selector: "new_tag_button" } do
+        = link_to new_project_tag_path(@project), class: 'btn gl-button btn-confirm', data: { qa_selector: "new_tag_button" } do
           = s_('TagsPage|New tag')
       = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn gl-button btn-default btn-icon d-none d-sm-inline-block has-tooltip' do
         = sprite_icon('rss', css_class: 'qa-rss-icon')
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 73b2a92dcc0..2ef1891089f 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -52,6 +52,6 @@
         = render 'shared/zen', attr: :release_description, classes: 'note-textarea', placeholder: s_('TagsPage|Write your release notes or drag files here…'), current_text: @release_description, qa_selector: 'release_notes_field'
         = render 'shared/notes/hints'
   .form-actions
-    = button_tag s_('TagsPage|Create tag'), class: 'btn btn-success', data: { qa_selector: "create_tag_button" }
-    = link_to s_('TagsPage|Cancel'), project_tags_path(@project), class: 'btn btn-cancel'
+    = button_tag s_('TagsPage|Create tag'), class: 'gl-button btn btn-confirm', data: { qa_selector: "create_tag_button" }
+    = link_to s_('TagsPage|Cancel'), project_tags_path(@project), class: 'gl-button btn btn-default btn-cancel'
 %script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/app/views/projects/tags/releases/edit.html.haml b/app/views/projects/tags/releases/edit.html.haml
index d82c89a3f9f..f181212b328 100644
--- a/app/views/projects/tags/releases/edit.html.haml
+++ b/app/views/projects/tags/releases/edit.html.haml
@@ -15,5 +15,5 @@
     = render 'shared/notes/hints'
   .error-alert
   .gl-mt-3
-    = f.submit 'Save changes', class: 'btn gl-button btn-success'
+    = f.submit 'Save changes', class: 'btn gl-button btn-confirm'
     = link_to "Cancel", project_tag_path(@project, @tag.name), class: "btn gl-button btn-default btn-cancel"
diff --git a/app/views/projects/tracings/_tracing_button.html.haml b/app/views/projects/tracings/_tracing_button.html.haml
index b0ab6fa21e1..fe3af1c6a1a 100644
--- a/app/views/projects/tracings/_tracing_button.html.haml
+++ b/app/views/projects/tracings/_tracing_button.html.haml
@@ -1,2 +1,2 @@
-= link_to project_settings_operations_path(@project), title: _('Configure Tracing'), class: 'gl-button btn btn-success' do
+= link_to project_settings_operations_path(@project), title: _('Configure Tracing'), class: 'gl-button btn btn-confirm' do
   = _('Add Jaeger URL')
diff --git a/app/views/projects/tracings/show.html.haml b/app/views/projects/tracings/show.html.haml
index 8c9bffc81bf..21c1d02d92e 100644
--- a/app/views/projects/tracings/show.html.haml
+++ b/app/views/projects/tracings/show.html.haml
@@ -24,10 +24,10 @@
       .text-content
         %h4.text-left= _('Troubleshoot and monitor your application with tracing')
         %p
-          - jaeger_help_url = "https://www.jaegertracing.io/docs/1.7/getting-started/"
+          - jaeger_help_url = "https://www.jaegertracing.io/docs/getting-started/"
           - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }
           - link_end_tag = "#{sprite_icon('external-link', css_class: 'ml-1 vertical-align-middle')}</a>".html_safe
-          = _('To get started, link this page to your Jaeger server, or find out how to %{link_start_tag}install Jaeger%{link_end_tag}').html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
+          = _('Add a Jaeger URL to replace this page with a link to your Jaeger server. You first need to %{link_start_tag}install Jaeger%{link_end_tag}.').html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
 
           .text-center
             = render 'tracing_button'
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 355277b7d41..2d0c4cc20a0 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -1,4 +1,4 @@
-- current_route_path = request.fullpath.match(/-\/tree\/[^\/]+\/(.+$)/).to_a[1]
+- 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/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 || "/"})
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
index 1dbf8addb57..9043b8e60fc 100644
--- a/app/views/projects/triggers/_form.html.haml
+++ b/app/views/projects/triggers/_form.html.haml
@@ -8,4 +8,4 @@
   .form-group
     = f.label :key, "Description", class: "label-bold"
     = f.text_field :description, class: 'form-control gl-form-input', required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
-  = f.submit btn_text, class: "btn btn-success"
+  = f.submit btn_text, class: "gl-button btn btn-confirm"
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
index c7cb051e40d..85ecfe7a982 100644
--- a/app/views/projects/triggers/_index.html.haml
+++ b/app/views/projects/triggers/_index.html.haml
@@ -2,9 +2,9 @@
   .col-lg-12
     .card
       .card-header
-        = s_("Manage your project's triggers")
+        = _("Manage your project's triggers")
       .card-body
-        = render "projects/triggers/form", btn_text: "Add trigger"
+        = render 'projects/triggers/form', btn_text: _('Add trigger')
         %hr
         - if Feature.enabled?(:ci_pipeline_triggers_settings_vue_ui, @project)
           #js-ci-pipeline-triggers-list.triggers-list{ data: { triggers: @triggers_json } }
@@ -15,32 +15,32 @@
                 %thead
                   %th
                     %strong
-                    = s_("Token")
+                    = _('Token')
                   %th
                     %strong
-                    = s_("Description")
+                    = _('Description')
                   %th
                     %strong
-                    = s_("Owner")
+                    = _('Owner')
                   %th
                     %strong
-                    = s_("Last used")
+                    = _('Last used')
                   %th
                 = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
           - else
             %p.settings-message.text-center.gl-mb-3{ data: { testid: 'no_triggers_content' } }
-              = s_("No triggers exist yet. Use the form above to create one.")
+              = _('No triggers exist yet. Use the form above to create one.')
 
       .card-footer
 
         %p
-          = s_("These examples show how to trigger this project's pipeline for a branch or tag.")
+          = _("These examples show how to trigger this project's pipeline for a branch or tag.")
 
         %p.light
-          = s_("Triggers|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 }
+          = _('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
-          = s_("Use cURL")
+          = _('Use cURL')
 
         %pre
           :plain
@@ -49,26 +49,26 @@
                  -F ref=REF_NAME \
                  #{builds_trigger_url(@project.id)}
         %h5.gl-mt-3
-          = s_("Use .gitlab-ci.yml")
+          = _('Use .gitlab-ci.yml')
 
         %pre
           :plain
             script:
               - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
         %h5.gl-mt-3
-          = s_("Use webhook")
+          = _('Use webhook')
 
         %pre
           :plain
             #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
         %h5.gl-mt-3
-          = s_("Pass job variables")
+          = _('Pass job variables')
 
         %p.light
-          = s_("Triggers|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 }
+          = _('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
-          = s_("cURL:")
+          = _('cURL:')
 
         %pre
           :plain
@@ -78,7 +78,7 @@
                  -F "variables[RUN_NIGHTLY_BUILD]=true" \
                  #{builds_trigger_url(@project.id)}
         %p.light
-          = s_("Webhook:")
+          = _('Webhook:')
 
         %pre.gl-mb-0
           :plain
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index b25199b405a..2def6c06458 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -30,8 +30,8 @@
   %td.text-right.trigger-actions
     - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
     - if can?(current_user, :admin_trigger, trigger)
-      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "btn btn-default btn-sm" do
+      = link_to edit_project_trigger_path(@project, trigger), method: :get, title: "Edit", class: "gl-button btn btn-default btn-sm" do
         = sprite_icon('pencil')
     - if can?(current_user, :manage_trigger, trigger)
-      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "btn btn-default btn-warning btn-sm btn-trigger-revoke" do
+      = link_to project_trigger_path(@project, trigger), data: { confirm: revoke_trigger_confirmation, testid: 'trigger_revoke_button' }, method: :delete, title: "Revoke", class: "gl-button btn btn-default btn-sm btn-trigger-revoke" do
         = sprite_icon('remove')
diff --git a/app/views/registrations/welcome/show.html.haml b/app/views/registrations/welcome/show.html.haml
index d2a2853ecd7..bf5e35a1224 100644
--- a/app/views/registrations/welcome/show.html.haml
+++ b/app/views/registrations/welcome/show.html.haml
@@ -1,12 +1,16 @@
 - page_title _('Your profile')
 - add_page_specific_style 'page_bundles/signup'
+- gitlab_experience_text = _('To personalize your GitLab experience, we\'d like to know a bit more about you')
 
 .row.gl-flex-grow-1
   .d-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-p-5
     .edit-profile.login-page.d-flex.flex-column.gl-align-items-center.pt-lg-3
       = render_if_exists "registrations/welcome/progress_bar"
       %h2.gl-text-center= html_escape(_('Welcome to GitLab,%{br_tag}%{name}!')) % { name: html_escape(current_user.first_name), br_tag: '<br/>'.html_safe }
-      %p.gl-text-center= html_escape(_('To personalize your GitLab experience, we\'d like to know a bit more about you. We won\'t share this information with anyone.')) % { br_tag: '<br/>'.html_safe }
+      - if Gitlab.com?
+        %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. We won\'t share this information with anyone.')) % { gitlab_experience_text: gitlab_experience_text }
+      - else
+        %p.gl-text-center= html_escape(_('%{gitlab_experience_text}. Don\'t worry, this information isn\'t shared outside of your self-managed GitLab instance.')) % { gitlab_experience_text: gitlab_experience_text }
       = form_for(current_user, url: users_sign_up_welcome_path, html: { class: 'card gl-w-full! gl-p-5', 'aria-live' => 'assertive' }) do |f|
         .devise-errors
           = render 'devise/shared/error_messages', resource: current_user
@@ -16,13 +20,14 @@
             = f.select :role, ::User.roles.keys.map { |role| [role.titleize, role] }, {}, class: 'form-control js-user-role-dropdown', autofocus: true
         - if Feature.enabled?(:user_other_role_details)
           .row
-            .form-group.col-sm-12.js-other-role-group{ class: ("hidden") }
+            .form-group.col-sm-12.js-other-role-group.hidden
               = f.label :other_role, _('What is your job title? (optional)'), class: 'form-check-label gl-mb-3'
               = f.text_field :other_role, class: 'form-control'
         = render_if_exists "registrations/welcome/setup_for_company", f: f
+        = render 'devise/shared/email_opted_in', f: f
         .row
           .form-group.col-sm-12.gl-mb-0
             - if partial_exists? "registrations/welcome/button"
               = render "registrations/welcome/button"
             - else
-              = f.submit _('Get started!'), class: 'btn-success gl-button btn btn-block gl-mb-0 gl-p-3', data: { qa_selector: 'get_started_button' }
+              = f.submit _('Get started!'), class: 'btn-confirm gl-button btn btn-block gl-mb-0 gl-p-3', data: { qa_selector: 'get_started_button' }
diff --git a/app/views/search/results/_empty.html.haml b/app/views/search/results/_empty.html.haml
index 0462c29f5c1..2c9ffe3dc1d 100644
--- a/app/views/search/results/_empty.html.haml
+++ b/app/views/search/results/_empty.html.haml
@@ -1,4 +1,4 @@
-.search_box.gl-my-8
+.search_box.gl-my-8.gl-text-center
   .search_glyph
   %h4
     = sprite_icon('search', size: 24, css_class: 'gl-vertical-align-text-bottom')
diff --git a/app/views/search/results/_note.html.haml b/app/views/search/results/_note.html.haml
index d88b7b32ed6..8d5d8670b5c 100644
--- a/app/views/search/results/_note.html.haml
+++ b/app/views/search/results/_note.html.haml
@@ -27,4 +27,4 @@
 
   .note-search-result
     .term
-      = search_md_sanitize(note.note)
+      = simple_search_highlight_and_truncate(note.note, @search_term)
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index fd52f7f40d2..80b50f7a3de 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -1,14 +1,14 @@
-.git-clone-holder.js-git-clone-holder.input-group
+.js-git-clone-holder.input-group.btn-group
   .input-group-prepend
     - if allowed_protocols_present?
       .input-group-text.clone-dropdown-btn.btn
         %span.js-clone-dropdown-label
           = enabled_protocol_button(container, enabled_protocol)
     - else
-      %a#clone-dropdown.input-group-text.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+      %a#clone-dropdown.input-group-text.gl-button.btn.btn-default.btn-icon.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
         %span.js-clone-dropdown-label
           = default_clone_protocol.upcase
-        = sprite_icon('chevron-down')
+        = sprite_icon('chevron-down', css_class: 'gl-icon')
       %ul.dropdown-menu.dropdown-menu-selectable.clone-options-dropdown
         %li
           = ssh_clone_button(container)
@@ -16,7 +16,7 @@
           = http_clone_button(container)
         = render_if_exists 'shared/kerberos_clone_button', container: container
 
-  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus form-control", readonly: true, aria: { label: _('Repository clone URL') }
+  = text_field_tag :clone_url, default_url_to_repo(container), class: "js-select-on-focus btn gl-button", readonly: true, aria: { label: _('Repository clone URL') }
   .input-group-append
-    = clipboard_button(target: '#clone_url', title: _("Copy URL"), class: "input-group-text btn-default btn-clipboard")
+    = clipboard_button(target: '#clone_url', title: _("Copy URL"), class: "input-group-text gl-button btn-default btn-clipboard")
 
diff --git a/app/views/shared/_confirm_fork_modal.html.haml b/app/views/shared/_confirm_fork_modal.html.haml
index b692dffce37..265396d3d8b 100644
--- a/app/views/shared/_confirm_fork_modal.html.haml
+++ b/app/views/shared/_confirm_fork_modal.html.haml
@@ -8,5 +8,5 @@
       .modal-body.p-3
         %p= _("You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.") % { tag_start: '', tag_end: ''}
       .modal-footer
-        = link_to _('Cancel'), '#', class: "gl-button btn btn-default btn-cancel", "data-dismiss" => "modal"
-        = link_to _('Fork project'), fork_path, class: 'gl-button btn btn-confirm', data: { qa_selector: 'fork_project_button' }, method: :post
+        = link_to _('Cancel'), '#', class: "btn gl-button btn-default", "data-dismiss" => "modal"
+        = link_to _('Fork project'), fork_path, class: 'btn gl-button btn-confirm', data: { qa_selector: 'fork_project_button' }, method: :post
diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index ecb462205b0..4e7e5c9d3ba 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -18,4 +18,4 @@
         .form-group
           = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
         .form-actions
-          = submit_tag _('Confirm'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button"
+          = submit_tag _('Confirm'), class: "gl-button btn btn-danger js-confirm-danger-submit qa-confirm-button"
diff --git a/app/views/shared/_delete_label_modal.html.haml b/app/views/shared/_delete_label_modal.html.haml
deleted file mode 100644
index 8d761e3b9c4..00000000000
--- a/app/views/shared/_delete_label_modal.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-.modal{ id: "modal-delete-label-#{label.id}", tabindex: -1 }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h3.page-title= _('Delete label: %{label_name} ?') % { label_name: label.name }
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": true } &times;
-
-      .modal-body
-        %p
-          = html_escape(_('%{label_name} %{span_open}will be permanently deleted from %{subject_name}. This cannot be undone.%{span_close}')) % { label_name: tag.strong(label.name), subject_name: label.subject_name, span_open: '<span>'.html_safe, span_close: '</span>'.html_safe }
-
-      .modal-footer
-        %a{ href: '#', data: { dismiss: 'modal' }, class: 'btn btn-default' }= _('Cancel')
-
-        = link_to _('Delete label'),
-          label.destroy_path,
-          title: _('Delete'),
-          method: :delete,
-          class: 'gl-button btn btn-danger'
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index b1f53e4d0f6..f8ac3832a77 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -2,13 +2,11 @@
   -  offset = defined?(first_line_number) ? first_line_number : 1
   .line-numbers
     - if blob.data.present?
-      - link_icon = sprite_icon('link', size: 12)
       - link = blob_link if defined?(blob_link)
       - blob.data.each_line.each_with_index do |_, index|
         - i = index + offset
         -# We're not using `link_to` because it is too slow once we get to thousands of lines.
-        %a.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
-          = link_icon
+        %a.file-line-num.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
           = i
   - highlight = defined?(highlight_line) && highlight_line ? highlight_line - offset : nil
   .blob-content{ data: { blob_id: blob.id, path: blob.path, highlight_line: highlight, qa_selector: 'file_content' } }
diff --git a/app/views/shared/_file_picker_button.html.haml b/app/views/shared/_file_picker_button.html.haml
index 9e6a7626d89..1d688e7f4b0 100644
--- a/app/views/shared/_file_picker_button.html.haml
+++ b/app/views/shared/_file_picker_button.html.haml
@@ -1,8 +1,8 @@
 - classes = local_assigns.fetch(:classes, '')
 
 %span.js-filepicker
-  %button.gl-button.btn.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
-  %span.file_name.js-filepicker-filename= _("No file chosen")
+  %button.gl-button.btn.btn-default.js-filepicker-button{ type: 'button', class: classes }= _("Choose file…")
+  %span.file_name.js-filepicker-filename= _("No file chosen.")
   = f.file_field field, class: "js-filepicker-input hidden"
   - if help_text.present?
     .form-text.text-muted= help_text
diff --git a/app/views/shared/_flash_user_callout.html.haml b/app/views/shared/_flash_user_callout.html.haml
index fe175195e66..d8032ac521d 100644
--- a/app/views/shared/_flash_user_callout.html.haml
+++ b/app/views/shared/_flash_user_callout.html.haml
@@ -6,6 +6,6 @@
   %div{ class: "flash-#{flash_type}" }
     %div{ class: "#{(container_class unless fluid_layout)} #{(extra_flash_class unless @no_container)} #{@content_class}" }
       %span= message
-      %button.btn.btn-default.close.js-close{ type: 'button',
+      %button.btn.gl-button.btn-default.close.js-close{ type: 'button',
         'aria-label' => _('Dismiss') }
         = sprite_icon('close', css_class: 'dismiss-icon')
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
index 4b006bddbf6..6c3e15cbace 100644
--- a/app/views/shared/_issuable_meta_data.html.haml
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -1,6 +1,7 @@
 - note_count         = @issuable_meta_data[issuable.id].user_notes_count
 - issue_votes        = @issuable_meta_data[issuable.id]
-- upvotes, downvotes = issue_votes.upvotes, issue_votes.downvotes
+- upvotes            = issue_votes.upvotes
+- downvotes          = issue_votes.downvotes
 - issuable_path      = issuable_path(issuable, anchor: 'notes')
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 57575f89803..eb12e9d463c 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -3,4 +3,5 @@
     = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"
 - else
-  = render 'shared/empty_states/issues'
+  - project_select_button = local_assigns.fetch(:project_select_button, false)
+  = render 'shared/empty_states/issues', project_select_button: project_select_button
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 95d7f075964..e4ef0a52eba 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -12,34 +12,34 @@
     - if can?(current_user, :admin_label, @project)
       %li.inline.js-toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
         dom_id: dom_id(label), type: label.type } }
-        %button.label-action.add-priority.btn.btn-transparent.has-tooltip{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
+        %button.add-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip.gl-ml-3{ title: _('Prioritize'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Prioritize label') }
           = sprite_icon('star-o')
-        %button.label-action.remove-priority.btn.btn-transparent.has-tooltip{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
+        %button.remove-priority.btn.gl-button.btn-default-tertiary.btn-sm.has-tooltip.gl-ml-3{ title: _('Remove priority'), type: 'button', data: { placement: 'bottom' }, aria_label: _('Deprioritize label') }
           = sprite_icon('star')
     - if can?(current_user, :admin_label, label)
       %li.inline
-        = link_to label.edit_path, class: 'btn btn-transparent label-action edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
+        = link_to label.edit_path, class: 'btn gl-button btn-default-tertiary btn-sm edit has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
           = sprite_icon('pencil')
     - if can?(current_user, :admin_label, label)
       %li.inline
         .dropdown
-          %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown label-action', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
+          %button{ type: 'button', class: 'btn gl-button btn-default-tertiary btn-sm js-label-options-dropdown', data: { toggle: 'dropdown' }, aria_label: _('Label actions dropdown') }
             = sprite_icon('ellipsis_v')
           .dropdown-menu.dropdown-open-left
             %ul
               - if label.project_label? && label.project.group && can?(current_user, :admin_label, label.project.group)
                 %li
-                  %button.js-promote-project-label-button.btn.btn-transparent{ disabled: true, type: 'button',
+                  %button.js-promote-project-label-button.gl-button.btn.btn-default-tertiary{ disabled: true, type: 'button',
                     data: { url: promote_project_label_path(label.project, label),
                             label_title: label.title,
                             label_color: label.color,
                             label_text_color: label.text_color,
                             group_name: label.project.group.name } }
                     = _('Promote to group label')
-              - if can?(current_user, :admin_label, label)
-                %li
-                  %span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
-                    %button.text-danger.remove-row{ type: 'button' }= _('Delete')
+              %li
+                %span
+                  %button.text-danger.js-delete-label-modal-button{ type: 'button', data: { label_name: label.name, subject_name: label.subject_name, destroy_path: label.destroy_path } }
+                    = _('Delete')
     - if current_user
       %li.inline.label-subscription
         - if label.can_subscribe_to_label_in_different_levels?
@@ -53,13 +53,11 @@
             .dropdown-menu.dropdown-open-left
               %ul
                 %li
-                  %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
+                  %button.js-subscribe-button.label-subscribe-button.gl-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_project_label_path(@project, label) } }
                     %span= _('Subscribe at project level')
                 %li
-                  %button.js-subscribe-button.js-group-level.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
+                  %button.js-subscribe-button.js-group-level.label-subscribe-button.gl-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { status: status, url: toggle_subscription_group_label_path(label.group, label) } }
                     %span= _('Subscribe at group level')
         - else
           %button.gl-button.js-subscribe-button.label-subscribe-button.btn.btn-default.gl-ml-3{ data: { status: status, url: toggle_subscription_path, toggle: 'tooltip' }, title: tooltip_title }
             %span= label_subscription_toggle_button_text(label, @project)
-
-= render 'shared/delete_label_modal', label: label
diff --git a/app/views/shared/_milestone_expired.html.haml b/app/views/shared/_milestone_expired.html.haml
index 171ae9d2c07..925344ab2f7 100644
--- a/app/views/shared/_milestone_expired.html.haml
+++ b/app/views/shared/_milestone_expired.html.haml
@@ -1,4 +1,4 @@
-- if milestone.expired? and not milestone.closed?
+- if milestone.expired? && !milestone.closed?
   .gl-badge.badge-warning.badge-pill.gl-mb-2= _('Expired')
 - if milestone.upcoming?
   .gl-badge.badge-primary.badge-pill.gl-mb-2= _('Upcoming')
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
deleted file mode 100644
index 172f3d85472..00000000000
--- a/app/views/shared/_mini_pipeline_graph.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-.stage-cell
-  - pipeline.legacy_stages.each do |stage|
-    - if stage.status
-      - detailed_status = stage.detailed_status(current_user)
-      - icon_status = "#{detailed_status.icon}_borderless"
-
-      .stage-container.mt-0.ml-1.dropdown{ class: klass }
-        %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
-          = sprite_icon(icon_status)
-
-        %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
-          %li.js-builds-dropdown-list.scrollable-menu
-            %ul
-
-          %li.js-builds-dropdown-loading.hidden
-            .loading-container.text-center
-              %span.spinner{ 'aria-label': _('Loading') }
diff --git a/app/views/shared/_mobile_clone_panel.html.haml b/app/views/shared/_mobile_clone_panel.html.haml
index 3edfd502f13..8b7ef838d2b 100644
--- a/app/views/shared/_mobile_clone_panel.html.haml
+++ b/app/views/shared/_mobile_clone_panel.html.haml
@@ -3,8 +3,8 @@
 - http_copy_label = _('Copy %{http_label} clone URL') % { http_label: gitlab_config.protocol.upcase }
 
 .btn-group.mobile-git-clone.js-mobile-git-clone.btn-block
-  = clipboard_button(button_text: default_clone_label, text: default_url_to_repo(project), hide_button_icon: true, class: "gl-button btn btn-confirm flex-fill input-group-text clone-dropdown-btn js-clone-dropdown-label")
-  %button.gl-button.btn.btn-confirm.btn-icon.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center.w-auto.ml-0{ type: "button", data: { toggle: "dropdown" } }
+  = clipboard_button(button_text: default_clone_label, text: default_url_to_repo(project), hide_button_icon: true, class: "gl-button btn-confirm flex-fill bold justify-content-center input-group-text clone-dropdown-btn js-clone-dropdown-label")
+  %button.btn.gl-button.btn-confirm.dropdown-toggle.js-dropdown-toggle.flex-grow-0.d-flex-center.w-auto.ml-0{ type: "button", data: { toggle: "dropdown" } }
     = sprite_icon("chevron-down", css_class: "dropdown-btn-icon icon")
   %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown{ data: { dropdown: true } }
     - if ssh_enabled?
diff --git a/app/views/shared/_recaptcha_form.html.haml b/app/views/shared/_recaptcha_form.html.haml
index f524747dea0..5c5fc714aea 100644
--- a/app/views/shared/_recaptcha_form.html.haml
+++ b/app/views/shared/_recaptcha_form.html.haml
@@ -20,4 +20,4 @@
 
   - if has_submit
     .row-content-block.footer-block
-      = f.submit _("Submit %{humanized_resource_name}") % { humanized_resource_name: humanized_resource_name }, class: 'gl-button btn btn-confirm'
+      = f.submit _("Create %{humanized_resource_name}") % { humanized_resource_name: humanized_resource_name }, class: 'gl-button btn btn-confirm'
diff --git a/app/views/shared/_search_settings.html.haml b/app/views/shared/_search_settings.html.haml
index d689e9ae5c0..2974b2bf4d0 100644
--- a/app/views/shared/_search_settings.html.haml
+++ b/app/views/shared/_search_settings.html.haml
@@ -1,6 +1,5 @@
 - container_class = local_assigns.fetch(:container_class, 'gl-mt-5')
 
-- if Feature.enabled?(:search_settings_in_page, @project, default_enabled: false)
-  %div{ class: container_class }
-    .js-search-settings-app
-      %input.gl-form-input.form-control{ type: "text", placeholder: _("Search settings"), aria_label: _("Search settings"), disabled: true }
+%div{ class: container_class }
+  .js-search-settings-app
+    %input.gl-form-input.form-control{ type: "text", placeholder: _("Search settings"), aria_label: _("Search settings"), disabled: true }
diff --git a/app/views/shared/access_tokens/_form.html.haml b/app/views/shared/access_tokens/_form.html.haml
index 9709ad8428e..88c24a27497 100644
--- a/app/views/shared/access_tokens/_form.html.haml
+++ b/app/views/shared/access_tokens/_form.html.haml
@@ -23,7 +23,7 @@
         = render_if_exists 'personal_access_tokens/callout_max_personal_access_token_lifetime'
 
         .js-access-tokens-expires-at
-          = f.text_field :expires_at, class: 'datepicker gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off'
+          = f.text_field :expires_at, class: 'datepicker gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', data: { js_name: 'expiresAt' }
 
   .form-group
     = f.label :scopes, _('Scopes'), class: 'label-bold'
@@ -31,7 +31,7 @@
 
   - if prefix == :personal_access_token && Feature.enabled?(:personal_access_tokens_scoped_to_projects, current_user)
     .js-access-tokens-projects
-      %input{ type: 'hidden', name: 'temporary-name', id: 'temporary-id' }
+      %input{ type: 'hidden', name: 'personal_access_token[projects]', id: 'personal_access_token_projects', data: { js_name: 'projects' } }
 
   .gl-mt-3
     = f.submit _('Create %{type}') % { type: type }, class: 'gl-button btn btn-confirm', data: { qa_selector: 'create_token_button' }
diff --git a/app/views/shared/access_tokens/_table.html.haml b/app/views/shared/access_tokens/_table.html.haml
index d7c74255578..2a2a1a911af 100644
--- a/app/views/shared/access_tokens/_table.html.haml
+++ b/app/views/shared/access_tokens/_table.html.haml
@@ -43,7 +43,7 @@
               - else
                 %span.token-never-expires-label= _('Never')
             %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td= link_to _('Revoke'), revoke_route_helper.call(token), method: :put, class: 'gl-button btn btn-danger float-right qa-revoke-button', data: { confirm: _('Are you sure you want to revoke this %{type}? This action cannot be undone.') % { type: type } }
+            %td= link_to _('Revoke'), revoke_route_helper.call(token), method: :put, class: 'gl-button btn btn-danger btn-sm float-right qa-revoke-button', data: { confirm: _('Are you sure you want to revoke this %{type}? This action cannot be undone.') % { type: type } }
 - else
   .settings-message.text-center
     = no_active_tokens_message
diff --git a/app/views/shared/admin/_admin_note.html.haml b/app/views/shared/admin/_admin_note.html.haml
new file mode 100644
index 00000000000..82407705885
--- /dev/null
+++ b/app/views/shared/admin/_admin_note.html.haml
@@ -0,0 +1,7 @@
+- if @group.admin_note.present?
+  - text = @group.admin_note.note
+  .card.border-info
+    .card-header.bg-info.gl-text-white
+      = s_('Admin|Admin notes')
+    .card-body
+      %p= text
diff --git a/app/views/shared/admin/_admin_note_form.html.haml b/app/views/shared/admin/_admin_note_form.html.haml
new file mode 100644
index 00000000000..0bc26f9120f
--- /dev/null
+++ b/app/views/shared/admin/_admin_note_form.html.haml
@@ -0,0 +1,6 @@
+.form-group.row
+  = f.fields_for :admin_note do |an|
+    .col-sm-2.col-form-label.gl-text-right
+      = an.label :note, s_('Admin|Admin notes')
+    .col-sm-10
+      = an.text_area :note, class: 'form-control'
diff --git a/app/views/shared/blob/_markdown_buttons.html.haml b/app/views/shared/blob/_markdown_buttons.html.haml
index 085206714c6..73f3d2a8fcd 100644
--- a/app/views/shared/blob/_markdown_buttons.html.haml
+++ b/app/views/shared/blob/_markdown_buttons.html.haml
@@ -1,4 +1,4 @@
-- modifier_key = client_js_flags[:isMac] ? '⌘' : s_('KeyboardKey|Ctrl+');
+- modifier_key = client_js_flags[:isMac] ? '⌘' : s_('KeyboardKey|Ctrl+')
 
 .md-header-toolbar.active
   = markdown_toolbar_button({ icon: "bold",
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index 8c0893adaaa..bf70149812a 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/app/views/shared/boards/_show.html.haml
@@ -1,8 +1,5 @@
 - board = local_assigns.fetch(:board, nil)
 - group = local_assigns.fetch(:group, false)
--# TODO: Move group_id and can_admin_list to the board store
-  See: https://gitlab.com/gitlab-org/gitlab/-/issues/213082
-- can_admin_list = can?(current_user, :admin_issue_board_list, current_board_parent) == true
 - @no_breadcrumb_container = true
 - @no_container = true
 - @content_class = "issue-boards-content js-focus-mode-board"
@@ -13,23 +10,8 @@
 - page_title("#{board.name}", _("Boards"))
 - add_page_specific_style 'page_bundles/boards'
 
-- content_for :page_specific_javascripts do
-
-  %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal, show_sorting_dropdown: false
-
 = render 'shared/issuable/search_bar', type: :boards, board: board
 #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
-  %board-content{ "v-cloak" => "true",
-    "ref" => "board_content",
-    ":lists" => "state.lists",
-    ":can-admin-list" => can_admin_list,
-    ":disabled" => "disabled",
-    data: { qa_selector: "boards_list" } }
+  %board-content{ ":lists" => "state.lists", ":disabled" => "disabled" }
   = render "shared/boards/components/sidebar", group: group
-  %board-settings-sidebar{ ":can-admin-list" => can_admin_list }
-  - if @project
-    %board-add-issues-modal{ "new-issue-path" => new_project_issue_path(@project),
-      "milestone-path" => milestones_filter_dropdown_path,
-      "label-path" => labels_filter_path_with_defaults,
-      "empty-state-svg" => image_path('illustrations/issues.svg'),
-      ":project-id" => @project.id }
+  %board-settings-sidebar
diff --git a/app/views/shared/boards/components/_sidebar.html.haml b/app/views/shared/boards/components/_sidebar.html.haml
index 59dd571604b..8976e89b3d3 100644
--- a/app/views/shared/boards/components/_sidebar.html.haml
+++ b/app/views/shared/boards/components/_sidebar.html.haml
@@ -1,6 +1,6 @@
 %board-sidebar{ "inline-template" => true, ":current-user" => (UserSerializer.new.represent(current_user) || {}).to_json }
   %transition{ name: "boards-sidebar-slide" }
-    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar", 'aria-label': s_('Boards|Board') }
+    %aside.right-sidebar.right-sidebar-expanded.boards-sidebar{ "v-show" => "showSidebar", 'aria-label': s_('Boards|Board'), 'data-testid': 'issue-boards-sidebar' }
       .issuable-sidebar
         .block.issuable-sidebar-header.position-relative
           %span.issuable-header-text.hide-collapsed.float-left
diff --git a/app/views/shared/deploy_tokens/_form.html.haml b/app/views/shared/deploy_tokens/_form.html.haml
index 2ddfcf43756..4d0858165a2 100644
--- a/app/views/shared/deploy_tokens/_form.html.haml
+++ b/app/views/shared/deploy_tokens/_form.html.haml
@@ -22,29 +22,29 @@
     = f.label :scopes, _('Scopes [Select 1 or more]'), class: 'label-bold'
     %fieldset.form-group.form-check
       = f.check_box :read_repository, class: 'form-check-input qa-deploy-token-read-repository'
-      = label_tag ("deploy_token_read_repository"), 'read_repository', class: 'label-bold form-check-label'
+      = f.label :read_repository, 'read_repository', class: 'label-bold form-check-label'
       .text-secondary= s_('DeployTokens|Allows read-only access to the repository.')
 
     - if container_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
         = f.check_box :read_registry, class: 'form-check-input qa-deploy-token-read-registry'
-        = label_tag ("deploy_token_read_registry"), 'read_registry', class: 'label-bold form-check-label'
+        = f.label :read_registry, 'read_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows read-only access to registry images.')
 
       %fieldset.form-group.form-check
         = f.check_box :write_registry, class: 'form-check-input'
-        = label_tag ("deploy_token_write_registry"), 'write_registry', class: 'label-bold form-check-label'
+        = f.label :write_registry, 'write_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows write access to registry images.')
 
     - if packages_registry_enabled?(group_or_project)
       %fieldset.form-group.form-check
         = f.check_box :read_package_registry, class: 'form-check-input'
-        = label_tag ("deploy_token_read_package_registry"), 'read_package_registry', class: 'label-bold form-check-label'
+        = f.label :read_package_registry, 'read_package_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows read access to the package registry.')
 
       %fieldset.form-group.form-check
         = f.check_box :write_package_registry, class: 'form-check-input'
-        = label_tag ("deploy_token_write_package_registry"), 'write_package_registry', class: 'label-bold form-check-label'
+        = f.label :write_package_registry, 'write_package_registry', class: 'label-bold form-check-label'
         .text-secondary= s_('DeployTokens|Allows write access to the package registry.')
 
   .gl-mt-3
diff --git a/app/views/shared/deploy_tokens/_revoke_modal.html.haml b/app/views/shared/deploy_tokens/_revoke_modal.html.haml
deleted file mode 100644
index 2b31c675f74..00000000000
--- a/app/views/shared/deploy_tokens/_revoke_modal.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-.modal{ id: "revoke-modal-#{token.id}", tabindex: -1 }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h4.modal-title
-          = s_('DeployTokens|Revoke %{b_start}%{name}%{b_end}?').html_safe % { b_start: '<b>'.html_safe, name: token.name, b_end: '</b>'.html_safe }
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span{ "aria-hidden": true } &times;
-      .modal-body
-        %p
-          = s_('DeployTokens|You are about to revoke %{b_start}%{name}%{b_end}.').html_safe % { b_start: '<b>'.html_safe, name: token.name, b_end: '</b>'.html_safe }
-          = s_('DeployTokens|This action cannot be undone.')
-      .modal-footer.gl-flex-direction-row
-        %a{ href: '#', data: { dismiss: 'modal' }, class: 'gl-button btn btn-default' }= _('Cancel')
-        = link_to s_('DeployTokens|Revoke %{name}') % { name: token.name }, revoke_deploy_token_path(group_or_project, token), method: :put, class: 'gl-button btn btn-danger text-truncate'
diff --git a/app/views/shared/deploy_tokens/_table.html.haml b/app/views/shared/deploy_tokens/_table.html.haml
index ad3c53c4925..fe32fcf94d0 100644
--- a/app/views/shared/deploy_tokens/_table.html.haml
+++ b/app/views/shared/deploy_tokens/_table.html.haml
@@ -24,8 +24,9 @@
               - else
                 %span.token-never-expires-label= _('Never')
             %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td= link_to s_('DeployTokens|Revoke'), "#", class: "gl-button btn btn-danger float-right", data: { toggle: "modal", target: "#revoke-modal-#{token.id}"}
-            = render 'shared/deploy_tokens/revoke_modal', token: token, group_or_project: group_or_project
+            %td
+              .js-deploy-token-revoke-button{ data: { button_class: 'float-right', token: token.to_json, revoke_path: revoke_deploy_token_path(group_or_project, token) } }
+
 - else
   .settings-message.text-center
     = s_('DeployTokens|This %{entity_type} has no active Deploy Tokens.') % { entity_type: group_or_project.class.name.downcase }
diff --git a/app/views/doorkeeper/applications/_delete_form.html.haml b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
index 13ae18af2c5..caa553bc2ef 100644
--- a/app/views/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
@@ -1,8 +1,8 @@
 - submit_btn_css ||= 'gl-button btn btn-danger btn-sm'
-= form_tag oauth_application_path(application) do
-  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
+= form_tag path do
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }
   - if defined? small
-    = button_tag type: "submit", class: "gl-button btn btn-default", data: { confirm: _("Are you sure?") } do
+    = button_tag type: "submit", class: "gl-button btn btn-danger btn-icon", data: { confirm: _("Are you sure?") } do
       %span.sr-only
         = _('Destroy')
       = sprite_icon('remove')
diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/shared/doorkeeper/applications/_form.html.haml
index 9f5d87a961f..91a32b55542 100644
--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_form.html.haml
@@ -1,5 +1,5 @@
-= form_for application, url: doorkeeper_submit_path(application), html: { role: 'form', class: 'doorkeeper-app-form' } do |f|
-  = form_errors(application)
+= form_for @application, url: url, html: { role: 'form', class: 'doorkeeper-app-form' } do |f|
+  = form_errors(@application)
 
   .form-group
     = f.label :name, class: 'label-bold'
@@ -20,7 +20,7 @@
 
   .form-group
     = f.label :scopes, class: 'label-bold'
-    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: @application, scopes: @scopes
 
   .gl-mt-3
     = f.submit _('Save application'), class: "gl-button btn btn-confirm"
diff --git a/app/views/shared/doorkeeper/applications/_index.html.haml b/app/views/shared/doorkeeper/applications/_index.html.haml
new file mode 100644
index 00000000000..8ccb4bcdbe0
--- /dev/null
+++ b/app/views/shared/doorkeeper/applications/_index.html.haml
@@ -0,0 +1,88 @@
+- @content_class = "limit-container-width" unless fluid_layout
+
+.row.gl-mt-3
+  .col-lg-4.profile-settings-sidebar
+    %h4.gl-mt-0
+      = page_title
+    %p
+      - if oauth_applications_enabled
+        - if oauth_authorized_applications_enabled
+          = _("Manage applications that can use GitLab as an OAuth provider, and applications that you've authorized to use your account.")
+        - else
+          = _("Manage applications that can use GitLab as an OAuth provider.")
+      - else
+        = _("Manage applications that you've authorized to use your account.")
+  .col-lg-8
+    - if oauth_applications_enabled
+      %h5.gl-mt-0
+        = _('Add new application')
+      = render 'shared/doorkeeper/applications/form', url: form_url
+      %hr
+    - 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
+        %h5
+          = _("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_to edit_application_url.call(application), class: "gl-button btn btn-default btn-icon gl-mr-3" do
+                        %span.sr-only
+                          = _('Edit')
+                        = sprite_icon('pencil')
+                      = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
+        - else
+          .settings-message.text-center
+            = _("You don't have any applications")
+    - if oauth_authorized_applications_enabled
+      .oauth-authorized-applications.prepend-top-20.gl-mb-3
+        - if oauth_applications_enabled
+          %h5
+            = _("Authorized applications (%{size})") % { size: @authorized_apps.size + @authorized_anonymous_tokens.size }
+
+        - if @authorized_tokens.any?
+          .table-responsive
+            %table.table.table-striped
+              %thead
+                %tr
+                  %th= _('Name')
+                  %th= _('Authorized At')
+                  %th= _('Scope')
+                  %th
+              %tbody
+                - @authorized_apps.each do |app|
+                  - token = app.authorized_tokens.order('created_at desc').first # rubocop: disable CodeReuse/ActiveRecord
+                  %tr{ id: "application_#{app.id}" }
+                    %td= app.name
+                    %td= token.created_at
+                    %td= token.scopes
+                    %td= render 'doorkeeper/authorized_applications/delete_form', application: app
+                - @authorized_anonymous_tokens.each do |token|
+                  %tr
+                    %td
+                      = _('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= render 'doorkeeper/authorized_applications/delete_form', token: token
+        - else
+          .settings-message.text-center
+            = _("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
new file mode 100644
index 00000000000..b690aa74ff0
--- /dev/null
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -0,0 +1,39 @@
+.table-holder.oauth-application-show
+  %table.table
+    %tr
+      %td
+        = _('Application ID')
+      %td
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace.monospace{ id: "application_id", type: "text", autocomplete: 'off', value: @application.uid, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#application_id', title: _("Copy ID"), class: "gl-button btn btn-default")
+    %tr
+      %td
+        = _('Secret')
+      %td
+        .clipboard-group
+          .input-group
+            %input.label.label-monospace.monospace{ id: "secret", type: "text", autocomplete: 'off', value: @application.secret, readonly: true }
+            .input-group-append
+              = clipboard_button(target: '#secret', title: _("Copy secret"), class: "gl-button btn btn-default")
+    %tr
+      %td
+        = _('Callback URL')
+      %td
+        - @application.redirect_uri.split.each do |uri|
+          %div
+            %span.monospace= uri
+
+    %tr
+      %td
+        = _('Confidential')
+      %td
+        = @application.confidential? ? _('Yes') : _('No')
+
+    = render "shared/tokens/scopes_list", token: @application
+
+.form-actions
+  = link_to _('Edit'), edit_path, class: 'gl-button btn btn-confirm wide float-left'
+  = render 'shared/doorkeeper/applications/delete_form', path: delete_path, submit_btn_css: 'gl-button btn btn-danger gl-ml-3'
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
index 8ccf14463c7..13d9d71d58e 100644
--- a/app/views/shared/empty_states/_issues.html.haml
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -43,7 +43,7 @@
           .text-center
             - if project_select_button
               = render 'shared/new_project_item_select', path: 'issues/new', label: _('New issue'), type: :issues, with_feature_enabled: 'issues'
-            - else
+            - elsif show_new_issue_link?(@project)
               = link_to _('New issue'), button_path, class: 'gl-button btn btn-confirm', id: 'new_issue_link'
 
             - if show_import_button
@@ -53,7 +53,7 @@
           %strong
             = s_('JiraService|Using Jira for issue tracking?')
         %p.gl-text-center.gl-mb-0
-          - jira_docs_link_url = help_page_url('user/project/integrations/jira', anchor: 'view-jira-issues')
+          - jira_docs_link_url = help_page_url('integration/jira/issues', anchor: 'view-jira-issues')
           - jira_docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jira_docs_link_url }
           = html_escape(s_('JiraService|%{jira_docs_link_start}Enable the Jira integration%{jira_docs_link_end} to view your Jira issues in GitLab.')) % { jira_docs_link_start: jira_docs_link_start.html_safe, jira_docs_link_end: '</a>'.html_safe }
         %p.gl-text-center.gl-mb-0.gl-text-gray-500
diff --git a/app/views/shared/empty_states/_profile_tabs.html.haml b/app/views/shared/empty_states/_profile_tabs.html.haml
index 42a845846d1..c813fd691f1 100644
--- a/app/views/shared/empty_states/_profile_tabs.html.haml
+++ b/app/views/shared/empty_states/_profile_tabs.html.haml
@@ -6,7 +6,7 @@
   .svg-content
     = image_tag illustration_path, size: '75'
     .text-content
-      - if user_profile? and current_user.present? and current_user.username == params[:username]
+      - if user_profile? && current_user.present? && current_user.username == params[:username]
         %h5= current_user_empty_message_header
 
         - if current_user_empty_message_description.present?
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
index 0bddffa881a..917ef666e85 100644
--- a/app/views/shared/empty_states/_wikis.html.haml
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -18,14 +18,14 @@
 
 - elsif @project && can?(current_user, :read_issue, @project)
   - issues_link = link_to s_('WikiEmptyIssueMessage|issue tracker'), project_issues_path(@project)
-  - new_issue_link = link_to s_('WikiEmpty|Suggest wiki improvement'), new_project_issue_path(@project), class: 'btn gl-button btn-confirm', title: s_('WikiEmptyIssueMessage|Suggest wiki improvement')
 
   = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
     %h4
       = messages.dig(:issuable, :title)
     %p.text-left
       = messages.dig(:issuable, :body).html_safe % { issues_link: issues_link }
-    = new_issue_link
+    - if show_new_issue_link?(@project)
+      = link_to s_('WikiEmpty|Suggest wiki improvement'), new_project_issue_path(@project), class: 'btn gl-button btn-confirm', title: s_('WikiEmptyIssueMessage|Suggest wiki improvement')
 
 - else
   = render layout: layout_path, locals: { image_path: 'illustrations/wiki_logout_empty.svg' } do
diff --git a/app/views/shared/form_elements/_description.html.haml b/app/views/shared/form_elements/_description.html.haml
index 7f4aed5d1f7..f8942dddfb4 100644
--- a/app/views/shared/form_elements/_description.html.haml
+++ b/app/views/shared/form_elements/_description.html.haml
@@ -1,7 +1,7 @@
 - project = local_assigns.fetch(:project)
 - model = local_assigns.fetch(:model)
 - form = local_assigns.fetch(:form)
-- placeholder = model.is_a?(MergeRequest) ? _('Describe the goal of the changes and what reviewers should be aware of.') : _('Write a comment or drag your files here…')
+- placeholder = model.is_a?(MergeRequest) ? _('Describe the goal of the changes and what reviewers should be aware of.') : _('Write a description or drag your files here…')
 
 - supports_quick_actions = true
 - preview_url = preview_markdown_path(project, target_type: model.class.name)
@@ -19,9 +19,10 @@
 
     = render layout: 'shared/md_preview', locals: { url: preview_url, referenced_users: true } do
       = render 'shared/zen', f: form, attr: :description,
-                               classes: 'note-textarea qa-issuable-form-description rspec-issuable-form-description',
+                               classes: 'note-textarea rspec-issuable-form-description',
                                placeholder: placeholder,
-                               supports_quick_actions: supports_quick_actions
+                               supports_quick_actions: supports_quick_actions,
+                               qa_selector: 'issuable_form_description'
       = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
       .clearfix
       .error-alert
diff --git a/app/views/shared/hook_logs/_content.html.haml b/app/views/shared/hook_logs/_content.html.haml
index 6b056e93460..51f44afe55e 100644
--- a/app/views/shared/hook_logs/_content.html.haml
+++ b/app/views/shared/hook_logs/_content.html.haml
@@ -24,7 +24,7 @@
 
 %h5 Request headers:
 %pre
-  - hook_log.request_headers.each do |k,v|
+  - hook_log.request_headers.each do |k, v|
     <strong>#{k}:</strong> #{v}
     %br
 
@@ -34,7 +34,7 @@
     #{Gitlab::Json.pretty_generate(hook_log.request_data)}
 %h5 Response headers:
 %pre
-  - hook_log.response_headers.each do |k,v|
+  - hook_log.response_headers.each do |k, v|
     <strong>#{k}:</strong> #{v}
     %br
 
diff --git a/app/views/shared/integrations/_index.html.haml b/app/views/shared/integrations/_index.html.haml
index ccc2c448f69..39365280e71 100644
--- a/app/views/shared/integrations/_index.html.haml
+++ b/app/views/shared/integrations/_index.html.haml
@@ -1,27 +1 @@
-%table.table.b-table.gl-table{ role: 'table', 'aria-busy': false, 'aria-colcount': 4 }
-  %colgroup
-    %col
-    %col
-    %col.d-none.d-sm-table-column
-    %col{ width: 135 }
-  %thead{ role: 'rowgroup' }
-    %tr{ role: 'row' }
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 1 }
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 2 }= _('Integration')
-      %th.d-none.d-sm-block{ role: 'columnheader', scope: 'col', 'aria-colindex': 3 }= _('Description')
-      %th{ role: 'columnheader', scope: 'col', 'aria-colindex': 4 }= _('Last updated')
-
-  %tbody{ role: 'rowgroup' }
-    - integrations.each do |integration|
-      - activated_label = (integration.activated? ? s_("ProjectService|%{service_title}: status on") : s_("ProjectService|%{service_title}: status off")) % { service_title: integration.title }
-      %tr{ role: 'row' }
-        %td{ role: 'cell', 'aria-colindex': 1, 'aria-label': activated_label, title: activated_label }
-          - if integration.operating?
-            = sprite_icon('check', css_class: 'gl-text-green-500')
-        %td{ role: 'cell', 'aria-colindex': 2 }
-          = link_to integration.title, scoped_edit_integration_path(integration), class: 'gl-font-weight-bold', data: { qa_selector: "#{integration.to_param}_link" }
-        %td.d-none.d-sm-table-cell{ role: 'cell', 'aria-colindex': 3 }
-          = integration.description
-        %td{ role: 'cell', 'aria-colindex': 4 }
-          - if integration.updated_at.present?
-            = time_ago_with_tooltip integration.updated_at
+.js-integrations-list{ data: integration_list_data(integrations) }
diff --git a/app/views/shared/issuable/_approved_by_dropdown.html.haml b/app/views/shared/issuable/_approved_by_dropdown.html.haml
index 8014545ab85..c64d34d0da4 100644
--- a/app/views/shared/issuable/_approved_by_dropdown.html.haml
+++ b/app/views/shared/issuable/_approved_by_dropdown.html.haml
@@ -1,10 +1,10 @@
 #js-dropdown-approved-by.filtered-search-input-dropdown-menu.dropdown-menu
   %ul{ data: { dropdown: true } }
     %li.filter-dropdown-item{ data: { value: 'None' } }
-      %button.btn.btn-link{ type: 'button' }
+      %button.gl-button.btn.btn-link{ type: 'button' }
         = _('None')
     %li.filter-dropdown-item{ data: { value: 'Any' } }
-      %button.btn.btn-link{ type: 'button' }
+      %button.gl-button.btn.btn-link{ type: 'button' }
         = _('Any')
     %li.divider.droplab-item-ignore
     - if current_user
diff --git a/app/views/shared/issuable/_board_create_list_dropdown.html.haml b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
index 1a22a66d185..74b064648c0 100644
--- a/app/views/shared/issuable/_board_create_list_dropdown.html.haml
+++ b/app/views/shared/issuable/_board_create_list_dropdown.html.haml
@@ -1,5 +1,5 @@
 .dropdown.gl-display-flex.gl-align-items-center.gl-ml-3#js-add-list
-  %button.gl-button.btn.btn-confirm.btn-confirm-secondary.js-new-board-list{ type: "button", data: board_list_data }
+  %button.gl-button.btn.btn-confirm.js-new-board-list{ type: "button", data: board_list_data }
     Add list
   .dropdown-menu.dropdown-extended-height.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.js-tab-container-labels
     = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
diff --git a/app/views/shared/issuable/_bulk_update_sidebar.html.haml b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
index b6fc1f4955b..bbbb728d048 100644
--- a/app/views/shared/issuable/_bulk_update_sidebar.html.haml
+++ b/app/views/shared/issuable/_bulk_update_sidebar.html.haml
@@ -6,7 +6,7 @@
     = form_tag [:bulk_update, @project, type], method: :post, class: "bulk-update" do
       .block.issuable-sidebar-header
         .filter-item.inline.update-issues-btn.float-left
-          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-info", disabled: true
+          = button_tag _('Update all'), class: "gl-button btn update-selected-issues btn-confirm", disabled: true
         = button_tag _('Cancel'), class: "gl-button btn btn-default js-bulk-update-menu-hide float-right"
       - if params[:state] != 'merged'
         .block
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 41b7d7e9e1b..de657e39453 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -62,26 +62,24 @@
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
 .row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
-  .float-right
-    - if issuable.new_record?
-      = link_to _('Cancel'), polymorphic_path([@project, issuable.class]), class: 'gl-button btn btn-cancel'
-    - else
-      - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
-        = link_to 'Delete', polymorphic_path([@project, issuable], params: { destroy_confirm: true }), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" }, method: :delete, class: 'btn btn-danger btn-grouped'
-      = link_to _('Cancel'), polymorphic_path([@project, issuable]), class: 'gl-button btn btn-grouped btn-default btn-cancel'
-
-  %span.gl-mr-3
-    - if issuable.new_record?
-      = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'gl-button btn btn-confirm', data: { qa_selector: 'issuable_create_button' }
-    - else
-      = form.submit 'Save changes', class: 'gl-button btn btn-confirm'
-
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = issuable.project.present.contribution_guide_path)
-    .inline.gl-mt-3
+    .gl-mb-5
       Please review the
       %strong= link_to('contribution guidelines', guide_url)
       for this project.
 
+  - if issuable.new_record?
+    = form.submit "Create #{issuable.class.model_name.human.downcase}", class: 'gl-button btn btn-confirm gl-mr-2', data: { qa_selector: 'issuable_create_button' }
+  - else
+    = form.submit 'Save changes', class: 'gl-button btn btn-confirm gl-mr-2'
+
+  - if issuable.new_record?
+    = link_to _('Cancel'), polymorphic_path([@project, issuable.class]), class: 'btn gl-button btn-default'
+  - else
+    = link_to _('Cancel'), polymorphic_path([@project, issuable]), class: 'gl-button btn btn-default'
+    - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
+      = link_to 'Delete', polymorphic_path([@project, issuable], params: { destroy_confirm: true }), data: { confirm: _('%{issuableType} will be removed! Are you sure?') % { issuableType: issuable.human_class_name } }, method: :delete, class: 'btn gl-button btn-danger btn-danger-secondary gl-float-right'
+
 = render_if_exists 'shared/issuable/remove_approver'
 
 - if issuable.respond_to?(:issue_type)
diff --git a/app/views/shared/issuable/_invite_members_trigger.html.haml b/app/views/shared/issuable/_invite_members_trigger.html.haml
new file mode 100644
index 00000000000..5dd6ec0addf
--- /dev/null
+++ b/app/views/shared/issuable/_invite_members_trigger.html.haml
@@ -0,0 +1,8 @@
+- return unless can_import_members?
+
+.js-invite-members-modal{ data: { id: project.id,
+  name: project.name,
+  is_project: 'true',
+  access_levels: ProjectMember.access_level_roles.to_json,
+  default_access_level: Gitlab::Access::GUEST,
+  help_link: help_page_url('user/permissions') } }
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
index a3d6a2c8e04..cff50eef88b 100644
--- a/app/views/shared/issuable/_nav.html.haml
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -1,6 +1,6 @@
 - type = local_assigns.fetch(:type, :issues)
 - page_context_word = type.to_s.humanize(capitalize: false)
-- display_count = local_assigns.fetch(:display_count, :true)
+- display_count = local_assigns.fetch(:display_count, true)
 
 %ul.nav-links.issues-state-filters.mobile-separator.nav.nav-tabs
   %li{ class: active_when(params[:state] == 'opened') }>
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index f5b2868aa6c..1e340f033a1 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -3,15 +3,15 @@
 - show_sorting_dropdown = local_assigns.fetch(:show_sorting_dropdown, true)
 - disable_target_branch = local_assigns.fetch(:disable_target_branch, false)
 - placeholder = local_assigns[:placeholder] || _('Search or filter results...')
-- is_not_boards_modal_or_productivity_analytics = type != :boards_modal && type != :productivity_analytics
-- block_css_class = is_not_boards_modal_or_productivity_analytics ? 'row-content-block second-block' : ''
-- if board && board.to_type == "EpicBoard"
+- block_css_class = type != :productivity_analytics ? 'row-content-block second-block' : ''
+- is_epic_board = board&.to_type == "EpicBoard"
+- if is_epic_board
   - user_can_admin_list = can?(current_user, :admin_epic_board_list, board.resource_parent)
 - elsif board
   - user_can_admin_list = can?(current_user, :admin_issue_board_list, board.resource_parent)
 
-.issues-filters{ class: ("w-100" if type == :boards_modal) }
-  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-lg-row{ class: block_css_class, "v-pre" => type == :boards_modal }
+.issues-filters
+  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-lg-row{ class: block_css_class }
     .d-flex.flex-column.flex-md-row.flex-grow-1.mb-lg-0.mb-md-2.mb-sm-0.w-100
       - if type == :boards
         = render "shared/boards/switcher", board: board
@@ -21,16 +21,16 @@
         - if @can_bulk_update
           .check-all-holder.d-none.d-sm-block.hidden
             = check_box_tag "check-all-issues", nil, false, class: "check-all-issues left"
-        - if Feature.enabled?(:boards_filtered_search, @group)
+        - if Feature.enabled?(:boards_filtered_search, @group) && is_epic_board
           #js-board-filtered-search
         - else
           .issues-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
             .filtered-search-box
-              - if type != :boards_modal && type != :boards
+              - if type != :boards
                 - text = tag.span(sprite_icon('history'), class: "d-md-none") + tag.span(_('Recent searches'), class: "d-none d-md-inline")
                 = dropdown_tag(text,
                   options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
-                  toggle_class: "btn filtered-search-history-dropdown-toggle-button",
+                  toggle_class: "gl-button btn btn-default filtered-search-history-dropdown-toggle-button",
                   dropdown_class: "filtered-search-history-dropdown",
                   content_class: "filtered-search-history-dropdown-content" }) do
                   .js-filtered-search-history-dropdown{ data: { full_path: search_history_storage_prefix } }
@@ -42,7 +42,7 @@
                 #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item{ data: {hint: "#{'{{hint}}'}", tag: "#{'{{tag}}'}", action: "#{'{{hint === \'search\' ? \'submit\' : \'\' }}'}" } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         -# Encapsulate static class name `{{icon}}` inside #{} to bypass
                         -# haml lint's ClassAttributeWithStaticValue
                         %svg
@@ -52,7 +52,7 @@
                 #js-dropdown-operator.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
                     %li.filter-dropdown-item{ data: { value: "{{ title }}" } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         {{ title }}
                         %span.btn-helptext
                           {{ help }}
@@ -68,10 +68,10 @@
                 #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.divider.droplab-item-ignore
                     - if current_user
@@ -84,10 +84,10 @@
                 #js-dropdown-reviewer.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.divider.droplab-item-ignore
                     - if current_user
@@ -102,92 +102,92 @@
                 #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.filter-dropdown-item{ data: { value: 'Upcoming' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Upcoming')
                     %li.filter-dropdown-item{ data: { value: 'Started' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Started')
                     %li.divider.droplab-item-ignore
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
                 = render_if_exists 'shared/issuable/filter_iteration', type: type
                 #js-dropdown-release.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.divider.droplab-item-ignore
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
                 #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.divider.droplab-item-ignore
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         %span.dropdown-label-box{ style: 'background: {{color}}' }
                         %span.label-title.js-data-value
                           {{title}}
                 #js-dropdown-my-reaction.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'None' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('None')
                     %li.filter-dropdown-item{ data: { value: 'Any' } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Any')
                     %li.divider.droplab-item-ignore
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         %gl-emoji
                         %span.js-data-value.gl-ml-3
                           {{name}}
                 #js-dropdown-wip.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Yes')
                     %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('No')
                 #js-dropdown-confidential.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dropdown: true } }
                     %li.filter-dropdown-item{ data: { value: 'yes', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('Yes')
                     %li.filter-dropdown-item{ data: { value: 'no', capitalize: true } }
-                      %button.btn.btn-link{ type: 'button' }
+                      %button.gl-button.btn.btn-link{ type: 'button' }
                         = _('No')
                 - unless disable_target_branch
                   #js-dropdown-target-branch.filtered-search-input-dropdown-menu.dropdown-menu
                     %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                       %li.filter-dropdown-item
-                        %button.btn.btn-link.js-data-value.monospace
+                        %button.gl-button.btn.btn-link.js-data-value.monospace
                           {{title}}
                 #js-dropdown-environment.filtered-search-input-dropdown-menu.dropdown-menu
                   %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
                     %li.filter-dropdown-item
-                      %button.btn.btn-link.js-data-value{ type: 'button' }
+                      %button.gl-button.btn.btn-link.js-data-value{ type: 'button' }
                         {{title}}
 
                 = render_if_exists 'shared/issuable/filter_weight', type: type
@@ -207,8 +207,6 @@
             .js-create-column-trigger{ data: board_list_data }
           - else
             = render 'shared/issuable/board_create_list_dropdown', board: board
-          - if @project
-            #js-add-issues-btn{ data: { can_admin_list: can?(current_user, :admin_issue_board_list, @project) } }
         #js-toggle-focus-btn
-      - elsif is_not_boards_modal_or_productivity_analytics && show_sorting_dropdown
+      - elsif type != :productivity_analytics && show_sorting_dropdown
         = render 'shared/issuable/sort_dropdown'
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 787d9db1192..fb2019bef15 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -34,7 +34,7 @@
 
       - if issuable_sidebar[:supports_milestone]
         - milestone = issuable_sidebar[:milestone] || {}
-        .block.milestone{ class: 'gl-border-b-0!', data: { qa_selector: 'milestone_block' } }
+        .block.milestone{ :class => ("gl-border-b-0!" if issuable_sidebar[:supports_iterations]), data: { qa_selector: 'milestone_block' } }
           .sidebar-collapsed-icon.has-tooltip{ title: sidebar_milestone_tooltip_label(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
             = sprite_icon('clock')
             %span.milestone-title.collapse-truncated-title
@@ -70,41 +70,7 @@
             = _('Time tracking')
             = loading_icon(css_class: 'gl-vertical-align-text-bottom')
       - if issuable_sidebar.has_key?(:due_date)
-        .block.due_date
-          .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable_sidebar[:due_date]) }
-            = sprite_icon('calendar')
-            %span.js-due-date-sidebar-value
-              = issuable_sidebar[:due_date].try(:to_s, :medium) || _('None')
-          .title.hide-collapsed
-            = _('Due date')
-            = loading_icon(css_class: 'gl-vertical-align-text-bottom hidden block-loading')
-            - if can_edit_issuable
-              = link_to _('Edit'), '#', class: 'js-sidebar-dropdown-toggle edit-link float-right', data: { track_label: "right_sidebar", track_property: "due_date", track_event: "click_edit_button", track_value: "" }
-          .value.hide-collapsed
-            %span.value-content
-              - if issuable_sidebar[:due_date]
-                %span.bold= issuable_sidebar[:due_date].to_s(:medium)
-              - else
-                %span.no-value
-                  = _('None')
-            - if can_edit_issuable
-              %span.no-value.js-remove-due-date-holder{ class: ("hidden" if issuable_sidebar[:due_date].nil?) }
-                \-
-                %a.js-remove-due-date{ href: "#", role: "button" }
-                  = _('remove due date')
-          - if can_edit_issuable
-            .selectbox.hide-collapsed
-              = f.hidden_field :due_date, value: issuable_sidebar[:due_date].try(:strftime, 'yy-mm-dd')
-              .dropdown
-                %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable_type}[due_date]", ability_name: issuable_type, issue_update: issuable_sidebar[:issuable_json_path], display: 'static' } }
-                  %span.dropdown-toggle-text
-                    = _('Due date')
-                  = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-                .dropdown-menu.dropdown-menu-due-date
-                  = dropdown_title(_('Due date'))
-                  = dropdown_content do
-                    .js-due-date-calendar
-
+        #js-due-date-entry-point
 
       .js-sidebar-labels{ data: sidebar_labels_data(issuable_sidebar, @project) }
 
@@ -133,12 +99,12 @@
       .block.with-sub-blocks
         #js-reference-entry-point
         - if issuable_type == 'merge_request'
-          .sidebar-source-branch.sub-block
+          .sub-block.js-sidebar-source-branch
             .sidebar-collapsed-icon.dont-change-state
               = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
-            .sidebar-mr-source-branch.hide-collapsed
-              %span
-                = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<cite class='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</cite>".html_safe, source_branch: html_escape(source_branch) }
+            .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
+              %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap
+                = _('Source branch: %{source_branch_open}%{source_branch}%{source_branch_close}').html_safe % { source_branch_open: "<span class='gl-font-monospace' data-testid='ref-name' title='#{html_escape(source_branch)}'>".html_safe, source_branch_close: "</span>".html_safe, source_branch: html_escape(source_branch) }
               = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
 
       - if show_forwarding_email
diff --git a/app/views/shared/issuable/_sidebar_assignees.html.haml b/app/views/shared/issuable/_sidebar_assignees.html.haml
index 26986c913f0..47e7ff0e4bc 100644
--- a/app/views/shared/issuable/_sidebar_assignees.html.haml
+++ b/app/views/shared/issuable/_sidebar_assignees.html.haml
@@ -1,6 +1,7 @@
 - issuable_type = issuable_sidebar[:type]
+- dropdown_options = assignees_dropdown_options(issuable_type)
 
-#js-vue-sidebar-assignees{ data: { field: issuable_type, signed_in: signed_in } }
+#js-vue-sidebar-assignees{ data: { field: issuable_type, signed_in: signed_in, max_assignees: dropdown_options[:data][:"max-select"], directly_invite_members: directly_invite_members?, indirectly_invite_members: indirectly_invite_members? } }
   .title.hide-collapsed
     = _('Assignee')
     = loading_icon(css_class: 'gl-vertical-align-text-bottom')
@@ -29,7 +30,6 @@
       null_user: true,
       display: 'static' } }
 
-  - dropdown_options = assignees_dropdown_options(issuable_type)
   - title = dropdown_options[:title]
   - options[:toggle_class] += ' js-multiselect js-save-user-data'
   - data = { field_name: "#{issuable_type}[assignee_ids][]" }
@@ -53,10 +53,10 @@
       %ul.dropdown-footer-list
         %li
           - if directly_invite_members?
-            = link_to invite_text,
-              project_project_members_path(@project),
-              title: invite_text,
-              data: { 'is-link': true, 'track-event': 'click_invite_members', 'track-label': track_label }
+            .js-invite-members-trigger{ data: { trigger_element: 'anchor',
+              display_text: invite_text,
+              event: 'click_invite_members',
+              label: track_label } }
           - else
             .js-invite-member-trigger{ data: { display_text: invite_text, event: 'click_invite_members_version_b', label: track_label } }
   - else
diff --git a/app/views/shared/issuable/_sort_dropdown.html.haml b/app/views/shared/issuable/_sort_dropdown.html.haml
index f60be3f3e4a..9e3caf62d77 100644
--- a/app/views/shared/issuable/_sort_dropdown.html.haml
+++ b/app/views/shared/issuable/_sort_dropdown.html.haml
@@ -5,7 +5,7 @@
 .dropdown.inline.gl-ml-3.issue-sort-dropdown
   .btn-group{ role: 'group' }
     .btn-group{ role: 'group' }
-      %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+      %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
         = sort_title
         = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
       %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
diff --git a/app/views/shared/issuable/_user_dropdown_item.html.haml b/app/views/shared/issuable/_user_dropdown_item.html.haml
index 4a3547e9e70..b3bc7ba85ad 100644
--- a/app/views/shared/issuable/_user_dropdown_item.html.haml
+++ b/app/views/shared/issuable/_user_dropdown_item.html.haml
@@ -2,7 +2,7 @@
 - avatar = local_assigns.fetch(:avatar, { })
 
 %li.filter-dropdown-item{ class: ('js-current-user' if user == current_user) }
-  %button.btn.btn-link.dropdown-user{ type: :button }
+  %button.gl-button.btn.btn-link.dropdown-user{ type: :button }
     .avatar-container.s40
       = user_avatar_without_link(user: user, lazy: avatar[:lazy], url: avatar[:url], size: 40, has_tooltip: false)
     .dropdown-user-details
diff --git a/app/views/shared/issuable/form/_type_selector.html.haml b/app/views/shared/issuable/form/_type_selector.html.haml
index 67bc4019a82..b5c5e2fa091 100644
--- a/app/views/shared/issuable/form/_type_selector.html.haml
+++ b/app/views/shared/issuable/form/_type_selector.html.haml
@@ -3,26 +3,30 @@
 .form-group.row.gl-mb-0
   = form.label :type, 'Type', class: 'col-form-label col-sm-2'
   .col-sm-10
-    .issuable-form-select-holder.selectbox.form-group.gl-mb-0
-      .dropdown.js-issuable-type-filter-dropdown-wrap
-        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-          %span.dropdown-toggle-text.is-default
-            = issuable.issue_type.capitalize || _("Select type")
-          = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
-        .dropdown-menu.dropdown-menu-selectable.dropdown-select
-          .dropdown-title.gl-display-flex
-            %span.gl-ml-auto
-              = _("Select type")
-            %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
-              = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
-          .dropdown-content
-            %ul
-              %li.js-filter-issuable-type
-                = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
-                  = _("Issue")
-              %li.js-filter-issuable-type{ data: { track: { event: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
-                = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
-                  = _("Incident")
+    .gl-display-flex.gl-align-items-center
+      .issuable-form-select-holder.selectbox.form-group.gl-mb-0
+        .dropdown.js-issuable-type-filter-dropdown-wrap
+          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+            %span.dropdown-toggle-text.is-default
+              = issuable.issue_type.capitalize || _("Select type")
+            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
+          .dropdown-menu.dropdown-menu-selectable.dropdown-select
+            .dropdown-title.gl-display-flex
+              %span.gl-ml-auto
+                = _("Select type")
+              %button.dropdown-title-button.dropdown-menu-close.gl-ml-auto{ type: 'button', "aria-label" => _('Close') }
+                = sprite_icon('close', size: 16, css_class: 'dropdown-menu-close-icon')
+            .dropdown-content
+              %ul
+                %li.js-filter-issuable-type
+                  = link_to new_project_issue_path(@project), class: ("is-active" if issuable.issue?) do
+                    = _("Issue")
+                %li.js-filter-issuable-type{ data: { track: { event: "select_issue_type_incident", label: "select_issue_type_incident_dropdown_option" } } }
+                  = link_to new_project_issue_path(@project, { issuable_template: 'incident', issue: { issue_type: 'incident' } }), class: ("is-active" if issuable.incident?) do
+                    = _("Incident")
+
+      #js-type-popover
+
     - if issuable.incident?
       %p.form-text.text-muted
         - incident_docs_url = help_page_path('operations/incident_management/incidents.md')
diff --git a/app/views/shared/issue_type/_details_content.html.haml b/app/views/shared/issue_type/_details_content.html.haml
index 7c1ec332ba4..ceedb5e5c59 100644
--- a/app/views/shared/issue_type/_details_content.html.haml
+++ b/app/views/shared/issue_type/_details_content.html.haml
@@ -1,4 +1,5 @@
 - related_branches_path = related_branches_project_issue_path(@project, issuable)
+- api_awards_path = local_assigns.fetch(:api_awards_path, nil)
 
 .issue-details.issuable-details
   .detail-page-description.content-block
@@ -24,7 +25,7 @@
       #related-branches{ data: { url: related_branches_path } }
         -# This element is filled in using JavaScript.
 
-  = render 'shared/issue_type/emoji_block', issuable: issuable
+  = render 'shared/issue_type/emoji_block', issuable: issuable, api_awards_path: api_awards_path
 
   = render 'projects/issues/discussion'
 
diff --git a/app/views/shared/issue_type/_details_header.html.haml b/app/views/shared/issue_type/_details_header.html.haml
index 7e150c544bd..36a68dfdaa7 100644
--- a/app/views/shared/issue_type/_details_header.html.haml
+++ b/app/views/shared/issue_type/_details_header.html.haml
@@ -1,7 +1,7 @@
 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box.status-box-issue-closed{ class: issue_status_visibility(issuable, status_box: :closed) }
-      = sprite_icon('mobile-issue-close', css_class: 'gl-display-block gl-sm-display-none!')
+      = sprite_icon('issue-close', css_class: 'gl-display-block gl-sm-display-none!')
       .gl-display-none.gl-sm-display-block!
         = issue_closed_text(issuable, current_user)
     .issuable-status-box.status-box.status-box-open{ class: issue_status_visibility(issuable, status_box: :open) }
@@ -13,7 +13,7 @@
       #js-issuable-header-warnings
       = issuable_meta(issuable, @project)
 
-    %a.btn.gl-button.btn-default.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.btn.gl-button.btn-default.btn-icon.float-right.gl-display-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = sprite_icon('chevron-double-lg-left')
 
   .js-issue-header-actions{ data: issue_header_actions_data(@project, issuable, current_user) }
diff --git a/app/views/shared/issue_type/_emoji_block.html.haml b/app/views/shared/issue_type/_emoji_block.html.haml
index 42d149b2ab3..ca2749b6bf9 100644
--- a/app/views/shared/issue_type/_emoji_block.html.haml
+++ b/app/views/shared/issue_type/_emoji_block.html.haml
@@ -1,7 +1,9 @@
+- api_awards_path = local_assigns.fetch(:api_awards_path, nil)
+
 .content-block.emoji-block.emoji-block-sticky
   .row.gl-m-0.gl-justify-content-space-between
     .js-noteable-awards
-      = render 'award_emoji/awards_block', awardable: issuable, inline: true
+      = render 'award_emoji/awards_block', awardable: issuable, inline: true, api_awards_path: api_awards_path
     .new-branch-col
       = render_if_exists "projects/issues/timeline_toggle", issuable: issuable
       #js-vue-sort-issue-discussions
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 0ba3e539357..88e2a74d235 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -67,7 +67,7 @@
         - if member.can_resend_invite?
           = link_to sprite_icon('paper-airplane'), polymorphic_path([:resend_invite, member]),
                     method: :post,
-                    class: 'btn btn-default align-self-center mr-sm-2',
+                    class: 'gl-button btn btn-default align-self-center mr-sm-2',
                     title: _('Resend invite')
 
         - if user != current_user && member.can_update?
@@ -120,7 +120,7 @@
               = sprite_icon('leave', css_class: 'gl-icon')
               = _('Leave')
           - else
-            %button{ data: { member_path: member_path(member.member), message: remove_member_message(member), is_access_request: member.request?.to_s, qa_selector: 'delete_member_button' },
+            %button{ data: { member_path: member_path(member.member), member_type: member.type, message: remove_member_message(member), is_access_request: member.request?.to_s, qa_selector: 'delete_member_button' },
               class: "js-remove-member-button btn gl-button btn-danger align-self-center m-0 #{'ml-sm-2 btn-icon' unless force_mobile_view}",
               title: remove_member_title(member) }
               %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index f52bf1551f4..44934a12559 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -44,22 +44,22 @@
       = link_to pluralize(milestone.total_issues_count, _('Issue')), issues_path
       - if milestone.merge_requests_enabled?
         &middot;
-        = link_to pluralize(milestone.merge_requests_visible_to_user(current_user).size, _('Merge Request')), merge_requests_path
+        = link_to pluralize(milestone.total_merge_requests_count, _('Merge request')), merge_requests_path
       .float-lg-right.light #{milestone.percent_complete}% complete
     .col-sm-2
       .milestone-actions.d-flex.justify-content-sm-start.justify-content-md-end
         - if @project # if in milestones list on project level
           - if can_admin_group_milestones?
-            %button.js-promote-project-milestone-button.btn.gl-button.btn-default-tertiary.btn-sm.btn-grouped.has-tooltip{ title: s_('Milestones|Promote to Group Milestone'),
+            %button.js-promote-project-milestone-button.btn.gl-button.btn-icon.btn-default-tertiary.btn-sm.has-tooltip{ title: s_('Milestones|Promote to Group Milestone'),
               disabled: true,
               type: 'button',
               data: { url: promote_project_milestone_path(milestone.project, milestone),
                       milestone_title: milestone.title,
                       group_name: @project.group.name } }
-              = sprite_icon('level-up', size: 14)
+              = sprite_icon('level-up', size: 14, css_class: 'gl-button-icon gl-icon')
 
         - if can?(current_user, :admin_milestone, milestone)
           - if milestone.closed?
-            = link_to s_('Milestones|Reopen Milestone'), milestone_path(milestone, milestone: { state_event: :activate }), method: :put, class: "btn gl-button btn-sm btn-grouped"
+            = link_to s_('Milestones|Reopen Milestone'), milestone_path(milestone, milestone: { state_event: :activate }), method: :put, class: "btn gl-button btn-sm gl-ml-3"
           - else
-            = link_to s_('Milestones|Close Milestone'), milestone_path(milestone, milestone: { state_event: :close }), method: :put, class: "btn gl-button btn-warning-secondary btn-sm btn-grouped btn-close"
+            = link_to s_('Milestones|Close Milestone'), milestone_path(milestone, milestone: { state_event: :close }), method: :put, class: "btn gl-button btn-default btn-default-secondary btn-sm gl-ml-3"
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
index 661ace8feaa..0e54f1a7672 100644
--- a/app/views/shared/milestones/_sidebar.html.haml
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -165,6 +165,6 @@
         .cross-project-reference.hide-collapsed
           %span
             = s_('MilestoneSidebar|Reference:')
-            %cite{ title: milestone_ref }
+            %span{ title: milestone_ref }
               = milestone_ref
           = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index 33e634c3e7b..3524a1b17ea 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -11,7 +11,7 @@
     - if milestone.merge_requests_enabled?
       %li.nav-item
         = link_to '#tab-merge-requests', class: 'nav-link', data: { toggle: 'tab', endpoint: milestone_tab_path(milestone, 'merge_requests', show_project_name: show_project_name) } do
-          = _('Merge Requests')
+          = _('Merge requests')
           %span.badge.badge-pill= milestone.merge_requests_visible_to_user(current_user).size
     %li.nav-item
       = link_to '#tab-participants', class: 'nav-link', data: { toggle: 'tab', endpoint: milestone_tab_path(milestone, 'participants') } do
diff --git a/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
new file mode 100644
index 00000000000..1e9aa4ec5ff
--- /dev/null
+++ b/app/views/shared/namespaces/cascading_settings/_enforcement_checkbox.html.haml
@@ -0,0 +1,14 @@
+- attribute = local_assigns.fetch(:attribute, nil)
+- group = local_assigns.fetch(:group, nil)
+- form = local_assigns.fetch(:form, nil)
+
+- return unless attribute && group && form && cascading_namespace_settings_enabled?
+- return if group.namespace_settings.public_send("#{attribute}_locked?")
+
+- lock_attribute = "lock_#{attribute}"
+
+.gl-form-checkbox.custom-control.custom-checkbox
+  = form.check_box lock_attribute, checked: group.namespace_settings.public_send(lock_attribute), class: 'custom-control-input', data: { testid: 'enforce-for-all-subgroups-checkbox' }
+  = form.label lock_attribute, class: 'custom-control-label' do
+    %span= s_('CascadingSettings|Enforce for all subgroups')
+    %p.help-text= s_('CascadingSettings|Subgroups cannot change this setting.')
diff --git a/app/views/shared/namespaces/cascading_settings/_lock_popovers.html.haml b/app/views/shared/namespaces/cascading_settings/_lock_popovers.html.haml
new file mode 100644
index 00000000000..91458bf180b
--- /dev/null
+++ b/app/views/shared/namespaces/cascading_settings/_lock_popovers.html.haml
@@ -0,0 +1 @@
+.js-cascading-settings-lock-popovers
diff --git a/app/views/shared/namespaces/cascading_settings/_setting_label.html.haml b/app/views/shared/namespaces/cascading_settings/_setting_label.html.haml
new file mode 100644
index 00000000000..6596ce2bc73
--- /dev/null
+++ b/app/views/shared/namespaces/cascading_settings/_setting_label.html.haml
@@ -0,0 +1,21 @@
+- attribute = local_assigns.fetch(:attribute, nil)
+- group = local_assigns.fetch(:group, nil)
+- form = local_assigns.fetch(:form, nil)
+- settings_path_helper = local_assigns.fetch(:settings_path_helper, nil)
+- help_text = local_assigns.fetch(:help_text, nil)
+
+- return unless attribute && group && form && settings_path_helper
+
+- setting_locked = group.namespace_settings.public_send("#{attribute}_locked?")
+
+= form.label attribute, class: 'custom-control-label', aria: { disabled: setting_locked } do
+  %span.position-relative.gl-pr-6.gl-display-inline-flex
+    = yield
+    - if setting_locked
+      %button.position-absolute.gl-top-3.gl-right-0.gl-translate-y-n50.gl-cursor-default.btn.btn-default.btn-sm.gl-button.btn-default-tertiary.js-cascading-settings-lock-popover-target{ class: 'gl-p-1! gl-text-gray-600! gl-bg-transparent!',
+        type: 'button',
+        data: cascading_namespace_settings_popover_data(attribute, group, settings_path_helper) }
+        = sprite_icon('lock', size: 16)
+  - if help_text
+    %p.help-text
+      = help_text
diff --git a/app/views/shared/nav/_scope_menu.html.haml b/app/views/shared/nav/_scope_menu.html.haml
new file mode 100644
index 00000000000..270587f48a8
--- /dev/null
+++ b/app/views/shared/nav/_scope_menu.html.haml
@@ -0,0 +1,6 @@
+.context-header
+  = link_to scope_menu.link, **scope_menu.container_html_options do
+    .avatar-container.rect-avatar.s40.project-avatar
+      = source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
+    .sidebar-context-title
+      = scope_menu.title
diff --git a/app/views/shared/nav/_sidebar.html.haml b/app/views/shared/nav/_sidebar.html.haml
new file mode 100644
index 00000000000..1c06fc9eebf
--- /dev/null
+++ b/app/views/shared/nav/_sidebar.html.haml
@@ -0,0 +1,14 @@
+%aside.nav-sidebar{ class: ('sidebar-collapsed-desktop' if collapsed_sidebar?), **sidebar_tracking_attributes_by_object(sidebar.container), 'aria-label': sidebar.aria_label }
+  .nav-sidebar-inner-scroll
+    - if sidebar.scope_menu
+      = render partial: 'shared/nav/scope_menu', object: sidebar.scope_menu
+    - elsif sidebar.render_raw_scope_menu_partial
+      = render sidebar.render_raw_scope_menu_partial
+
+    %ul.sidebar-top-level-items.qa-project-sidebar
+      - if sidebar.renderable_menus.any?
+        = render partial: 'shared/nav/sidebar_menu', collection: sidebar.renderable_menus
+      - if sidebar.render_raw_menus_partial
+        = render sidebar.render_raw_menus_partial
+
+    = render 'shared/sidebar_toggle_button'
diff --git a/app/views/shared/nav/_sidebar_menu.html.haml b/app/views/shared/nav/_sidebar_menu.html.haml
new file mode 100644
index 00000000000..c6e86a90ba7
--- /dev/null
+++ b/app/views/shared/nav/_sidebar_menu.html.haml
@@ -0,0 +1,27 @@
+= nav_link(**sidebar_menu.all_active_routes, html_options: sidebar_menu.nav_link_html_options) do
+  = link_to sidebar_menu.link, **sidebar_menu.container_html_options, data: { qa_selector: 'sidebar_menu_link', qa_menu_item: sidebar_menu.title } do
+    - if sidebar_menu.icon_or_image?
+      .nav-icon-container
+        - if sidebar_menu.image_path
+          = image_tag(sidebar_menu.image_path, **sidebar_menu.image_html_options)
+        - elsif sidebar_menu.sprite_icon
+          = sprite_icon(sidebar_menu.sprite_icon, **sidebar_menu.sprite_icon_html_options)
+
+    %span.nav-item-name{ **sidebar_menu.title_html_options }
+      = sidebar_menu.title
+    - if sidebar_menu.has_pill?
+      %span.badge.badge-pill.count{ **sidebar_menu.pill_html_options }
+        = number_with_delimiter(sidebar_menu.pill_count)
+
+  %ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_items?) }
+    = nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do
+      = link_to sidebar_menu.link, aria: { label: sidebar_menu.title } do
+        %strong.fly-out-top-item-name
+          = sidebar_menu.title
+        - if sidebar_menu.has_pill?
+          %span.badge.badge-pill.count.fly-out-badge{ **sidebar_menu.pill_html_options }
+            = number_with_delimiter(sidebar_menu.pill_count)
+
+    - if sidebar_menu.has_renderable_items?
+      %li.divider.fly-out-top-item
+      = render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items
diff --git a/app/views/shared/nav/_sidebar_menu_item.html.haml b/app/views/shared/nav/_sidebar_menu_item.html.haml
new file mode 100644
index 00000000000..0b0e4c7aec9
--- /dev/null
+++ b/app/views/shared/nav/_sidebar_menu_item.html.haml
@@ -0,0 +1,8 @@
+= nav_link(**sidebar_menu_item.active_routes) do
+  = link_to sidebar_menu_item.link, **sidebar_menu_item.container_html_options, data: { qa_selector: 'sidebar_menu_item_link', qa_menu_item: sidebar_menu_item.title } do
+    %span
+      = sidebar_menu_item.title
+      - if sidebar_menu_item.sprite_icon
+        = sprite_icon(sidebar_menu_item.sprite_icon, **sidebar_menu_item.sprite_icon_html_options)
+    - if sidebar_menu_item.show_hint?
+      .js-feature-highlight{ **sidebar_menu_item.hint_html_options }
diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml
index 4f1aa3a7b01..1129fed9c3b 100644
--- a/app/views/shared/notes/_comment_button.html.haml
+++ b/app/views/shared/notes/_comment_button.html.haml
@@ -1,15 +1,15 @@
 - noteable_name = @note.noteable.human_class_name
 
 .float-left.btn-group.gl-mr-3.droplab-dropdown.comment-type-dropdown.js-comment-type-dropdown
-  %input.btn.gl-button.btn-success.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
+  %input.btn.gl-button.btn-confirm.js-comment-button.js-comment-submit-button{ type: 'submit', value: _('Comment'), data: { qa_selector: 'comment_button' } }
 
   - if @note.can_be_discussion_note?
-    = button_tag type: 'button', class: 'gl-button btn dropdown-toggle btn-success js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => _('Open comment type dropdown') do
+    = button_tag type: 'button', class: 'gl-button btn dropdown-toggle btn-confirm js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => _('Open comment type dropdown') do
       = sprite_icon('chevron-down')
 
     %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => _('Comment'), 'close-text' => _("Comment & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Comment & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
-        %button.btn.gl-button.btn-transparent
+        %button.btn.gl-button.btn-default-tertiary
           = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Comment")
@@ -19,7 +19,7 @@
       %li.divider.droplab-item-ignore
 
       %li#discussion{ data: { value: 'DiscussionNote', 'submit-text' => _('Start thread'), 'close-text' => _("Start thread & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Start thread & reopen %{noteable_name}") % { noteable_name: noteable_name } } }
-        %button.btn.gl-button.btn-transparent
+        %button.btn.gl-button.btn-default-tertiary
           = sprite_icon('check', css_class: 'icon')
           .description
             %strong= _("Start thread")
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index f1352be28e3..6549c86ab29 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -69,7 +69,7 @@
         .note-attachment
           - if note.attachment.image?
             = link_to note.attachment.url, target: '_blank' do
-              = image_tag note.attachment.url, class: 'note-image-attach'
+              = image_tag note.attachment.url, class: 'note-image-attach col-lg-4'
           .attachment
             = link_to note.attachment.url, target: '_blank' do
               = sprite_icon('paperclip')
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index a33cd7c3b53..7466f360f67 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -24,7 +24,7 @@
       .avatar-container.s48.flex-grow-0.flex-shrink-0{ class: avatar_container_class }
         = link_to project_path(project), class: dom_class(project) do
           - if project.creator && use_creator_avatar
-            = image_tag avatar_icon_for_user(project.creator, 48), class: "avatar s48", alt:''
+            = image_tag avatar_icon_for_user(project.creator, 48), class: "avatar s48", alt: ''
           - else
             = project_icon(project, alt: '', class: 'avatar project-avatar s48', width: 48, height: 48)
     .project-details.d-sm-flex.flex-sm-fill.align-items-center{ data: { qa_selector: 'project_content', qa_project_name: project.name } }
@@ -90,7 +90,7 @@
           - if show_merge_request_count?(disabled: !merge_requests, compact_mode: compact_mode)
             = link_to project_merge_requests_path(project),
                 class: "d-none d-xl-flex align-items-center icon-wrapper merge-requests has-tooltip",
-                title: _('Merge Requests'), data: { container: 'body', placement: 'top' } do
+                title: _('Merge requests'), data: { container: 'body', placement: 'top' } do
               = sprite_icon('git-merge', size: 14, css_class: 'gl-mr-2')
               = number_with_delimiter(project.open_merge_requests_count)
           - if show_issue_count?(disabled: !issues, compact_mode: compact_mode)
diff --git a/app/views/shared/projects/_search_bar.html.haml b/app/views/shared/projects/_search_bar.html.haml
index 6c3a6ce809f..8ec11d9cfbb 100644
--- a/app/views/shared/projects/_search_bar.html.haml
+++ b/app/views/shared/projects/_search_bar.html.haml
@@ -3,7 +3,7 @@
 - flex_grow_and_shrink_xs = 'd-flex flex-xs-grow-1 flex-xs-shrink-1 flex-grow-0 flex-shrink-0'
 
 .filtered-search-block.row-content-block.bt-0
-  .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
+  .filtered-search-wrapper.d-flex.gl-flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
     - unless project_tab_filter == :starred
       .filtered-search-nav.mb-2.mb-lg-0{ class: flex_grow_and_shrink_xs }
         = render 'dashboard/projects/nav', project_tab_filter: project_tab_filter
diff --git a/app/views/shared/projects/_sort_dropdown.html.haml b/app/views/shared/projects/_sort_dropdown.html.haml
index 3e810dc6f08..f3aeaacbdb1 100644
--- a/app/views/shared/projects/_sort_dropdown.html.haml
+++ b/app/views/shared/projects/_sort_dropdown.html.haml
@@ -3,7 +3,7 @@
 
 .btn-group.w-100{ role: "group" }
   .btn-group.w-100.dropdown.js-project-filter-dropdown-wrap{ role: "group" }
-    %button#sort-projects-dropdown.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+    %button#sort-projects-dropdown.gl-button.btn.btn-default.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
       = toggle_text
       = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
     %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable
diff --git a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
index 75d6d88fbc3..6a362866f41 100644
--- a/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
+++ b/app/views/shared/projects/protected_branches/_update_protected_branch.html.haml
@@ -33,6 +33,6 @@
     %p.small
       = _('Members of %{group} can also push to this branch: %{branch}') % { group: (group_push_access_levels.size > 1 ? 'these groups' : 'this group'), branch: group_push_access_levels.map(&:humanize).to_sentence }
 
-- if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project)
+- if ::Feature.enabled?(:allow_force_push_to_protected_branches, @project, default_enabled: :yaml)
   %td
     = render "shared/buttons/project_feature_toggle", is_checked: protected_branch.allow_force_push, label: s_("ProtectedBranch|Toggle allow force push"), class_list: "js-force-push-toggle project-feature-toggle", data: { qa_selector: 'force_push_toggle_button', qa_branch_name: protected_branch.name }
diff --git a/app/views/shared/promotions/_promote_servicedesk.html.haml b/app/views/shared/promotions/_promote_servicedesk.html.haml
index 3a5123acdeb..a2da23de2b9 100644
--- a/app/views/shared/promotions/_promote_servicedesk.html.haml
+++ b/app/views/shared/promotions/_promote_servicedesk.html.haml
@@ -1,6 +1,6 @@
 .user-callout.promotion-callout.js-service-desk-callout#promote_service_desk{ data: { uid: 'promote_service_desk_dismissed' } }
   .bordered-box.content-block
-    %button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
+    %button.gl-button.btn.btn-default.close.js-close-callout{ type: 'button', 'aria-label' => 'Dismiss Service Desk promotion' }
       = sprite_icon('close', size: 16, css_class: 'dismiss-icon')
     .svg-container
       = custom_icon('icon_service_desk')
diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml
index bb2aa93740e..8d0069a7664 100644
--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -59,4 +59,4 @@
       .col-sm-10
         = f.text_field :private_projects_minutes_cost_factor, class: 'form-control'
   .form-actions
-    = f.submit _('Save changes'), class: 'btn btn-success'
+    = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'
diff --git a/app/views/shared/runners/_runner_type_alert.html.haml b/app/views/shared/runners/_runner_type_alert.html.haml
new file mode 100644
index 00000000000..b83def8b802
--- /dev/null
+++ b/app/views/shared/runners/_runner_type_alert.html.haml
@@ -0,0 +1,20 @@
+.gl-alert.gl-alert-info.gl-my-5
+  = sprite_icon('information-o', css_class: 'gl-alert-icon')
+  - if runner.instance_type?
+    %h4.gl-alert-title
+      = s_('Runners|This runner is available to all groups and projects in your GitLab instance.')
+    .gl-alert-body
+      = s_('Runners|Shared runners are available to every project in a GitLab instance. If you want a runner to build only specific projects, restrict the project in the table below. After you restrict a runner to a project, you cannot change it back to a shared runner.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'shared-runners'), target: '_blank', rel: 'noopener noreferrer'
+  - elsif runner.group_type?
+    %h4.gl-alert-title
+      = s_('Runners|This runner is available to all projects and subgroups in a group.')
+    .gl-alert-body
+      = s_('Runners|Use Group runners when you want all projects in a group to have access to a set of runners.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'group-runners'), target: '_blank', rel: 'noopener noreferrer'
+  - else
+    %h4.gl-alert-title
+      = s_('Runners|This runner is associated with specific projects.')
+    .gl-alert-body
+      = s_('Runners|You can set up a specific runner to be used by multiple projects but you cannot make this a shared runner.')
+      = link_to _('Learn more.'), help_page_path('ci/runners/README', anchor: 'specific-runners'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/shared/runners/_runner_type_badge.html.haml b/app/views/shared/runners/_runner_type_badge.html.haml
new file mode 100644
index 00000000000..e0318006f09
--- /dev/null
+++ b/app/views/shared/runners/_runner_type_badge.html.haml
@@ -0,0 +1,10 @@
+
+- if runner.instance_type?
+  %span.badge.badge-pill.gl-badge.badge-success
+    = s_('Runners|shared')
+- elsif runner.group_type?
+  %span.badge.badge-pill.gl-badge.badge-success
+    = s_('Runners|group')
+- else
+  %span.badge.badge-pill.gl-badge.badge-info
+    = s_('Runners|specific')
diff --git a/app/views/shared/runners/show.html.haml b/app/views/shared/runners/show.html.haml
index 1af04b808bf..757ec870f79 100644
--- a/app/views/shared/runners/show.html.haml
+++ b/app/views/shared/runners/show.html.haml
@@ -1,17 +1,8 @@
 - page_title "#{@runner.description} ##{@runner.id}", _("Runners")
 
-%h3.page-title
-  = s_('Runners|Runner #%{id}' % { id: @runner.id })
-  .float-right
-    - if @runner.instance_type?
-      %span.runner-state.runner-state-shared
-        = s_('Runners|Shared')
-    - elsif @runner.group_type?
-      %span.runner-state.runner-state-shared
-        = s_('Runners|Group')
-    - else
-      %span.runner-state.runner-state-specific
-        = s_('Runners|Specific')
+%h2.page-title
+  = s_('Runners|Runner #%{runner_id}' % { runner_id: @runner.id })
+  = render 'shared/runners/runner_type_badge', runner: @runner
 
 .table-holder
   %table.table
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
index 82e32597c94..1c8e300fa8a 100644
--- a/app/views/shared/tokens/_scopes_form.html.haml
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -5,5 +5,5 @@
 - scopes.each do |scope|
   %fieldset.form-group.form-check
     = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}", class: "form-check-input qa-#{scope}-radio"
-    = label_tag ("#{prefix}_scopes_#{scope}"), scope, class: 'label-bold form-check-label'
+    = label_tag "#{prefix}_scopes_#{scope}", scope, class: 'label-bold form-check-label'
     .text-secondary= t scope, scope: scope_description(prefix)
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index 5437748a57e..abe23d0be78 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -11,6 +11,6 @@
           = hook.enable_ssl_verification ? _('enabled') : _('disabled')
 
     .col-md-4.col-lg-5.text-right-md.gl-mt-2
-      %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm gl-mr-3'
-      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'gl-button btn btn-sm gl-mr-3'
-      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'gl-button btn btn-sm'
+      %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm btn-default gl-mr-3'
+      %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn gl-button btn-default btn-sm gl-mr-3'
+      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn gl-button btn-default btn-sm'
diff --git a/app/views/shared/web_hooks/_test_button.html.haml b/app/views/shared/web_hooks/_test_button.html.haml
index a683f75c779..3ffa45f01be 100644
--- a/app/views/shared/web_hooks/_test_button.html.haml
+++ b/app/views/shared/web_hooks/_test_button.html.haml
@@ -2,11 +2,12 @@
 - hook = local_assigns.fetch(:hook)
 - triggers = hook.class.triggers
 
-.hook-test-button.dropdown.inline>
+.hook-test-button.dropdown.gl-new-dropdown.inline>
   %button.btn.gl-button{ 'data-toggle' => 'dropdown', class: button_class }
     = _('Test')
     = sprite_icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
-    - triggers.each_value do |event|
-      %li
-        = link_to_test_hook(hook, event)
+    .gl-new-dropdown-inner
+      - triggers.each_value do |event|
+        %li.gl-new-dropdown-item
+          = link_to_test_hook(hook, event)
diff --git a/app/views/shared/wikis/_form.html.haml b/app/views/shared/wikis/_form.html.haml
index d91e3c73c49..e121725b9af 100644
--- a/app/views/shared/wikis/_form.html.haml
+++ b/app/views/shared/wikis/_form.html.haml
@@ -1,79 +1,6 @@
-- form_classes = %w[wiki-form common-note-form gl-mt-3 js-quick-submit]
+- page_info = { last_commit_sha: @page.last_commit_sha, persisted: @page.persisted?, title: @page.title, content: @page.content || '', format: @page.format.to_s, uploads_path: uploads_path, path: wiki_page_path(@wiki, @page), wiki_path: wiki_path(@wiki), help_path: help_page_path('user/project/wiki/index'), markdown_help_path: help_page_path('user/markdown'), markdown_preview_path: wiki_page_path(@wiki, @page, action: :preview_markdown), create_path: wiki_path(@wiki, action: :create) }
 
-- if @page.persisted?
-  - form_action = wiki_page_path(@wiki, @page)
-  - form_method = :put
-- else
-  - form_action = wiki_path(@wiki, action: :create)
-  - form_method = :post
-  - form_classes << 'js-new-wiki-page'
-
-= form_for @page, url: form_action, method: form_method,
-           html: { class: form_classes },
-           data: { uploads_path: uploads_path } do |f|
+.gl-mt-3
   = form_errors(@page, truncate: :title)
 
-  - if @page.persisted?
-    = f.hidden_field :last_commit_sha, value: @page.last_commit_sha
-
-  .form-group.row
-    .col-sm-2.col-form-label= f.label :title, class: 'control-label-full-width'
-    .col-sm-10
-      = f.text_field :title, class: 'form-control qa-wiki-title-textbox', value: @page.title, required: true, autofocus: !@page.persisted?, placeholder: s_('Wiki|Page title')
-      %span.gl-display-inline-block.gl-max-w-full.gl-mt-2.gl-text-gray-600
-        = sprite_icon('bulb', size: 12, css_class: 'gl-mr-n1')
-        - if @page.persisted?
-          = s_("WikiEditPageTip|Tip: You can move this page by adding the path to the beginning of the title.")
-          = link_to sprite_icon('question-o'), help_page_path('user/project/wiki/index', anchor: 'moving-a-wiki-page'),
-              target: '_blank', rel: 'noopener noreferrer'
-        - else
-          = s_("WikiNewPageTip|Tip: You can specify the full path for the new file. We will automatically create any missing directories.")
-        = succeed '.' do
-          = link_to _('More information'), help_page_path('user/project/wiki/index', anchor: 'creating-a-new-wiki-page'),
-              target: '_blank', rel: 'noopener noreferrer'
-  .form-group.row
-    .col-sm-2.col-form-label= f.label :format, class: 'control-label-full-width'
-    .col-sm-10
-      .select-wrapper
-        = f.select :format, options_for_select(Wiki::MARKUPS, {selected: @page.format}), {}, class: 'form-control select-control'
-        = sprite_icon('chevron-down', css_class: 'gl-absolute gl-top-3 gl-right-3 gl-text-gray-200')
-
-  .form-group.row
-    .col-sm-2.col-form-label= f.label :content, class: 'control-label-full-width'
-    .col-sm-10
-      = render layout: 'shared/md_preview', locals: { url: wiki_page_path(@wiki, @page, action: :preview_markdown) } do
-        = render 'shared/zen', f: f, attr: :content, classes: 'note-textarea qa-wiki-content-textarea', placeholder: s_("WikiPage|Write your content or drag files here…"), autofocus: @page.persisted?
-        = render 'shared/notes/hints'
-
-      .clearfix
-      .error-alert
-
-      .form-text.gl-text-gray-600
-        = succeed '.' do
-          - case @page.format.to_s
-            - when 'rdoc'
-              - link_example = '{Link title}[link:page-slug]'
-            - when 'asciidoc'
-              - link_example = 'link:page-slug[Link title]'
-            - when 'org'
-              - link_example = '[[page-slug]]'
-            - else
-              - link_example = '[Link Title](page-slug)'
-          = html_escape(s_('WikiMarkdownTip|To link to a (new) page, simply type %{link_example}')) % { link_example: tag.code(link_example, class: 'js-markup-link-example') }
-        = succeed '.' do
-          - markdown_link = link_to s_("WikiMarkdownDocs|documentation"), help_page_path('user/markdown', anchor: 'wiki-specific-markdown')
-          = (s_("WikiMarkdownDocs|More examples are in the %{docs_link}") % { docs_link: markdown_link }).html_safe
-
-  .form-group.row
-    .col-sm-2.col-form-label= f.label :commit_message, class: 'control-label-full-width'
-    .col-sm-10= f.text_field :message, class: 'form-control qa-wiki-message-textbox', rows: 18, value: nil
-
-  .form-actions
-    - if @page && @page.persisted?
-      = f.submit _("Save changes"), class: 'btn gl-button btn-confirm qa-save-changes-button js-wiki-btn-submit', disabled: 'true'
-      .float-right
-        = link_to _("Cancel"), wiki_page_path(@wiki, @page), class: 'btn gl-button btn-cancel btn-default'
-    - else
-      = f.submit s_("Wiki|Create page"), class: 'btn-confirm gl-button btn qa-create-page-button rspec-create-page-button js-wiki-btn-submit', disabled: 'true'
-      .float-right
-        = link_to _("Cancel"), wiki_path(@wiki), class: 'btn gl-button btn-cancel btn-default'
+#js-wiki-form{ data: { page_info: page_info.to_json, format_options: Wiki::MARKUPS.to_json } }
diff --git a/app/views/shared/wikis/history.html.haml b/app/views/shared/wikis/history.html.haml
index b1dcd2cd400..079b9768730 100644
--- a/app/views/shared/wikis/history.html.haml
+++ b/app/views/shared/wikis/history.html.haml
@@ -28,7 +28,7 @@
             %td
               = commit.author_name
             %td
-              %span.str-truncated-60
+              .commit-content
                 = link_to wiki_page_path(@wiki, @page, action: :diff, version_id: commit.id), { title: commit.message } do
                   = commit.message
             %td
diff --git a/app/views/shared/wikis/pages.html.haml b/app/views/shared/wikis/pages.html.haml
index f5ba1c83de4..1889b6501c9 100644
--- a/app/views/shared/wikis/pages.html.haml
+++ b/app/views/shared/wikis/pages.html.haml
@@ -5,8 +5,6 @@
 - add_page_specific_style 'page_bundles/wiki'
 
 .wiki-page-header.top-area.flex-column.flex-lg-row
-
-
   %h3.page-title.gl-flex-fill-1
     = s_("Wiki|Wiki Pages")
 
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 92f4f16f453..cd810ae10ad 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -26,7 +26,7 @@
   .card
     .card-header
       .float-right
-        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
+        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
           = sprite_icon('copy-to-clipboard')
         %pre.hidden
           = @query.formatted_query
@@ -41,7 +41,7 @@
   .card
     .card-header
       .float-right
-        %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
+        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
           = sprite_icon('copy-to-clipboard')
         %pre.hidden
           = @query.explain
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 51483df19d7..daa41e0ebfe 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -67,13 +67,13 @@
           .cover-desc.cgray.mb-1.mb-sm-2
             - unless @user.location.blank?
               .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline.mb-1.mb-sm-0{ itemprop: 'address', itemscope: true, itemtype: 'https://schema.org/PostalAddress' }
-                = sprite_icon('location', css_class: 'vertical-align-sub fgray')
-                %span.vertical-align-middle{ itemprop: 'addressLocality' }
+                = sprite_icon('location', css_class: 'fgray')
+                %span{ itemprop: 'addressLocality' }
                   = @user.location
             - unless work_information(@user).blank?
               .profile-link-holder.middle-dot-divider-sm.d-block.d-sm-inline
-                = sprite_icon('work', css_class: 'vertical-align-middle fgray')
-                %span.vertical-align-middle
+                = sprite_icon('work', css_class: 'fgray')
+                %span
                   = work_information(@user, with_schema_markup: true)
           .cover-desc.cgray.mb-1.mb-sm-2
             - unless @user.skype.blank?
@@ -163,6 +163,7 @@
 
       - if profile_tab?(:activity)
         #activity.tab-pane
+          .flash-container
           - if can?(current_user, :read_cross_project)
             %h4.prepend-top-20
               = s_('UserProfile|Most Recent Activity')
diff --git a/app/views/users/terms/index.html.haml b/app/views/users/terms/index.html.haml
index da8b73fd4fd..73d0f51f9ac 100644
--- a/app/views/users/terms/index.html.haml
+++ b/app/views/users/terms/index.html.haml
@@ -6,11 +6,11 @@
   .card-footer.footer-block.clearfix
     - if can?(current_user, :accept_terms, @term)
       .float-right
-        = button_to accept_term_path(@term, redirect_params), class: 'gl-button btn btn-success gl-ml-3', data: { qa_selector: 'accept_terms_button' } do
+        = button_to accept_term_path(@term, redirect_params), class: 'gl-button btn btn-confirm gl-ml-3', data: { qa_selector: 'accept_terms_button' } do
           = _('Accept terms')
     - else
       .float-right
-        = link_to root_path, class: 'gl-button btn btn-success gl-ml-3' do
+        = link_to root_path, class: 'gl-button btn btn-confirm gl-ml-3' do
           = _('Continue')
     - if can?(current_user, :decline_terms, @term)
       .float-right