diff --git a/app/assets/javascripts/admin/deploy_keys/components/table.vue b/app/assets/javascripts/admin/deploy_keys/components/table.vue
index 134498af3489f0a61d54e19970cb8109a75106dd..ac963a12afbd7ae0cec8268c1162569f2f45dbce 100644
--- a/app/assets/javascripts/admin/deploy_keys/components/table.vue
+++ b/app/assets/javascripts/admin/deploy_keys/components/table.vue
@@ -1,5 +1,14 @@
 <script>
-import { GlTable, GlButton, GlPagination, GlLoadingIcon, GlEmptyState, GlModal } from '@gitlab/ui';
+import {
+  GlCard,
+  GlTable,
+  GlButton,
+  GlPagination,
+  GlIcon,
+  GlLoadingIcon,
+  GlEmptyState,
+  GlModal,
+} from '@gitlab/ui';
 
 import { __ } from '~/locale';
 import Api, { DEFAULT_PER_PAGE } from '~/api';
@@ -15,7 +24,7 @@ export default {
     newDeployKeyButtonText: __('New deploy key'),
     emptyStateTitle: __('No public deploy keys'),
     emptyStateDescription: __(
-      'Deploy keys grant read/write access to all repositories in your instance',
+      'Deploy keys grant read/write access to all repositories in your instance, start by creating a new one above.',
     ),
     delete: __('Delete deploy key'),
     edit: __('Edit deploy key'),
@@ -37,10 +46,12 @@ export default {
     {
       key: 'fingerprint_sha256',
       label: __('Fingerprint (SHA256)'),
+      tdClass: 'gl-md-max-w-26',
     },
     {
       key: 'fingerprint',
       label: __('Fingerprint (MD5)'),
+      tdClass: 'gl-md-max-w-26',
     },
     {
       key: 'projects',
@@ -75,10 +86,12 @@ export default {
   csrf,
   DEFAULT_PER_PAGE,
   components: {
+    GlCard,
     GlTable,
     GlButton,
     GlPagination,
     TimeAgoTooltip,
+    GlIcon,
     GlLoadingIcon,
     GlEmptyState,
     GlModal,
@@ -177,85 +190,105 @@ export default {
 </script>
 
 <template>
-  <div>
-    <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-py-5">
-      <h4 class="gl-m-0">
-        {{ $options.i18n.pageTitle }}
-      </h4>
-      <gl-button variant="confirm" :href="createPath" data-testid="new-deploy-key-button">{{
-        $options.i18n.newDeployKeyButtonText
-      }}</gl-button>
-    </div>
-    <template v-if="shouldShowTable">
-      <gl-table
-        :busy="loading"
-        :items="items"
-        :fields="$options.fields"
-        stacked="lg"
-        data-testid="deploy-keys-list"
-      >
-        <template #table-busy>
-          <gl-loading-icon size="lg" class="gl-my-5" />
-        </template>
+  <gl-card
+    class="gl-new-card gl-overflow-hidden"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-overflow-hidden gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">{{ $options.i18n.pageTitle }}</h3>
+        <span class="gl-new-card-count">
+          <gl-icon name="key" class="gl-mr-2" />
+          {{ totalItems }}
+        </span>
+      </div>
+      <div class="gl-new-card-actions">
+        <gl-button size="small" :href="createPath" data-testid="new-deploy-key-button">{{
+          $options.i18n.newDeployKeyButtonText
+        }}</gl-button>
+      </div>
+    </template>
 
-        <template #cell(projects)="{ item: { projects } }">
-          <a
-            v-for="project in projects"
-            :key="project.id"
-            :href="projectHref(project)"
-            class="gl-display-block"
-            >{{ project.name_with_namespace }}</a
-          >
-        </template>
+    <gl-table
+      v-if="shouldShowTable"
+      :busy="loading"
+      :items="items"
+      :fields="$options.fields"
+      stacked="md"
+      data-testid="deploy-keys-list"
+      class="gl-mt-n1 gl-mb-n2"
+    >
+      <template #table-busy>
+        <gl-loading-icon size="sm" class="gl-my-5" />
+      </template>
 
-        <template #cell(fingerprint_sha256)="{ item: { fingerprint_sha256 } }">
-          <span v-if="fingerprint_sha256" class="monospace">{{ fingerprint_sha256 }}</span>
-        </template>
+      <template #cell(projects)="{ item: { projects } }">
+        <a
+          v-for="project in projects"
+          :key="project.id"
+          :href="projectHref(project)"
+          class="gl-display-block"
+          >{{ project.name_with_namespace }}</a
+        >
+      </template>
+      <template #cell(fingerprint_sha256)="{ item: { fingerprint_sha256 } }">
+        <div
+          v-if="fingerprint_sha256"
+          class="gl-font-monospace gl-text-truncate"
+          :title="fingerprint_sha256"
+        >
+          {{ fingerprint_sha256 }}
+        </div>
+      </template>
 
-        <template #cell(fingerprint)="{ item: { fingerprint } }">
-          <span v-if="fingerprint" class="monospace">{{ fingerprint }}</span>
-        </template>
+      <template #cell(fingerprint)="{ item: { fingerprint } }">
+        <div v-if="fingerprint" class="gl-font-monospace gl-text-truncate" :title="fingerprint">
+          {{ fingerprint }}
+        </div>
+      </template>
 
-        <template #cell(created)="{ item: { created } }">
-          <time-ago-tooltip :time="created" />
-        </template>
+      <template #cell(created)="{ item: { created } }">
+        <time-ago-tooltip :time="created" />
+      </template>
 
-        <template #head(actions)="{ label }">
-          <span class="gl-sr-only">{{ label }}</span>
-        </template>
+      <template #head(actions)="{ label }">
+        <span class="gl-sr-only">{{ label }}</span>
+      </template>
 
-        <template #cell(actions)="{ item: { id } }">
-          <gl-button
-            icon="pencil"
-            :aria-label="$options.i18n.edit"
-            :href="editHref(id)"
-            class="gl-mr-2"
-          />
-          <gl-button
-            variant="danger"
-            icon="remove"
-            :aria-label="$options.i18n.delete"
-            @click="handleDeleteClick(id)"
-          />
-        </template>
-      </gl-table>
-      <gl-pagination
-        v-if="!loading"
-        v-model="page"
-        :per-page="$options.DEFAULT_PER_PAGE"
-        :total-items="totalItems"
-        :next-text="$options.i18n.pagination.next"
-        :prev-text="$options.i18n.pagination.prev"
-        align="center"
-      />
-    </template>
+      <template #cell(actions)="{ item: { id } }">
+        <gl-button
+          icon="pencil"
+          size="small"
+          :aria-label="$options.i18n.edit"
+          :href="editHref(id)"
+          class="gl-mr-2"
+        />
+        <gl-button
+          variant="danger"
+          category="secondary"
+          icon="remove"
+          size="small"
+          :aria-label="$options.i18n.delete"
+          @click="handleDeleteClick(id)"
+        />
+      </template>
+    </gl-table>
     <gl-empty-state
       v-else
       :svg-path="emptyStateSvgPath"
       :title="$options.i18n.emptyStateTitle"
       :description="$options.i18n.emptyStateDescription"
-      :primary-button-text="$options.i18n.newDeployKeyButtonText"
-      :primary-button-link="createPath"
+    />
+    <gl-pagination
+      v-if="!loading"
+      v-model="page"
+      :per-page="$options.DEFAULT_PER_PAGE"
+      :total-items="totalItems"
+      :next-text="$options.i18n.pagination.next"
+      :prev-text="$options.i18n.pagination.prev"
+      align="center"
+      class="gl-mt-5"
     />
     <gl-modal
       :modal-id="$options.modal.id"
@@ -273,5 +306,5 @@ export default {
       </form>
       {{ $options.i18n.modal.body }}
     </gl-modal>
-  </div>
+  </gl-card>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ff6a572593190bda06b94becbc784a7fd66ac811..ac263f681ae9afa229c9d815abd093a5f5d0860c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15553,7 +15553,7 @@ msgstr ""
 msgid "Deploy keys"
 msgstr ""
 
-msgid "Deploy keys grant read/write access to all repositories in your instance"
+msgid "Deploy keys grant read/write access to all repositories in your instance, start by creating a new one above."
 msgstr ""
 
 msgid "Deploy progress not found. To see pods, ensure your environment matches %{linkStart}deploy board criteria%{linkEnd}."
diff --git a/spec/frontend/admin/deploy_keys/components/table_spec.js b/spec/frontend/admin/deploy_keys/components/table_spec.js
index a05654a1d256e96979a6705ab0c349620aadb13b..07d0f045509eefd942b1f0c608f9c9dab1d6c4ce 100644
--- a/spec/frontend/admin/deploy_keys/components/table_spec.js
+++ b/spec/frontend/admin/deploy_keys/components/table_spec.js
@@ -1,5 +1,5 @@
 import { merge } from 'lodash';
-import { GlLoadingIcon, GlEmptyState, GlPagination, GlModal } from '@gitlab/ui';
+import { GlCard, GlLoadingIcon, GlEmptyState, GlPagination, GlModal } from '@gitlab/ui';
 import { nextTick } from 'vue';
 
 import responseBody from 'test_fixtures/api/deploy_keys/index.json';
@@ -45,6 +45,8 @@ describe('DeployKeysTable', () => {
     });
   };
 
+  const findCard = () => wrapper.findComponent(GlCard);
+  const findCardTitle = () => findCard().find('.gl-new-card-title-wrapper');
   const findEditButton = (index) =>
     wrapper.findAllByLabelText(DeployKeysTable.i18n.edit, { selector: 'a' }).at(index);
   const findRemoveButton = (index) =>
@@ -60,7 +62,7 @@ describe('DeployKeysTable', () => {
     expect(wrapper.findByText(expectedDeployKey.title).exists()).toBe(true);
 
     expect(
-      wrapper.findByText(expectedDeployKey.fingerprint_sha256, { selector: 'span' }).exists(),
+      wrapper.findByText(expectedDeployKey.fingerprint_sha256, { selector: 'div' }).exists(),
     ).toBe(true);
     expect(timeAgoTooltip.exists()).toBe(true);
     expect(timeAgoTooltip.props('time')).toBe(expectedDeployKey.created_at);
@@ -70,7 +72,7 @@ describe('DeployKeysTable', () => {
   };
 
   const expectDeployKeyWithFingerprintIsRendered = (expectedDeployKey, expectedRowIndex) => {
-    expect(wrapper.findByText(expectedDeployKey.fingerprint, { selector: 'span' }).exists()).toBe(
+    expect(wrapper.findByText(expectedDeployKey.fingerprint, { selector: 'div' }).exists()).toBe(
       true,
     );
     expectDeployKeyIsRendered(expectedDeployKey, expectedRowIndex);
@@ -85,8 +87,6 @@ describe('DeployKeysTable', () => {
         svgPath: defaultProvide.emptyStateSvgPath,
         title: DeployKeysTable.i18n.emptyStateTitle,
         description: DeployKeysTable.i18n.emptyStateDescription,
-        primaryButtonText: DeployKeysTable.i18n.newDeployKeyButtonText,
-        primaryButtonLink: defaultProvide.createPath,
       });
     });
   };
@@ -131,6 +131,16 @@ describe('DeployKeysTable', () => {
         createComponent();
       });
 
+      it('renders card with the deploy keys', () => {
+        expect(findCard().exists()).toBe(true);
+      });
+
+      it('shows the correct number of deploy keys', () => {
+        expect(findCardTitle().text()).toMatchInterpolatedText(
+          `Public deploy keys ${responseBody.length}`,
+        );
+      });
+
       it('renders deploy keys in table', () => {
         expectDeployKeyWithFingerprintIsRendered(deployKey, 0);
         expectDeployKeyWithFingerprintIsRendered(deployKey2, 1);