diff --git a/ee/app/assets/javascripts/status_checks/components/actions.vue b/ee/app/assets/javascripts/status_checks/components/actions.vue
index a6392b75cc2f504a8d6409a3748e6d89ac09f9e5..0e10b0bbfa8678eb045708e9923f94a23ffebb58 100644
--- a/ee/app/assets/javascripts/status_checks/components/actions.vue
+++ b/ee/app/assets/javascripts/status_checks/components/actions.vue
@@ -15,22 +15,31 @@ export default {
   },
   i18n: {
     editButton: __('Edit'),
-    removeButton: __('Remove...'),
+    removeButton: __('Remove'),
   },
 };
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-end">
-    <gl-button data-testid="edit-btn" @click="$emit('open-update-modal', statusCheck)">
-      {{ $options.i18n.editButton }}
-    </gl-button>
+  <div class="gl-display-flex gl-justify-content-end gl-mt-n2 gl-mb-n2">
     <gl-button
+      size="small"
+      icon="pencil"
+      :title="$options.i18n.editButton"
+      :aria-label="$options.i18n.editButton"
+      data-testid="edit-btn"
+      @click="$emit('open-update-modal', statusCheck)"
+    />
+    <gl-button
+      size="small"
+      category="secondary"
+      variant="danger"
+      icon="remove"
       class="gl-ml-3"
+      :title="$options.i18n.removeButton"
+      :aria-label="$options.i18n.removeButton"
       data-testid="remove-btn"
       @click="$emit('open-delete-modal', statusCheck)"
-    >
-      {{ $options.i18n.removeButton }}
-    </gl-button>
+    />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/status_checks/components/modal_create.vue b/ee/app/assets/javascripts/status_checks/components/modal_create.vue
index 19f2a07408ce48acf9524c5050bac44c3f600a02..b65ace762f0407b3caac481b0080d0043e206af0 100644
--- a/ee/app/assets/javascripts/status_checks/components/modal_create.vue
+++ b/ee/app/assets/javascripts/status_checks/components/modal_create.vue
@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div>
-    <gl-button category="secondary" variant="confirm" size="small" @click="show()">
+    <gl-button category="secondary" size="small" @click="show">
       {{ $options.i18n.addButton }}
     </gl-button>
     <shared-modal
diff --git a/ee/app/assets/javascripts/status_checks/components/status_checks.vue b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
index c0cfa8e3b4abe73745f64ce5b071610296ff999a..511aa48da47078c9ffe8831417e2b213fc4b51a7 100644
--- a/ee/app/assets/javascripts/status_checks/components/status_checks.vue
+++ b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
@@ -1,7 +1,8 @@
 <script>
-import { GlTable } from '@gitlab/ui';
+import { GlCard, GlTable, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { thWidthPercent } from '~/lib/utils/table_utility';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, s__ } from '~/locale';
 import { EMPTY_STATUS_CHECK } from '../constants';
 import Actions from './actions.vue';
@@ -11,8 +12,13 @@ import ModalDelete from './modal_delete.vue';
 import ModalUpdate from './modal_update.vue';
 
 export const i18n = {
+  title: s__('StatusCheck|Status checks'),
+  description: s__(
+    'StatusCheck|Check for a status response in merge requests. %{linkStart}Learn more%{linkEnd}.',
+  ),
   apiHeader: __('API'),
   branchHeader: __('Target branch'),
+  actionsHeader: __('Actions'),
   emptyTableText: s__('StatusCheck|No status checks are defined yet.'),
   nameHeader: s__('StatusCheck|Service name'),
 };
@@ -21,7 +27,11 @@ export default {
   components: {
     Actions,
     Branch,
+    GlCard,
     GlTable,
+    GlIcon,
+    GlLink,
+    GlSprintf,
     ModalCreate,
     ModalDelete,
     ModalUpdate,
@@ -63,16 +73,44 @@ export default {
     },
     {
       key: 'actions',
-      label: '',
+      label: i18n.actionsHeader,
+      thClass: 'gl-text-right',
       tdClass: 'gl-text-right',
     },
   ],
+  helpUrl: helpPagePath('/user/project/merge_requests/status_checks'),
   i18n,
 };
 </script>
 
 <template>
-  <div>
+  <gl-card
+    class="gl-new-card"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper gl-flex-direction-column">
+        <h5 class="gl-new-card-title">
+          {{ $options.i18n.title }}
+          <span class="gl-new-card-count">
+            <gl-icon name="check-circle" class="gl-mr-2" />
+            {{ statusChecks.length }}
+          </span>
+        </h5>
+        <p class="gl-new-card-description">
+          <gl-sprintf :message="$options.i18n.description">
+            <template #link>
+              <gl-link class="gl-font-sm" :href="$options.helpUrl" target="_blank">{{
+                __('Learn more')
+              }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </div>
+      <modal-create />
+    </template>
+
     <gl-table
       :items="statusChecks"
       :fields="$options.fields"
@@ -94,8 +132,7 @@ export default {
       </template>
     </gl-table>
 
-    <modal-create />
     <modal-delete ref="deleteModal" :status-check="statusCheckToDelete" />
     <modal-update ref="updateModal" :status-check="statusCheckToUpdate" />
-  </div>
+  </gl-card>
 </template>
diff --git a/ee/app/views/projects/_merge_request_status_checks_settings.html.haml b/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
index 08368731e262de47afddc84aeed01f0d7d36dfed..4a9915a99f04747982449f55d81e09d9cae37281 100644
--- a/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
+++ b/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
@@ -1,9 +1,3 @@
 .form-group
-  %b= s_('StatusCheck|Status checks')
-  %p.text-secondary
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/merge_requests/status_checks') }
-
-    = s_('StatusCheck|Check for a status response in merge requests. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-
   #js-status-checks-settings{ status_checks_app_data(@project) }
     = gl_loading_icon(size: 'md')
diff --git a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
index 5ee220a4bbc5857fae4a81b93c24c044d2961c81..59e8b706d73ba5352acc1dbb3eb208460464ee23 100644
--- a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
+++ b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
@@ -78,7 +78,7 @@
           expect(find('[data-testid="status-checks-table"]')).to have_content(rule.name)
 
           within('[data-testid="status-checks-table"]') do
-            click_button 'Remove...'
+            click_button 'Remove'
           end
 
           within('.modal-content') do
diff --git a/ee/spec/frontend/status_checks/components/actions_spec.js b/ee/spec/frontend/status_checks/components/actions_spec.js
index 4081f75e0ce096aebf72dc034a911d5fd7e0af46..9fe1c2dfe4d38a612fbcbcca311df890cf20604a 100644
--- a/ee/spec/frontend/status_checks/components/actions_spec.js
+++ b/ee/spec/frontend/status_checks/components/actions_spec.js
@@ -31,12 +31,12 @@ describe('Status checks actions', () => {
   const findRemoveBtn = () => wrapper.findByTestId('remove-btn');
 
   describe.each`
-    text           | button           | event
-    ${'Edit'}      | ${findEditBtn}   | ${'open-update-modal'}
-    ${'Remove...'} | ${findRemoveBtn} | ${'open-delete-modal'}
-  `('$text button', ({ text, button, event }) => {
-    it(`renders the button text as '${text}'`, () => {
-      expect(button().text()).toBe(text);
+    ariaLabel   | button           | event
+    ${'Edit'}   | ${findEditBtn}   | ${'open-update-modal'}
+    ${'Remove'} | ${findRemoveBtn} | ${'open-delete-modal'}
+  `('$text button', ({ ariaLabel, button, event }) => {
+    it(`renders the button with the aria-label '${ariaLabel}'`, () => {
+      expect(button().attributes('aria-label')).toBe(ariaLabel);
     });
 
     it(`sends the status check with the '${event}' event`, () => {
diff --git a/ee/spec/frontend/status_checks/components/status_checks_spec.js b/ee/spec/frontend/status_checks/components/status_checks_spec.js
index ef2c50f1fe9410fdb87328b33bad571f91495b88..bfb66699d0931d44c42c3eda62cd791a7d9d0a90 100644
--- a/ee/spec/frontend/status_checks/components/status_checks_spec.js
+++ b/ee/spec/frontend/status_checks/components/status_checks_spec.js
@@ -1,4 +1,4 @@
-import { GlTable } from '@gitlab/ui';
+import { GlCard, GlTable } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -56,13 +56,13 @@ describe('Status checks', () => {
     });
 
     it('creates the create modal', () => {
-      createWrapper(shallowMount);
+      createWrapper(shallowMount, { stubs: { GlCard } });
 
       expect(findCreateModal().exists()).toBe(true);
     });
 
     it('creates the update modal', () => {
-      createWrapper(shallowMount);
+      createWrapper(shallowMount, { stubs: { GlCard } });
 
       expect(findUpdateModal().exists()).toBe(true);
     });
@@ -79,7 +79,7 @@ describe('Status checks', () => {
       expect(findHeaders().at(0).text()).toBe(i18n.nameHeader);
       expect(findHeaders().at(1).text()).toBe(i18n.apiHeader);
       expect(findHeaders().at(2).text()).toBe(i18n.branchHeader);
-      expect(findHeaders().at(3).text()).toBe('');
+      expect(findHeaders().at(3).text()).toBe(i18n.actionsHeader);
     });
 
     describe.each(statusChecks)('status check %#', (statusCheck) => {
diff --git a/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb b/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
index 348ad9624951975fd6a487e59daa79bd84c5a1b5..826f5625ca74dc13b7902341eb4132e9a282c975 100644
--- a/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
+++ b/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
@@ -13,15 +13,6 @@
     render
   end
 
-  it 'renders the settings title' do
-    expect(rendered).to have_content 'Status checks'
-  end
-
-  it 'renders the settings description', :aggregate_failures do
-    expect(rendered).to have_content 'Check for a status response in merge requests. Learn more.'
-    expect(rendered).to have_link 'Learn more', href: '/help/user/project/merge_requests/status_checks'
-  end
-
   it 'renders the settings app element', :aggregate_failures do
     expect(rendered).to have_selector '#js-status-checks-settings'
     expect(rendered).to have_selector "[data-status-checks-path='status-checks/path']"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8a5a9b38db10bca6c5a82986bbc53d992a554944..c5fa5f11baa6591cb2f90a93914a75a6a77e25ed 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -39057,9 +39057,6 @@ msgstr ""
 msgid "Remove user from project"
 msgstr ""
 
-msgid "Remove..."
-msgstr ""
-
 msgid "Removed"
 msgstr ""
 
@@ -45104,7 +45101,7 @@ msgstr ""
 msgid "StatusCheck|Apply this status check to all branches or a specific protected branch."
 msgstr ""
 
-msgid "StatusCheck|Check for a status response in merge requests. %{link_start}Learn more%{link_end}."
+msgid "StatusCheck|Check for a status response in merge requests. %{linkStart}Learn more%{linkEnd}."
 msgstr ""
 
 msgid "StatusCheck|Examples: QA, Security."