diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js
index 79c2540b4..91c32d399 100644
--- a/app/assets/javascripts/apiKey.js
+++ b/app/assets/javascripts/apiKey.js
@@ -7,12 +7,12 @@
 
     const states = {
       'keyVisible': (key, thing) => `
-        <span class="api-key-key">${key}</span>
-        <input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
+        <span class="api-key__key">${key}</span>
+        <input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
       `,
       'keyCopied': thing => `
-        <span class="api-key-key">Copied to clipboard</span>
-        <input type='button' class='api-key-button-show' value='Show ${thing}' />
+        <span class="api-key__key">Copied to clipboard</span>
+        <input type='button' class='govuk-button govuk-button--secondary api-key__button--show' value='Show ${thing}' />
       `
     };
 
@@ -39,14 +39,14 @@
         .html(states.keyVisible(key, thing))
         .attr('aria-live', 'polite')
         .on(
-          'click', '.api-key-button-copy', () =>
+          'click', '.api-key__button--copy', () =>
             this.copyKey(
-              $('.api-key-key', component)[0], () =>
+              $('.api-key__key', component)[0], () =>
                 $component.html(states.keyCopied(thing))
             )
         )
         .on(
-          'click', '.api-key-button-show', () =>
+          'click', '.api-key__button--show', () =>
             $component.html(states.keyVisible(key, thing))
         );
 
diff --git a/app/assets/stylesheets/components/api-key.scss b/app/assets/stylesheets/components/api-key.scss
index a144a0c89..4a723e5fd 100644
--- a/app/assets/stylesheets/components/api-key.scss
+++ b/app/assets/stylesheets/components/api-key.scss
@@ -4,22 +4,21 @@
   padding-bottom: 38px;  // height of button
   display: flex;
 
-  &-name {
+  &__name {
     @include bold-19;
     margin-bottom: 5px;
   }
 
-  &-key {
+  &__key {
     font-family: monospace;
     display: block;
     padding: 0 0 10px 0;
     margin: auto 0;
   }
 
-  &-button-show,
-  &-button-copy {
+  &__button--show,
+  &__button--copy {
 
-    @include button($grey-3);
     position: absolute;
     bottom: 2px;
 
diff --git a/app/templates/components/api-key.html b/app/templates/components/api-key.html
index dc5e6c2ee..b2cd6e4aa 100644
--- a/app/templates/components/api-key.html
+++ b/app/templates/components/api-key.html
@@ -1,10 +1,10 @@
 {% macro api_key(key, name=None, thing="API key") %}
   {% if name %}
-    <h2 class="api-key-name">
+    <h2 class="api-key__name">
       {{ name }}
     </h2>
   {% endif %}
   <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
-    <span class="api-key-key">{{ key }}</span>
+    <span class="api-key__key">{{ key }}</span>
   </div>
 {% endmacro %}
diff --git a/tests/app/main/views/test_api_integration.py b/tests/app/main/views/test_api_integration.py
index 675dfee7b..d37ed475a 100644
--- a/tests/app/main/views/test_api_integration.py
+++ b/tests/app/main/views/test_api_integration.py
@@ -269,7 +269,7 @@ def test_should_create_api_key_with_type_normal(
         _expected_status=200,
     )
 
-    assert page.select_one('span.api-key-key').text.strip() == (
+    assert page.select_one('span.api-key__key').text.strip() == (
         'some_default_key_name_12-{}-{}'.format(SERVICE_ONE_ID, fake_uuid)
     )
 
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index 1ff7eaf94..c31225833 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -686,7 +686,7 @@ def test_should_show_template_id_on_template_page(
         template_id=fake_uuid,
         _test_page_title=False,
     )
-    assert page.select('.api-key-key')[0].text == fake_uuid
+    assert page.select('.api-key__key')[0].text == fake_uuid
 
 
 def test_should_show_sms_template_with_downgraded_unicode_characters(
diff --git a/tests/javascripts/apiKey.test.js b/tests/javascripts/apiKey.test.js
index b8b5ce6fa..0dbf12093 100644
--- a/tests/javascripts/apiKey.test.js
+++ b/tests/javascripts/apiKey.test.js
@@ -36,11 +36,11 @@ describe('API key', () => {
 
     // set up DOM
     document.body.innerHTML =`
-      <h2 class="api-key-name">
+      <h2 class="api-key__name">
         ${thing}
       </h2>
       <div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive">
-        <span class="api-key-key">${apiKey}</span>
+        <span class="api-key__key">${apiKey}</span>
       </div>`;
 
     component = document.querySelector('[data-module=api-key]');
@@ -72,11 +72,11 @@ describe('API key', () => {
 
       // set up DOM
       document.body.innerHTML =`
-        <h2 class="api-key-name">
+        <h2 class="api-key__name">
           ${thing}
         </h2>
         <div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive">
-          <span class="api-key-key">${apiKey}</span>
+          <span class="api-key__key">${apiKey}</span>
         </div>`;
 
       component = document.querySelector('[data-module=api-key]');