diff --git a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
index 7ec3ec3f84d8c45f34e8c14ce3dfff69691c6733..a56fce98f854d091a3b78d20048837dbdb5c3ee7 100644
--- a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
+++ b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
@@ -8,7 +8,9 @@ import {
   GlFormInputGroup,
   GlSprintf,
   GlLink,
+  GlAlert,
 } from '@gitlab/ui';
+import { MountingPortal } from 'portal-vue';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -26,6 +28,8 @@ export default {
     ClipboardButton,
     GlSprintf,
     GlLink,
+    GlAlert,
+    MountingPortal,
   },
 
   props: {
@@ -170,12 +174,17 @@ export default {
 </script>
 <template>
   <div>
-    <div v-if="newTokenDetails" class="created-deploy-token-container info-well">
-      <div class="well-segment">
-        <h5>{{ $options.translations.newTokenMessage }}</h5>
+    <mounting-portal append mount-to="#new-deploy-token-alert">
+      <gl-alert
+        v-if="newTokenDetails"
+        variant="success"
+        class="gl-mb-4"
+        @dismiss="newTokenDetails = null"
+      >
+        <h5 class="gl-mt-0!">{{ $options.translations.newTokenMessage }}</h5>
         <gl-form-group>
           <template #description>
-            <div class="deploy-token-help-block gl-mt-2 text-success">
+            <div class="deploy-token-help-block gl-mt-2">
               <gl-sprintf
                 :message="$options.translations.newTokenUsernameDescription"
                 :placeholders="placeholders.link"
@@ -200,9 +209,9 @@ export default {
             </template>
           </gl-form-input-group>
         </gl-form-group>
-        <gl-form-group>
+        <gl-form-group class="gl-mb-0">
           <template #description>
-            <div class="deploy-token-help-block gl-mt-2 text-danger">
+            <div class="deploy-token-help-block gl-mt-2">
               <gl-sprintf
                 :message="$options.translations.newTokenDescription"
                 :placeholders="placeholders.i"
@@ -222,9 +231,9 @@ export default {
             </template>
           </gl-form-input-group>
         </gl-form-group>
-      </div>
-    </div>
-    <h5>{{ $options.translations.addTokenHeader }}</h5>
+      </gl-alert>
+    </mounting-portal>
+    <h4 class="gl-mt-0">{{ $options.translations.addTokenHeader }}</h4>
     <p>
       <gl-sprintf
         :message="$options.translations.addTokenDescription"
@@ -296,6 +305,9 @@ export default {
       <gl-button variant="confirm" @click="createDeployToken">
         {{ $options.translations.addTokenButton }}
       </gl-button>
+      <gl-button class="gl-ml-3 js-toggle-button">
+        {{ $options.translations.cancelTokenCreation }}
+      </gl-button>
     </div>
     <gl-datepicker v-model="expiresAt" target="#deploy_token_expires_at" container="body" />
   </div>
diff --git a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
index 7879357a0420c1fca2b6918be26067311ea45ead..52d94e65e7203a49e0251adfbbd8d45563a27fa3 100644
--- a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
+++ b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
@@ -35,9 +35,9 @@ export default {
   <div>
     <gl-button
       v-gl-modal="modalId"
-      category="primary"
+      category="secondary"
       variant="danger"
-      class="gl-float-right"
+      size="small"
       data-testid="revoke-button"
       >{{ s__('DeployTokens|Revoke') }}</gl-button
     >
diff --git a/app/assets/javascripts/deploy_tokens/deploy_token_translations.js b/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
index 410864a83a27044b4ca108d8686501f6439249be..0d3f92b2347b5767b882e34c480467c456ef0ae3 100644
--- a/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
+++ b/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
@@ -2,6 +2,7 @@ import { s__ } from '~/locale';
 
 const translations = {
   addTokenButton: s__('DeployTokens|Create deploy token'),
+  cancelTokenCreation: s__('DeployTokens|Cancel'),
   addTokenExpiryLabel: s__('DeployTokens|Expiration date (optional)'),
   addTokenExpiryDescription: s__(
     'DeployTokens|Enter an expiration date for your token. Defaults to never expire.',
@@ -23,7 +24,7 @@ const translations = {
   newTokenDescription: s__(
     'DeployTokens|Use this token as a password. Save it. This password can %{i_start}not%{i_end} be recovered.',
   ),
-  newTokenMessage: s__('DeployTokens|Your New Deploy Token'),
+  newTokenMessage: s__('DeployTokens|Your new deploy token'),
   newTokenUsernameCopy: s__('DeployTokens|Copy username'),
   newTokenUsernameDescription: s__(
     'DeployTokens|This username supports access. %{link_start}What kind of access?%{link_end}',
diff --git a/app/views/shared/deploy_tokens/_index.html.haml b/app/views/shared/deploy_tokens/_index.html.haml
index e5f1fd991250fd0531edf6460965691ed31b12b2..382fa650e4cf54866fa66e8920999ade0f9304b2 100644
--- a/app/views/shared/deploy_tokens/_index.html.haml
+++ b/app/views/shared/deploy_tokens/_index.html.haml
@@ -8,13 +8,5 @@
     %p
       = description
   .settings-content
-    #js-new-deploy-token{ data: {
-        container_registry_enabled: container_registry_enabled?(group_or_project),
-        packages_registry_enabled: packages_registry_enabled?(group_or_project),
-        create_new_token_path: create_deploy_token_path(group_or_project),
-        token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
-        deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
-      }
-    }
-    %hr
+    #new-deploy-token-alert
     = render 'shared/deploy_tokens/table', group_or_project: group_or_project, active_tokens: @deploy_tokens
diff --git a/app/views/shared/deploy_tokens/_table.html.haml b/app/views/shared/deploy_tokens/_table.html.haml
index 3827ecf73a47a79123ad54b433c184482a19accf..3b351387d4104c539492758ac25240bc713bc8c5 100644
--- a/app/views/shared/deploy_tokens/_table.html.haml
+++ b/app/views/shared/deploy_tokens/_table.html.haml
@@ -1,32 +1,54 @@
-%h5= s_("DeployTokens|Active Deploy Tokens (%{active_tokens})") % { active_tokens: active_tokens.length }
-
-- if active_tokens.present?
-  .table-responsive.deploy-tokens
-    %table.table
-      %thead
-        %tr
-          %th= s_('DeployTokens|Name')
-          %th= s_('DeployTokens|Username')
-          %th= s_('DeployTokens|Created')
-          %th= s_('DeployTokens|Expires')
-          %th= s_('DeployTokens|Scopes')
-          %th
-      %tbody
-        - active_tokens.each do |token|
+= 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
+      %h5.gl-new-card-title
+        = s_("DeployTokens|Active deploy tokens")
+      .gl-new-card-count
+        = sprite_icon('token', css_class: 'gl-mr-2')
+        = active_tokens.length
+    .gl-new-card-actions
+      = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: "js-toggle-button js-toggle-content" }) do
+        = _('Add token')
+  - c.with_body do
+    .gl-new-card-add-form.gl-m-3.gl-mb-4.gl-display-none.js-toggle-content
+      #js-new-deploy-token{ data: {
+          container_registry_enabled: container_registry_enabled?(group_or_project),
+          packages_registry_enabled: packages_registry_enabled?(group_or_project),
+          create_new_token_path: create_deploy_token_path(group_or_project),
+          token_type: group_or_project.is_a?(Group) ? 'group' : 'project',
+          deploy_tokens_help_url: help_page_path('user/project/deploy_tokens/index.md')
+        }
+      }
+    - if active_tokens.present?
+      %table.table.b-table.gl-table.b-table-stacked-md
+        %thead
           %tr
-            %td= token.name
-            %td= token.username
-            %td= token.created_at.to_date.to_fs(:medium)
-            %td
-              - if token.expires?
-                %span{ class: ('text-warning' if token.expires_soon?) }
-                  = time_ago_with_tooltip(token.expires_at)
-              - else
-                %span.token-never-expires-label= _('Never')
-            %td= token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
-            %td
-              .js-deploy-token-revoke-button{ data: deploy_token_revoke_button_data(token: token, group_or_project: group_or_project) }
+            %th= s_('DeployTokens|Name')
+            %th= s_('DeployTokens|Username')
+            %th= s_('DeployTokens|Created')
+            %th= s_('DeployTokens|Expires')
+            %th= s_('DeployTokens|Scopes')
+            %th
+        %tbody
+          - active_tokens.each do |token|
+            %tr
+              %td{ data: { label: _('Name') }, class: 'gl-vertical-align-middle!' }
+                = token.name
+              %td{ data: { label: _('Username') }, class: 'gl-vertical-align-middle!' }
+                = token.username
+              %td{ data: { label: _('Created') }, class: 'gl-vertical-align-middle!' }
+                = token.created_at.to_date.to_fs(:medium)
+              %td{ data: { label: _('Expires') }, class: 'gl-vertical-align-middle!' }
+                - if token.expires?
+                  %span{ class: ('text-warning' if token.expires_soon?) }
+                    = time_ago_with_tooltip(token.expires_at)
+                - else
+                  %span.token-never-expires-label= _('Never')
+              %td{ data: { label: _('Scopes') }, class: 'gl-vertical-align-middle!' }
+                = token.scopes.present? ? token.scopes.join(', ') : _('no scopes selected')
+              %td{ data: { label: _('Actions') }, class: 'gl-vertical-align-middle!' }
+                .js-deploy-token-revoke-button{ data: deploy_token_revoke_button_data(token: token, group_or_project: group_or_project) }
 
-- else
-  .settings-message.text-center
-    = s_('DeployTokens|This %{entity_type} has no active Deploy Tokens.') % { entity_type: group_or_project.class.name.downcase }
+    - else
+      .gl-new-card-empty.gl-px-5.gl-py-4
+        = s_('DeployTokens|This %{entity_type} has no active deploy tokens.') % { entity_type: group_or_project.class.name.downcase }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f6606bcd427ddaf91ddf72546dc3d3e3484397ad..400e98b8b686454cc4dd3806019c379b1d832686 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2983,6 +2983,9 @@ msgstr ""
 msgid "Add to tree"
 msgstr ""
 
+msgid "Add token"
+msgstr ""
+
 msgid "Add topics to projects to help users find them."
 msgstr ""
 
@@ -15984,7 +15987,7 @@ msgstr ""
 msgid "DeployKeys|Read access only"
 msgstr ""
 
-msgid "DeployTokens|Active Deploy Tokens (%{active_tokens})"
+msgid "DeployTokens|Active deploy tokens"
 msgstr ""
 
 msgid "DeployTokens|Allows read and write access to registry images."
@@ -16008,6 +16011,9 @@ msgstr ""
 msgid "DeployTokens|Allows write access to registry images."
 msgstr ""
 
+msgid "DeployTokens|Cancel"
+msgstr ""
+
 msgid "DeployTokens|Copy deploy token"
 msgstr ""
 
@@ -16068,7 +16074,7 @@ msgstr ""
 msgid "DeployTokens|Scopes (select at least one)"
 msgstr ""
 
-msgid "DeployTokens|This %{entity_type} has no active Deploy Tokens."
+msgid "DeployTokens|This %{entity_type} has no active deploy tokens."
 msgstr ""
 
 msgid "DeployTokens|This action cannot be undone."
@@ -16086,10 +16092,10 @@ msgstr ""
 msgid "DeployTokens|Username (optional)"
 msgstr ""
 
-msgid "DeployTokens|Your New Deploy Token"
+msgid "DeployTokens|Your new Deploy Token username"
 msgstr ""
 
-msgid "DeployTokens|Your new Deploy Token username"
+msgid "DeployTokens|Your new deploy token"
 msgstr ""
 
 msgid "DeployTokens|Your new group deploy token has been created."
diff --git a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
index a3fdab882704f7b8a1e3f952d1959cedfee03be9..056dc9c02d2c6096ebf072c2935f7ef192b8188f 100644
--- a/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
+++ b/spec/frontend/deploy_tokens/components/new_deploy_token_spec.js
@@ -1,11 +1,19 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { GlButton, GlFormCheckbox, GlFormInput, GlFormInputGroup, GlDatepicker } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlButton,
+  GlFormCheckbox,
+  GlFormInput,
+  GlFormInputGroup,
+  GlDatepicker,
+} from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import { TEST_HOST } from 'helpers/test_constants';
 import NewDeployToken from '~/deploy_tokens/components/new_deploy_token.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert, VARIANT_INFO } from '~/alert';
 
@@ -36,11 +44,15 @@ describe('New Deploy Token', () => {
         tokenType,
       },
       stubs: {
+        GlAlert,
         GlFormCheckbox,
       },
     });
   };
 
+  const findNewTokenAlert = () => wrapper.findComponent(GlAlert);
+  const findClipboardButtons = () => wrapper.findAllComponents(ClipboardButton);
+
   describe('without a container registry', () => {
     beforeEach(() => {
       wrapper = factory({ containerRegistryEnabled: false });
@@ -212,6 +224,63 @@ describe('New Deploy Token', () => {
 
       return submitTokenThenCheck();
     });
+
+    it('should display the created token', async () => {
+      const mockAxios = new MockAdapter(axios);
+
+      const date = new Date();
+      const formInputs = wrapper.findAllComponents(GlFormInput);
+      const name = formInputs.at(0);
+      const username = formInputs.at(2);
+      name.vm.$emit('input', 'test name');
+      username.vm.$emit('input', 'test username');
+
+      const datepicker = wrapper.findAllComponents(GlDatepicker).at(0);
+      datepicker.vm.$emit('input', date);
+
+      const [
+        readRepo,
+        readRegistry,
+        writeRegistry,
+        readPackageRegistry,
+        writePackageRegistry,
+      ] = wrapper.findAllComponents(GlFormCheckbox).wrappers;
+      readRepo.vm.$emit('input', true);
+      readRegistry.vm.$emit('input', true);
+      writeRegistry.vm.$emit('input', true);
+      readPackageRegistry.vm.$emit('input', true);
+      writePackageRegistry.vm.$emit('input', true);
+
+      expect(findNewTokenAlert().exists()).toBe(false);
+
+      mockAxios
+        .onPost(createNewTokenPath, {
+          deploy_token: {
+            name: 'test name',
+            expires_at: date.toISOString(),
+            username: 'test username',
+            read_repository: true,
+            read_registry: true,
+            write_registry: true,
+            read_package_registry: true,
+            write_package_registry: true,
+          },
+        })
+        .replyOnce(HTTP_STATUS_OK, { username: 'test token username', token: 'test token' });
+
+      await submitTokenThenCheck();
+
+      const tokenAlert = findNewTokenAlert();
+      expect(tokenAlert.exists()).toBe(true);
+      expect(tokenAlert.text()).toContain('Your new deploy token');
+
+      const [usernameBtn, tokenBtn] = findClipboardButtons().wrappers;
+      expect(usernameBtn.props()).toMatchObject({
+        text: 'test token username',
+        title: 'Copy username',
+      });
+      expect(tokenBtn.props()).toMatchObject({ text: 'test token', title: 'Copy deploy token' });
+    });
   });
 
   describe('help text for write_package_registry scope', () => {
diff --git a/spec/support/shared_examples/features/deploy_token_shared_examples.rb b/spec/support/shared_examples/features/deploy_token_shared_examples.rb
index 80f5f1d805c13688173d7161ba6dcd66fedca5ce..b621a0c8cca93ed13875c198c61af349052f6824 100644
--- a/spec/support/shared_examples/features/deploy_token_shared_examples.rb
+++ b/spec/support/shared_examples/features/deploy_token_shared_examples.rb
@@ -6,7 +6,7 @@
 
     visit page_path
 
-    within('.deploy-tokens') do
+    within('#js-deploy-tokens') do
       expect(page).to have_content(deploy_token.name)
       expect(page).to have_content('read_repository')
       expect(page).to have_content('read_registry')
@@ -16,6 +16,7 @@
 
   it 'add a new deploy token', :js do
     visit page_path
+    click_button "Add token"
 
     within('#js-deploy-tokens') do
       fill_in _('Name'), with: 'new_deploy_key'
@@ -28,7 +29,7 @@
 
     expect(page).to have_content("Your new #{entity_type} deploy token has been created")
 
-    within('.created-deploy-token-container') do
+    within('#new-deploy-token-alert') do
       expect(find("input[name='deploy-token-user']").value).to eq("deployer")
       expect(find("input[name='deploy-token'][readonly='readonly']")).to be_visible
     end
@@ -40,6 +41,7 @@
   context "with form errors", :js do
     before do
       visit page_path
+      click_button "Add token"
       fill_in _('Name'), with: "new_deploy_key"
       fill_in _('Username (optional)'), with: "deployer"
       click_button "Create deploy token"
@@ -63,7 +65,7 @@
     it 'shows absolute times for expires_at' do
       visit page_path
 
-      within('.deploy-tokens') do
+      within('#js-deploy-tokens') do
         expect(page).to have_content(deploy_token.expires_at.strftime('%b %-d'))
       end
     end