diff --git a/app/views/shared/doorkeeper/applications/_delete_form.html.haml b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
index 512daf7b96b932f54be5ba0fed5be0d12346039d..6b80b42f91822cd6d4ea4647a5f14a55d4fe19ff 100644
--- a/app/views/shared/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_delete_form.html.haml
@@ -1,10 +1,7 @@
-- submit_btn_css ||= 'btn btn-danger btn-md gl-button btn-danger-secondary'
 = form_tag path do
   %input{ :name => "_method", :type => "hidden", :value => "delete" }
   - if defined? small
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'remove', button_options: { class: submit_btn_css, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
-      %span.sr-only
-        = _('Destroy')
+    = render Pajamas::ButtonComponent.new(type: :submit, category: :tertiary, icon: 'remove', button_options: { 'class': 'has-tooltip', 'title': _('Destroy'), aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } })
   - else
-    = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, button_options: { class: submit_btn_css, aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
+    = render Pajamas::ButtonComponent.new(type: :submit, category: :primary, variant: :danger, button_options: { aria: { label: _('Destroy') }, data: { confirm: _("Are you sure?"), confirm_btn_variant: "danger" } }) do
       = _('Destroy')
diff --git a/app/views/shared/doorkeeper/applications/_form.html.haml b/app/views/shared/doorkeeper/applications/_form.html.haml
index ae539c46cf14b9b095b797e20fd10f593ba7f1c4..f24606317ff66c0213285fea95a18bced6ab71ee 100644
--- a/app/views/shared/doorkeeper/applications/_form.html.haml
+++ b/app/views/shared/doorkeeper/applications/_form.html.haml
@@ -1,3 +1,5 @@
+- show_cancel_button = local_assigns.fetch(:cancel, false)
+
 = gitlab_ui_form_for @application, url: url, html: { role: 'form', class: 'doorkeeper-app-form gl-max-w-80' } do |f|
   = form_errors(@application)
 
@@ -22,3 +24,6 @@
 
   .gl-mt-3
     = f.submit _('Save application'), pajamas_button: true
+    - if show_cancel_button
+      = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
+        = _('Cancel')
diff --git a/app/views/shared/doorkeeper/applications/_index.html.haml b/app/views/shared/doorkeeper/applications/_index.html.haml
index bf78f275d654a34cc5e5312b8ed2bbed45e36df5..f28cc64b9690b8721f2497f9e0ec2ed35644d1c5 100644
--- a/app/views/shared/doorkeeper/applications/_index.html.haml
+++ b/app/views/shared/doorkeeper/applications/_index.html.haml
@@ -1,4 +1,6 @@
 - @force_desktop_expanded_sidebar = true
+- add_form_class = 'gl-display-none' if !form_errors(@application)
+- hide_class = 'gl-display-none' if form_errors(@application)
 
 .settings-section.js-search-settings-section
   .settings-sticky-header
@@ -14,73 +16,92 @@
     - else
       = _("Manage applications that you've authorized to use your account.")
   - if oauth_applications_enabled
-    %h5.gl-mt-0
-      = _('Add new application')
-    .gl-border-b.gl-pb-6
-      = render 'shared/doorkeeper/applications/form', url: form_url
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-applications js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Your applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @applications.size
+        .gl-new-card-actions
+          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content #{hide_class}" }) do
+            = _('Add new application')
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.js-toggle-content{ class: add_form_class }
+          %h4.gl-mt-0
+            = _('Add new application')
+          = render 'shared/doorkeeper/applications/form', url: form_url, cancel: true
+
+        - if @applications.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Callback URL')
+                  %th= _('Clients')
+                  %th.last-heading
+              %tbody
+                - @applications.each do |application|
+                  %tr{ id: "application_#{application.id}" }
+                    %td{ data: { label: _('Name') } }
+                      = link_to application.name, application_url.call(application)
+                    %td{ data: { label: _('Callback URL') } }
+                      - application.redirect_uri.split.each do |uri|
+                        = uri
+                    %td{ data: { label: _('Clients') } }
+                      = application.access_tokens.count
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      %div{ class: 'gl-display-flex! gl-pl-0!' }
+                        = render Pajamas::ButtonComponent.new(category: :tertiary, href: edit_application_url.call(application), icon: 'pencil', button_options: { class: 'has-tooltip gl-mr-3', 'title': _('Edit'), 'aria-label': _('Edit') })
+                        = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4.js-toggle-content
+            = _("You don't have any applications.")
 
   - else
     .bs-callout.bs-callout-disabled
-      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission')
-  - if oauth_applications_enabled
-    .oauth-applications.gl-pt-6
-      %h5.gl-mt-0
-        = _("Your applications (%{size})") % { size: @applications.size }
-      - if @applications.any?
-        .table-responsive
-          %table.table
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Callback URL')
-                %th= _('Clients')
-                %th.last-heading
-            %tbody
-              - @applications.each do |application|
-                %tr{ id: "application_#{application.id}" }
-                  %td= link_to application.name, application_url.call(application)
-                  %td
-                    - application.redirect_uri.split.each do |uri|
-                      %div= uri
-                  %td= application.access_tokens.count
-                  %td.gl-display-flex
-                    = link_button_to nil, edit_application_url.call(application), class: 'gl-mr-3', icon: 'pencil', 'aria-label': _('Edit')
-                    = render 'shared/doorkeeper/applications/delete_form', path: application_url.call(application), small: true
-      - else
-        .settings-message
-          = _("You don't have any applications")
-  - if oauth_authorized_applications_enabled
-    .oauth-authorized-applications.gl-mt-4
-      - if oauth_applications_enabled
-        %h5.gl-mt-0
-          = _("Authorized applications (%{size})") % { size: @authorized_tokens.size }
+      = _('Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission.')
 
-      - if @authorized_tokens.any?
-        .table-responsive
-          %table.table.table-striped
-            %thead
-              %tr
-                %th= _('Name')
-                %th= _('Authorized At')
-                %th= _('Scope')
-                %th
-            %tbody
-              - @authorized_tokens.each do |token|
-                %tr{ id: ("application_#{token.application.id}" if token.application) }
-                  %td
-                    - if token.application
-                      = token.application.name
-                    - else
-                      = _('Anonymous')
-                      .form-text.text-muted
-                        %em= _("Authorization was granted by entering your username and password in the application.")
-                  %td= token.created_at
-                  %td= token.scopes
-                  %td
-                    - if token.application
-                      = render 'doorkeeper/authorized_applications/delete_form', application: token.application
-                    - else
-                      = render 'doorkeeper/authorized_applications/delete_form', token: token
-      - else
-        .settings-message
-          = _("You don't have any authorized applications")
+  - if oauth_authorized_applications_enabled
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card oauth-authorized-applications' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('Authorized applications')
+          .gl-new-card-count
+            = sprite_icon('applications', css_class: 'gl-mr-2')
+            = @authorized_tokens.size
+      - c.with_body do
+        - if @authorized_tokens.any?
+          .table-holder
+            %table.table.b-table.gl-table.b-table-stacked-sm.gl-mt-n1.gl-mb-n2
+              %thead.d-none.d-md-table-header-group
+                %tr
+                  %th= _('Name')
+                  %th= _('Authorized At')
+                  %th= _('Scope')
+                  %th
+              %tbody
+                - @authorized_tokens.each do |token|
+                  %tr{ id: ("application_#{token.application.id}" if token.application) }
+                    %td{ data: { label: _('Name') } }
+                      - if token.application
+                        = token.application.name
+                      - else
+                        = _('Anonymous')
+                        .form-text.text-muted
+                          %em= _("Authorization was granted by entering your username and password in the application.")
+                    %td{ data: { label: _('Authorized At') } }
+                      = token.created_at
+                    %td{ data: { label: _('Scope') } }
+                      = token.scopes
+                    %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+                      - if token.application
+                        = render 'doorkeeper/authorized_applications/delete_form', application: token.application
+                      - else
+                        = render 'doorkeeper/authorized_applications/delete_form', token: token
+        - else
+          .gl-new-card-empty.gl-px-5.gl-py-4{ class: hide_class }
+            = _("You don't have any authorized applications.")
diff --git a/app/views/shared/doorkeeper/applications/_show.html.haml b/app/views/shared/doorkeeper/applications/_show.html.haml
index b075cece87775b8cb8aa73c183586dc16165ac56..4101a456f32e721f59ac8c793608a382f94e7fdc 100644
--- a/app/views/shared/doorkeeper/applications/_show.html.haml
+++ b/app/views/shared/doorkeeper/applications/_show.html.haml
@@ -40,7 +40,7 @@
 
     = render "shared/tokens/scopes_list", token: @application
 
-.form-actions.gl-display-flex.gl-justify-content-space-between
+.gl-display-flex.gl-justify-content-space-between
   %div
     - if @created
       = link_button_to _('Continue'), index_path, class: 'gl-mr-3', variant: :confirm
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2d39cc82515435120581687d81eef39f7dd90ad4..ff6a572593190bda06b94becbc784a7fd66ac811 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2986,7 +2986,7 @@ msgstr ""
 msgid "Added in this version"
 msgstr ""
 
-msgid "Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission"
+msgid "Adding new applications is disabled in your GitLab instance. Please contact your GitLab administrator to get the permission."
 msgstr ""
 
 msgid "Additional compute minutes:"
@@ -6814,7 +6814,7 @@ msgstr ""
 msgid "Authorized At"
 msgstr ""
 
-msgid "Authorized applications (%{size})"
+msgid "Authorized applications"
 msgstr ""
 
 msgid "AuthorizedApplication|Application secret was successfully renewed."
@@ -53271,10 +53271,10 @@ msgstr ""
 msgid "You don't have any active chat names."
 msgstr ""
 
-msgid "You don't have any applications"
+msgid "You don't have any applications."
 msgstr ""
 
-msgid "You don't have any authorized applications"
+msgid "You don't have any authorized applications."
 msgstr ""
 
 msgid "You don't have any deployments right now."
@@ -53761,7 +53761,7 @@ msgstr ""
 msgid "Your activity"
 msgstr ""
 
-msgid "Your applications (%{size})"
+msgid "Your applications"
 msgstr ""
 
 msgid "Your authorized applications"
diff --git a/spec/features/profiles/oauth_applications_spec.rb b/spec/features/profiles/oauth_applications_spec.rb
index d088f73f9dff7e7459f21507e620f289c435f77d..0b1d67d00c9da41d607f1390ad2459a49739e77d 100644
--- a/spec/features/profiles/oauth_applications_spec.rb
+++ b/spec/features/profiles/oauth_applications_spec.rb
@@ -25,15 +25,21 @@
       visit oauth_applications_path
 
       page.within('.oauth-applications') do
-        expect(page).to have_content('Your applications (1)')
+        page.within('.gl-new-card-count') do
+          expect(page).to have_content('1')
+        end
         click_button 'Destroy'
       end
 
       accept_gl_confirm(button_text: 'Destroy')
 
       expect(page).to have_content('The application was deleted successfully')
-      expect(page).to have_content('Your applications (0)')
-      expect(page).to have_content('Authorized applications (0)')
+      page.within('.oauth-applications .gl-new-card-count') do
+        expect(page).to have_content('0')
+      end
+      page.within('.oauth-authorized-applications .gl-new-card-count') do
+        expect(page).to have_content('0')
+      end
     end
   end
 
@@ -57,7 +63,9 @@
       it 'displays the correct authorized applications' do
         visit oauth_applications_path
 
-        expect(page).to have_content('Authorized applications (2)')
+        page.within('.oauth-authorized-applications .gl-new-card-count') do
+          expect(page).to have_content('2')
+        end
 
         page.within('div.oauth-authorized-applications') do
           # Ensure the correct user's token details are displayed
@@ -85,7 +93,9 @@
       accept_gl_confirm(button_text: 'Revoke application')
 
       expect(page).to have_content('The application was revoked access.')
-      expect(page).to have_content('Authorized applications (0)')
+      page.within('.oauth-authorized-applications .gl-new-card-count') do
+        expect(page).to have_content('0')
+      end
     end
 
     it 'deletes an anonymous authorized application' do
@@ -93,14 +103,18 @@
       visit oauth_applications_path
 
       page.within('.oauth-authorized-applications') do
-        expect(page).to have_content('Authorized applications (1)')
+        page.within('.oauth-authorized-applications .gl-new-card-count') do
+          expect(page).to have_content('1')
+        end
         click_button 'Revoke'
       end
 
       accept_gl_confirm(button_text: 'Revoke application')
 
       expect(page).to have_content('The application was revoked access.')
-      expect(page).to have_content('Authorized applications (0)')
+      page.within('.oauth-authorized-applications .gl-new-card-count') do
+        expect(page).to have_content('0')
+      end
     end
   end
 end
diff --git a/spec/support/shared_examples/features/manage_applications_shared_examples.rb b/spec/support/shared_examples/features/manage_applications_shared_examples.rb
index b8fd58e7efae772d60f232af2782ccea3ae69b67..05b1c991cdbc7667acaa57c7367f4f8401c69773 100644
--- a/spec/support/shared_examples/features/manage_applications_shared_examples.rb
+++ b/spec/support/shared_examples/features/manage_applications_shared_examples.rb
@@ -10,6 +10,8 @@
 
     expect(page).to have_content 'Add new application'
 
+    click_button 'Add new application' if page.has_css?('.gl-new-card-header')
+
     fill_in :doorkeeper_application_name, with: application_name
     fill_in :doorkeeper_application_redirect_uri, with: application_redirect_uri
     check :doorkeeper_application_scopes_read_user