diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index ed078230349b7140ea71278cad6cd9432eee4a13..167ed3a074b09b15f7075812018be61858be6983 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -2,16 +2,20 @@
 - page_title _("Projects")
 - @force_desktop_expanded_sidebar = true
 
-= render Pajamas::CardComponent.new(card_options: { class: 'gl-mt-3 js-search-settings-section' }, header_options: { class: 'gl-display-flex' }, body_options: { class: 'gl-py-0' }) do |c|
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-search-settings-section' }, header_options: { class: 'gl-new-card-header gl-display-flex' }, body_options: { class: 'gl-new-card-body' }) do |c|
   - c.with_header do
-    .gl-flex-grow-1
-      = html_escape(_("%{strong_open}%{group_name}%{strong_close} projects:")) % { strong_open: '<strong>'.html_safe, group_name: @group.name, strong_close: '</strong>'.html_safe }
-    - if can? current_user, :admin_group, @group
-      .controls
-        = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), size: :small, variant: :confirm) do
+    .gl-new-card-title-wrapper
+      %h3.gl-new-card-title
+        = _('Projects')
+      .gl-new-card-count
+        = sprite_icon('project', css_class: 'gl-mr-2')
+        = @projects.size
+    .gl-new-card-actions
+      - if can? current_user, :admin_group, @group
+        = render Pajamas::ButtonComponent.new(href: new_project_path(namespace_id: @group.id), size: :small) do
           = _("New project")
   - c.with_body do
-    %ul.content-list
+    %ul.content-list{ class: 'gl-px-3!' }
       - @projects.each_with_index do |project, idx|
         %li.project-row.gl-align-items-center{ class: 'gl-display-flex!', data: { qa_selector: 'project_row_container', qa_index: idx } }
           .avatar-container.rect-avatar.s40.gl-flex-shrink-0
@@ -26,22 +30,23 @@
                       \/
                   %span.project-name{ data: { qa_selector: 'project_name_content', qa_project_name: project.name } }
                     = project.name
-                  %span{ class: visibility_level_color(project.visibility_level) }
-                    = visibility_level_icon(project.visibility_level)
+              %span.visibility-icon.gl-text-secondary.has-tooltip.gl-ml-2{ data: { container: 'body' }, title: visibility_icon_description(project) }
+                = visibility_level_icon(project.visibility_level, options: { class: 'icon' })
 
             - if project.description.present?
               .description
                 = markdown_field(project, :description)
 
-          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
+          .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex.gl-gap-3
             = gl_badge_tag storage_counter(project.statistics&.storage_size)
             = render 'project_badges', project: project
-
           .controls.gl-flex-shrink-0.gl-ml-5
             = render Pajamas::ButtonComponent.new(href: project_project_members_path(project),
-              button_options: { data: { qa_selector: 'project_members_button' } }) do
-              = _('Members')
+              variant: :link,
+              button_options: { class: 'gl-mr-2', data: { qa_selector: 'project_members_button' } }) do
+              = _('View members')
             = render Pajamas::ButtonComponent.new(href: edit_project_path(project),
+              size: :small,
               button_options: { data: { qa_selector: 'project_edit_button' } }) do
               = _('Edit')
             = render 'delete_project_button', project: project, data: { qa_selector: 'project_delete_button' }
diff --git a/ee/app/views/groups/_delete_project_button.html.haml b/ee/app/views/groups/_delete_project_button.html.haml
index 301be9ed3ff7597ea8f8851c962dddbdf59912a5..ef7304e85851cb6275ded11813b71e37f85c7a7b 100644
--- a/ee/app/views/groups/_delete_project_button.html.haml
+++ b/ee/app/views/groups/_delete_project_button.html.haml
@@ -1,3 +1,3 @@
 - unless project.marked_for_deletion?
-  = render Pajamas::ButtonComponent.new(href: project, variant: :danger, method: :delete, button_options: { data: { confirm: remove_project_message(project) } }) do
+  = render Pajamas::ButtonComponent.new(href: project, size: :small, method: :delete, button_options: { data: { confirm: remove_project_message(project), confirm_btn_variant: 'danger' }, aria: { label: _('Delete project') }}) do
     = _('Delete')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 14c88b24cfb7fb36f1cd317e64e1aefa3dfc9bb1..8f2f775b55db96ba0eacb4795ecea39bd305f97c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1153,9 +1153,6 @@ msgstr[1] ""
 msgid "%{strongStart}Tip:%{strongEnd} You can also %{linkStart}check out with merge request ID%{linkEnd}."
 msgstr ""
 
-msgid "%{strong_open}%{group_name}%{strong_close} projects:"
-msgstr ""
-
 msgid "%{strong_start}%{branch_count}%{strong_end} Branch"
 msgid_plural "%{strong_start}%{branch_count}%{strong_end} Branches"
 msgstr[0] ""
@@ -50860,6 +50857,9 @@ msgstr ""
 msgid "View log"
 msgstr ""
 
+msgid "View members"
+msgstr ""
+
 msgid "View milestones"
 msgstr ""