diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index 48a834858c65f64b3d481576df7b923e0b30a47f..411f5300120f3484c4b1002736d4000cec9d4053 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -95,6 +95,10 @@
   // Table adjustments
   @mixin new-card-table-adjustments {
     tbody > tr {
+      &:first-of-type > td[data-label] {
+        @include gl-border-t-0;
+      }
+
       > td[data-label] {
         @include gl-border-left-0;
         @include gl-border-l-none;
@@ -119,8 +123,15 @@
 
   table.b-table-stacked-sm,
   table.b-table-stacked-md {
-    @include gl-mt-n1;
-    @include gl-mb-n2;
+    @include gl-mb-0;
+
+    tr:first-of-type th {
+      @include gl-border-t-0;
+    }
+
+    tr:last-of-type td {
+      @include gl-border-b-0;
+    }
   }
 
   table.gl-table.b-table.b-table-stacked-sm {
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index e32a50e252d80b6ea1b6272d6a06bf5f2dad7357..063045033b692d4ddc733ffcb9068cabc9e30b63 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -1,52 +1,51 @@
 - page_title s_('AdminArea|Instance OAuth applications')
 
-%h1.page-title.gl-font-size-h-display
-  = s_('AdminArea|Instance OAuth applications')
-%p.light
-  - docs_link_path = help_page_path('integration/oauth_provider')
-  - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
-  = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+  - c.with_header do
+    .gl-new-card-title-wrapper.gl-flex-direction-column
+      %h3.gl-new-card-title
+        =  s_('AdminArea|Instance OAuth applications')
+        .gl-new-card-count
+          = sprite_icon('applications', css_class: 'gl-mr-2')
+          = @applications.size
+      %p.gl-new-card-description
+        - docs_link_path = help_page_path('integration/oauth_provider')
+        - docs_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: docs_link_path }
+        = s_('AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}.').html_safe % { docs_link_start: docs_link_start, docs_link_end: '</a>'.html_safe }
 
-- if @applications.empty?
-  %section.empty-state.gl-text-center.gl-display-flex.gl-flex-direction-column
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-admin-apps-md.svg', class: 'gl-max-w-full'
-
-    .gl-max-w-full.gl-m-auto
-      %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
-      = render Pajamas::ButtonComponent.new(href: new_admin_application_path, variant: :confirm, button_options: { data: { qa_selector: 'new_application_button' } }) do
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, href: new_admin_application_path, button_options: { data: { qa_selector: 'new_application_button' } }) do
         = _('New application')
+  - c.with_body do
+    - if @applications.empty?
+      %section.empty-state.gl-my-5.gl-text-center.gl-display-flex.gl-flex-direction-column
+        .svg-content.svg-150
+          = image_tag 'illustrations/empty-state/empty-admin-apps-md.svg', class: 'gl-max-w-full'
 
-- else
-  %hr
-    = render Pajamas::ButtonComponent.new(href: new_admin_application_path, variant: :confirm, button_options: { data: { qa_selector: 'new_application_button' } }) do
-      = _('New application')
-
-  .table-responsive
-    %table.b-table.gl-table.gl-w-full{ role: 'table' }
-      %thead
-        %tr
-          %th
-            = _('Name')
-          %th
-            = _('Callback URL')
-          %th
-            = _('Trusted')
-          %th
-            = _('Confidential')
-          %th
-          %th
-      %tbody.oauth-applications
-        - @applications.each do |application|
-          %tr{ id: "application_#{application.id}" }
-            %td= link_to application.name, admin_application_path(application)
-            %td= application.redirect_uri
-            %td= application.trusted? ? _('Yes'): _('No')
-            %td= application.confidential? ? _('Yes'): _('No')
-            %td
-              = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), variant: :link) do
-                = _('Edit')
-            %td= render 'delete_form', application: application
+        .gl-max-w-full.gl-m-auto
+          %h1.h4.gl-font-size-h-display= s_('AdminArea|No applications found')
+          %p.gl-text-secondary.gl-mt-3= s_('AdminArea|Manage applications for your instance that can use GitLab as an OAuth provider, start by creating a new one above.')
+    - else
+      .table-holder
+        %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
+          %thead
+            %tr
+              %th= _('Name')
+              %th= _('Callback URL')
+              %th= _('Trusted')
+              %th= _('Confidential')
+              %th= _('Actions')
+          %tbody.oauth-applications
+            - @applications.each do |application|
+              %tr{ id: "application_#{application.id}" }
+                %td{ data: { label: _('Name') } }= link_to application.name, admin_application_path(application)
+                %td{ data: { label: _('Callback URL') } }= application.redirect_uri
+                %td{ data: { label: _('Trusted') } }= application.trusted? ? _('Yes'): _('No')
+                %td{ data: { label: _('Confidential') } }= application.confidential? ? _('Yes'): _('No')
+                %td{ data: { label: _('Actions') } }
+                  = render Pajamas::ButtonComponent.new(href: edit_admin_application_path(application), size: :small, button_options: { class: 'gl-mr-3' }) do
+                    = _('Edit')
+                  = render 'delete_form', application: application
 
 = paginate @applications, theme: 'gitlab'
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ff6a572593190bda06b94becbc784a7fd66ac811..19a08d8175819cd87054ba78691ef2d3a1756270 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -3157,6 +3157,9 @@ msgstr ""
 msgid "AdminArea|Manage applications for your instance that can use GitLab as an %{docs_link_start}OAuth provider%{docs_link_end}."
 msgstr ""
 
+msgid "AdminArea|Manage applications for your instance that can use GitLab as an OAuth provider, start by creating a new one above."
+msgstr ""
+
 msgid "AdminArea|Minimal access"
 msgstr ""