diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 4860215d8f2def2861bcb45205b108b5b1142a71..ec17bbea48f28d9e00ad4afafd8083ba30a183dd 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -14,8 +14,9 @@ export default {
     ConfirmModal,
     KeysPanel,
     NavigationTabs,
-    GlLoadingIcon,
+    GlButton,
     GlIcon,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {
@@ -42,6 +43,10 @@ export default {
     available_project_keys: s__('DeployKeys|Privately accessible deploy keys'),
     public_keys: s__('DeployKeys|Publicly accessible deploy keys'),
   },
+  i18n: {
+    loading: s__('DeployKeys|Loading deploy keys'),
+    addButton: s__('DeployKeys|Add new key'),
+  },
   computed: {
     tabs() {
       return Object.keys(this.$options.scopes).map((scope) => {
@@ -132,23 +137,41 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-3 deploy-keys">
+  <div class="deploy-keys">
     <confirm-modal :visible="confirmModalVisible" @remove="removeKey" @cancel="cancel" />
     <gl-loading-icon
       v-if="isLoading && !hasKeys"
-      :label="s__('DeployKeys|Loading deploy keys')"
-      size="lg"
+      :label="$options.i18n.loading"
+      size="sm"
+      class="gl-m-5"
     />
     <template v-else-if="hasKeys">
-      <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left">
-          <gl-icon name="chevron-lg-left" :size="12" />
-        </div>
-        <div class="fade-right">
-          <gl-icon name="chevron-lg-right" :size="12" />
+      <div class="gl-new-card-header gl-align-items-center gl-pt-0 gl-pb-0 gl-pl-0">
+        <div class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-b-0">
+          <div class="fade-left">
+            <gl-icon name="chevron-lg-left" :size="12" />
+          </div>
+          <div class="fade-right">
+            <gl-icon name="chevron-lg-right" :size="12" />
+          </div>
+
+          <navigation-tabs
+            :tabs="tabs"
+            scope="deployKeys"
+            class="gl-rounded-lg"
+            @onChangeTab="onChangeTab"
+          />
         </div>
 
-        <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
+        <div class="gl-new-card-actions">
+          <gl-button
+            size="small"
+            class="js-toggle-button js-toggle-content"
+            data-testid="add-new-deploy-key-button"
+          >
+            {{ $options.i18n.addButton }}
+          </gl-button>
+        </div>
       </div>
       <keys-panel
         :project-id="projectId"
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 79c455536594155244b9e0393e503ba9a63b95e9..16c745d8cffc1f67563ffbc4cd44687f4dea39a4 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlIcon, GlLink, GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlBadge, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { head, tail } from 'lodash';
 import { s__, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -10,9 +10,9 @@ import ActionBtn from './action_btn.vue';
 export default {
   components: {
     ActionBtn,
+    GlBadge,
     GlButton,
     GlIcon,
-    GlLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -111,12 +111,21 @@ export default {
 </script>
 
 <template>
-  <div class="gl-responsive-table-row deploy-key">
+  <div
+    class="gl-responsive-table-row gl-align-items-flex-start deploy-key gl-bg-gray-10 gl-md-pl-5 gl-md-pr-5 gl-border-gray-100!"
+  >
     <div class="table-section section-40">
-      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
+      <div
+        role="rowheader"
+        class="table-mobile-header gl-align-self-start gl-font-weight-bold gl-text-gray-700"
+      >
+        {{ s__('DeployKeys|Deploy key') }}
+      </div>
       <div class="table-mobile-content" data-testid="key-container">
-        <strong class="title" data-testid="key-title-content"> {{ deployKey.title }} </strong>
-        <dl>
+        <p class="title gl-font-weight-semibold gl-text-gray-700" data-testid="key-title-content">
+          {{ deployKey.title }}
+        </p>
+        <dl class="gl-font-sm gl-mb-0">
           <dt>{{ __('SHA256') }}</dt>
           <dd class="fingerprint" data-testid="key-sha256-fingerprint-content">
             {{ deployKey.fingerprint_sha256 }}
@@ -133,53 +142,62 @@ export default {
       </div>
     </div>
     <div class="table-section section-20 section-wrap">
-      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
-      <div class="table-mobile-content deploy-project-list">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ s__('DeployKeys|Project usage') }}
+      </div>
+      <div class="table-mobile-content deploy-project-list gl-display-flex gl-flex-wrap">
         <template v-if="projects.length > 0">
-          <gl-link
+          <gl-badge
             v-gl-tooltip
             :title="projectTooltipTitle(firstProject)"
-            class="label deploy-project-label"
+            :icon="firstProject.can_push ? 'lock-open' : 'lock'"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
           >
-            <span> {{ firstProject.project.full_name }} </span>
-            <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
-          </gl-link>
-          <gl-link
+            <span class="gl-text-truncate">{{ firstProject.project.full_name }}</span>
+          </gl-badge>
+
+          <gl-badge
             v-if="isExpandable"
             v-gl-tooltip
             :title="restProjectsTooltip"
-            class="label deploy-project-label"
-            @click="toggleExpanded"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
+            href="#"
+            @click.native="toggleExpanded"
           >
-            <span>{{ restProjectsLabel }}</span>
-          </gl-link>
-          <gl-link
+            <span class="gl-text-truncate">{{ restProjectsLabel }}</span>
+          </gl-badge>
+
+          <gl-badge
             v-for="deployKeysProject in restProjects"
             v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
             v-gl-tooltip
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
-            class="label deploy-project-label"
+            :icon="deployKeysProject.can_push ? 'lock-open' : 'lock'"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
           >
-            <span> {{ deployKeysProject.project.full_name }} </span>
-            <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
-          </gl-link>
+            <span class="gl-text-truncate">{{ deployKeysProject.project.full_name }}</span>
+          </gl-badge>
         </template>
-        <span v-else class="text-secondary">{{ __('None') }}</span>
+        <span v-else class="gl-text-secondary">{{ __('None') }}</span>
       </div>
     </div>
     <div class="table-section section-15">
-      <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
-      <div class="table-mobile-content text-secondary key-created-at">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ __('Created') }}
+      </div>
+      <div class="table-mobile-content gl-text-gray-700 key-created-at">
         <span v-gl-tooltip :title="tooltipTitle(deployKey.created_at)">
           <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>
     <div class="table-section section-15">
-      <div role="rowheader" class="table-mobile-header">{{ __('Expires') }}</div>
-      <div class="table-mobile-content text-secondary key-expires-at">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ __('Expires') }}
+      </div>
+      <div class="table-mobile-content gl-text-gray-700 key-expires-at">
         <span
           v-if="deployKey.expires_at"
           v-gl-tooltip
@@ -214,7 +232,7 @@ export default {
           :deploy-key="deployKey"
           :title="__('Remove')"
           :aria-label="__('Remove')"
-          category="primary"
+          category="secondary"
           variant="danger"
           icon="remove"
           type="remove"
@@ -229,7 +247,7 @@ export default {
           type="disable"
           data-container="body"
           icon="cancel"
-          category="primary"
+          category="secondary"
           variant="danger"
         />
       </div>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index e04cbbe72b9af98ab209e5ebbd81101d5ec8ce92..dac63188aa5647381004e603108d4ffa1d5df78b 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -28,9 +28,12 @@ export default {
 </script>
 
 <template>
-  <div class="deploy-keys-panel table-holder">
+  <div class="deploy-keys-panel table-holder gl-bg-white gl-rounded-lg">
     <template v-if="keys.length > 0">
-      <div role="row" class="gl-responsive-table-row table-row-header">
+      <div
+        role="row"
+        class="gl-responsive-table-row table-row-header gl-font-base gl-font-weight-bold gl-text-gray-900 gl-md-pl-5 gl-md-pr-5 gl-bg-gray-10 gl-border-gray-100!"
+      >
         <div role="rowheader" class="table-section section-40">
           {{ s__('DeployKeys|Deploy key') }}
         </div>
@@ -50,8 +53,8 @@ export default {
         :project-id="projectId"
       />
     </template>
-    <div v-else class="settings-message text-center gl-mt-5">
-      {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
+    <div v-else class="gl-new-card-empty gl-bg-gray-10 gl-text-center gl-p-5">
+      {{ s__('DeployKeys|No deploy keys found, start by adding a new one above.') }}
     </div>
   </div>
 </template>
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 71936f3733326b2c06acf4128641bf34fca2298f..b9cae28537d524808eb8c2d2d5669de7fe326719 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -65,7 +65,6 @@
     white-space: normal;
   }
 
-  .deploy-project-label,
   .key-created-at {
     svg {
       vertical-align: text-top;
@@ -83,18 +82,6 @@
 
 .deploy-project-list {
   margin-bottom: -$gl-padding-4;
-
-  a.deploy-project-label {
-    margin-right: $gl-padding-4;
-    margin-bottom: $gl-padding-4;
-    color: $gl-text-color-secondary;
-    background-color: $gray-50;
-    line-height: $gl-btn-line-height;
-
-    &:hover {
-      color: $blue-600;
-    }
-  }
 }
 
 .vs-public {
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index a03d6cb5a9420b3743af6fcd0bd25637015cc3b0..3d73b255a5ed23372f4b7f90e0628e888821f4de 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -1,11 +1,9 @@
 - page_title _('New Deploy Key')
 %h1.page-title.gl-font-size-h-display= _('New public deploy key')
-%hr
 
-%div
-  = gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
-    = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
-    .form-actions
-      = f.submit 'Create', data: { qa_selector: "add_deploy_key_button" }, pajamas_button: true
-      = render Pajamas::ButtonComponent.new(href: admin_deploy_keys_path) do
-        = _('Cancel')
+= gitlab_ui_form_for [:admin, @deploy_key], html: { class: 'deploy-key-form' } do |f|
+  = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
+  .gl-display-flex.gl-mt-6.gl-gap-3
+    = f.submit 'Create', data: { qa_selector: "add_deploy_key_button" }, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(href: admin_deploy_keys_path) do
+      = _('Cancel')
diff --git a/app/views/projects/deploy_keys/edit.html.haml b/app/views/projects/deploy_keys/edit.html.haml
index 997443d5fa96a16a8199e3d6686e6f364344cc2f..0044ff4dc24f0d742df868c27c6af38d98e3402a 100644
--- a/app/views/projects/deploy_keys/edit.html.haml
+++ b/app/views/projects/deploy_keys/edit.html.haml
@@ -1,10 +1,8 @@
 - page_title _('Edit Deploy Key')
 %h1.page-title.gl-font-size-h-display= _('Edit Deploy Key')
-%hr
 
-%div
-  = gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
-    = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
-    .form-actions
-      = f.submit _('Save changes'), pajamas_button: true
-      = link_button_to _('Cancel'), project_settings_repository_path(@project)
+= gitlab_ui_form_for [@project, @deploy_key], include_id: false, html: { class: 'js-requires-input' } do |f|
+  = render partial: 'shared/deploy_keys/form', locals: { form: f, deploy_key: @deploy_key }
+  .gl-display-flex.gl-mt-6.gl-gap-3
+    = f.submit _('Save changes'), pajamas_button: true
+    = link_button_to _('Cancel'), project_settings_repository_path(@project, anchor: 'js-deploy-keys-settings')
diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml
index 280362a12a92122bafebafc240a47e810cd6efd5..bbaf5bf9627da39cd1449ea7f12c13f76aca8a12 100644
--- a/app/views/shared/deploy_keys/_form.html.haml
+++ b/app/views/shared/deploy_keys/_form.html.haml
@@ -5,37 +5,34 @@
 = form_errors(deploy_key)
 
 .form-group
-  = form.label :title, class: 'col-form-label col-sm-2'
-  .col-sm-10= form.text_field :title, class: 'form-control gl-form-input', data: { testid: 'deploy-key-title-field' }, readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
+  = form.label :title
+  = form.text_field :title, class: 'form-control gl-form-input', data: { testid: 'deploy-key-title-field' }, readonly: ('readonly' unless can?(current_user, :update_deploy_key, deploy_key))
 
-.form-group
-  - if deploy_key.new_record?
-    = form.label :key, class: 'col-form-label col-sm-2'
-    .col-sm-10
-      %p.light
-        - link_start = "<a href='#{help_page_path('user/ssh')}' target='_blank' rel='noreferrer noopener'>".html_safe
-        - link_end = '</a>'
-        = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
-      = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5, data: { testid: 'deploy-key-field' }
-  - else
-    - if deploy_key.fingerprint_sha256.present?
-      = form.label :fingerprint, _('Fingerprint (SHA256)'), class: 'col-form-label col-sm-2'
-      .col-sm-10
-        = form.text_field :fingerprint_sha256, class: 'form-control gl-form-input', readonly: 'readonly'
-    - if deploy_key.fingerprint.present?
-      = form.label :fingerprint, _('Fingerprint (MD5)'), class: 'col-form-label col-sm-2'
-      .col-sm-10
-        = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
+- if deploy_key.new_record?
+  .form-group
+    = form.label :key
+
+    %p.gl-text-secondary
+      - link_start = "<a href='#{help_page_path('user/ssh')}' target='_blank' rel='noreferrer noopener'>".html_safe
+      - link_end = '</a>'
+      = _('Paste a public key here. %{link_start}How do I generate it?%{link_end}').html_safe % { link_start: link_start, link_end: link_end.html_safe }
+    = form.text_area :key, class: 'form-control gl-form-input thin_area', rows: 5, data: { testid: 'deploy-key-field' }
+- else
+  - if deploy_key.fingerprint_sha256.present?
+    .form-group
+      = form.label :fingerprint, _('Fingerprint (SHA256)')
+      = form.text_field :fingerprint_sha256, class: 'form-control gl-form-input', readonly: 'readonly'
+  - if deploy_key.fingerprint.present?
+    .form-group
+      = form.label :fingerprint, _('Fingerprint (MD5)')
+      = form.text_field :fingerprint, class: 'form-control gl-form-input', readonly: 'readonly'
 
 .form-group
-  .col-sm-10
-    = form.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
-    = form.text_field :expires_at, class: 'form-control gl-form-input', readonly: 'readonly'
+  = form.label :expires_at, _('Expiration date (optional)'), class: 'label-bold'
+  = form.text_field :expires_at, class: 'form-control gl-form-input', readonly: 'readonly'
 
 - if deploy_keys_project.present?
   = form.fields_for :deploy_keys_projects, deploy_keys_project do |deploy_keys_project_form|
     .form-group
-      .col-form-label.col-sm-2
-      .col-sm-10
-        = deploy_keys_project_form.gitlab_ui_checkbox_component :can_push, _('Grant write permissions to this key'),
-        help_text: _('Allow this key to push to this repository')
+      = deploy_keys_project_form.gitlab_ui_checkbox_component :can_push, _('Grant write permissions to this key'),
+      help_text: _('Allow this key to push to this repository')
diff --git a/app/views/shared/deploy_keys/_index.html.haml b/app/views/shared/deploy_keys/_index.html.haml
index 32720d0353b0e88998647bd6cdf87ac321f73b4b..3f81cbbb9b13418c0cb448a1bce0a6b2f73c8322 100644
--- a/app/views/shared/deploy_keys/_index.html.haml
+++ b/app/views/shared/deploy_keys/_index.html.haml
@@ -4,11 +4,13 @@
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only= _('Deploy keys')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = expanded ? _('Collapse') : _('Expand')
-    %p
+    %p.gl-text-secondary.gl-mb-0
       - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/deploy_keys/index') }
       = _("Add deploy keys to grant read/write access to this repository. %{link_start}What are deploy keys?%{link_end}").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
   .settings-content
-    %h5.gl-mt-0
-    = render @deploy_keys.form_partial_path
-    %hr
-    #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
+      - c.with_body do
+        .gl-new-card-add-form.gl-m-3.gl-display-none.js-toggle-content
+          = render @deploy_keys.form_partial_path
+
+        #js-deploy-keys{ data: { endpoint: project_deploy_keys_path(@project), project_id: @project.id } }
diff --git a/app/views/shared/deploy_keys/_project_group_form.html.haml b/app/views/shared/deploy_keys/_project_group_form.html.haml
index 2f90345ed125cc64405a894e78cea03aba280c4e..c633088b26abab7e098be944bcd50c6d925ad97c 100644
--- a/app/views/shared/deploy_keys/_project_group_form.html.haml
+++ b/app/views/shared/deploy_keys/_project_group_form.html.haml
@@ -1,5 +1,9 @@
 = gitlab_ui_form_for [@project.namespace, @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input container" } do |f|
   = form_errors(@deploy_keys.new_key)
+
+  .form-group.row
+    %h4.gl-my-0= s_('DeployKeys|Add new deploy key')
+
   .form-group.row
     = f.label :title, class: "label-bold"
     = f.text_field :title, class: 'form-control gl-form-input', required: true, data: { testid: 'deploy-key-title-field' }
@@ -20,5 +24,7 @@
     = f.gitlab_ui_datepicker :expires_at, data: { testid: 'deploy-key-expires-at-field' }, value: f.object.expires_at
     %p.form-text.text-muted= ssh_key_expires_field_description
 
-  .form-group.row
+  .form-group.row.gl-mb-0
     = f.submit _("Add key"), data: { testid: "add-deploy-key-button"}, pajamas_button: true
+    = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'gl-ml-3 js-toggle-button' }) do
+      = _('Cancel')
diff --git a/ee/spec/features/projects/audit_events_spec.rb b/ee/spec/features/projects/audit_events_spec.rb
index a9655820236098d5f60c3188a35b653161bffe48..4099fc1e6b210e08bb6b9e7104e82214810886db 100644
--- a/ee/spec/features/projects/audit_events_spec.rb
+++ b/ee/spec/features/projects/audit_events_spec.rb
@@ -87,6 +87,8 @@
       stub_licensed_features(audit_events: true)
 
       visit new_project_deploy_key_path(project)
+      click_button 'Add new key'
+      wait_for_all_requests
 
       fill_in 'deploy_key_title', with: 'laptop'
       fill_in 'deploy_key_key', with: "#{ssh_key} user@laptop"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 42a0a1e45972f23b9e67d529d989a843afd37686..7459ed4bd637195069830c3e7211a9baa4f7fc93 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -15982,6 +15982,12 @@ msgstr ""
 msgid "DeployKeys|+%{count} others"
 msgstr ""
 
+msgid "DeployKeys|Add new deploy key"
+msgstr ""
+
+msgid "DeployKeys|Add new key"
+msgstr ""
+
 msgid "DeployKeys|Current project"
 msgstr ""
 
@@ -16009,7 +16015,7 @@ msgstr ""
 msgid "DeployKeys|Loading deploy keys"
 msgstr ""
 
-msgid "DeployKeys|No deploy keys found. Create one with the form above."
+msgid "DeployKeys|No deploy keys found, start by adding a new one above."
 msgstr ""
 
 msgid "DeployKeys|Privately accessible deploy keys"
diff --git a/qa/qa/page/project/settings/deploy_keys.rb b/qa/qa/page/project/settings/deploy_keys.rb
index 79ae584ca130e704aae89c41f967df9fe3e02456..d8369c1226838455d5917adbd43d7cfae9c9f801 100644
--- a/qa/qa/page/project/settings/deploy_keys.rb
+++ b/qa/qa/page/project/settings/deploy_keys.rb
@@ -19,6 +19,7 @@ class DeployKeys < Page::Base
 
           view 'app/assets/javascripts/deploy_keys/components/app.vue' do
             element 'project-deploy-keys-container'
+            element 'add-new-deploy-key-button'
           end
 
           view 'app/assets/javascripts/deploy_keys/components/key.vue' do
@@ -27,6 +28,10 @@ class DeployKeys < Page::Base
             element 'key-sha256-fingerprint-content'
           end
 
+          def add_new_key
+            click_element('add-new-deploy-key-button')
+          end
+
           def add_key
             click_element('add-deploy-key-button')
           end
diff --git a/qa/qa/resource/deploy_key.rb b/qa/qa/resource/deploy_key.rb
index b194f97ef1b1dbc17019bebadec5d80fb217980b..36d1221dfda1b429720eaa64c5bac95a2e916ee1 100644
--- a/qa/qa/resource/deploy_key.rb
+++ b/qa/qa/resource/deploy_key.rb
@@ -29,6 +29,7 @@ def fabricate!
 
         Page::Project::Settings::Repository.perform do |setting|
           setting.expand_deploy_keys do |page|
+            page.add_new_key
             page.fill_key_title(title)
             page.fill_key_value(key)
 
diff --git a/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb b/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
index 0006762a97161f92125dc9c0ee726daa6ce7ceb5..4e8f42ae792d895fec0d030634b26a8fc9cbf12b 100644
--- a/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
+++ b/spec/features/projects/settings/user_interacts_with_deploy_keys_spec.rb
@@ -91,6 +91,7 @@
       deploy_key_title = attributes_for(:key)[:title]
       deploy_key_body  = attributes_for(:key)[:key]
 
+      click_button("Add new key")
       fill_in("deploy_key_title", with: deploy_key_title)
       fill_in("deploy_key_key",   with: deploy_key_body)
 
@@ -102,6 +103,16 @@
         expect(page).to have_content(deploy_key_title)
       end
     end
+
+    it "click on cancel hides the form" do
+      click_button("Add new key")
+
+      expect(page).to have_css('.gl-new-card-add-form')
+
+      click_button("Cancel")
+
+      expect(page).not_to have_css('.gl-new-card-add-form')
+    end
   end
 
   context "attaching existing keys" do
diff --git a/spec/frontend/deploy_keys/components/keys_panel_spec.js b/spec/frontend/deploy_keys/components/keys_panel_spec.js
index e0f86aadad428e1109e54953cea7c49ca33fe0ac..e63b269fe23990f649fe05102338f43998733772 100644
--- a/spec/frontend/deploy_keys/components/keys_panel_spec.js
+++ b/spec/frontend/deploy_keys/components/keys_panel_spec.js
@@ -41,10 +41,10 @@ describe('Deploy keys panel', () => {
   it('renders help box if keys are empty', () => {
     mountComponent({ keys: [] });
 
-    expect(wrapper.find('.settings-message').exists()).toBe(true);
+    expect(wrapper.find('.gl-new-card-empty').exists()).toBe(true);
 
-    expect(wrapper.find('.settings-message').text().trim()).toBe(
-      'No deploy keys found. Create one with the form above.',
+    expect(wrapper.find('.gl-new-card-empty').text().trim()).toBe(
+      'No deploy keys found, start by adding a new one above.',
     );
   });