diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 062888810..4331c416f 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -83,6 +83,7 @@ $path: '/static/images/';
 @import 'views/get_started';
 @import 'views/history';
 @import 'views/cookies';
+@import 'views/webauthn';
 
 // TODO: break this up
 @import 'app';
diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss
new file mode 100644
index 000000000..3e0de527e
--- /dev/null
+++ b/app/assets/stylesheets/views/webauthn.scss
@@ -0,0 +1,25 @@
+.webauthn__no-js {
+  .js-enabled & {
+    display: none;
+  }
+}
+
+.webauthn__api-missing {
+  display: none;
+
+  .js-enabled & {
+    display: block;
+  }
+
+  .js-enabled.webauthn-api-enabled & {
+    display: none;
+  }
+}
+
+.webauthn__api-required {
+  display: none;
+
+  .webauthn-api-enabled & {
+    display: block;
+  }
+}
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index f8de636a8..814ea7c54 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -1,6 +1,7 @@
 {% extends "template.njk" %}
 {% from "components/banner.html" import banner %}
 {% from "components/cookie-banner.html" import cookie_banner %}
+{% from "components/webauthn-api-check.html" import webauthn_api_check %}
 
 {% block headIcons %}
   <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
@@ -38,6 +39,10 @@
 {% endblock %}
 
 {% block bodyStart %}
+  {% block webauthn_api %}
+    {{ webauthn_api_check() }}
+  {% endblock %}
+
   {% block cookie_message %}
     {{ cookie_banner() }}
   {% endblock %}
diff --git a/app/templates/components/webauthn-api-check.html b/app/templates/components/webauthn-api-check.html
new file mode 100644
index 000000000..19bc56bc5
--- /dev/null
+++ b/app/templates/components/webauthn-api-check.html
@@ -0,0 +1,7 @@
+{% macro webauthn_api_check() %}
+  <script>
+    if ('credentials' in window.navigator) {
+      document.body.className = ((document.body.className) ? document.body.className + ' webauthn-api-enabled' : 'webauthn-api-enabled');
+    }
+  </script>
+{% endmacro %}
diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html
index 625b98ce1..b30e79d16 100644
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -3,6 +3,7 @@
 {% from "components/button/macro.njk" import govukButton %}
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/table.html" import mapping_table, row, field, row_heading %}
+{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}
 
 {% set page_title = 'Security keys' %}
 {% set credentials = current_user.webauthn_credentials %}
@@ -45,10 +46,20 @@
 
       {% endif %}
 
+      {{ govukErrorMessage({
+        "classes": "webauthn__api-missing",
+        "text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
+      }) }}
+
+      {{ govukErrorMessage({
+        "classes": "webauthn__no-js",
+        "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
+      }) }}
+
       {{ govukButton({
         "element": "button",
         "text": "Register a key",
-        "classes": "govuk-button--secondary",
+        "classes": "govuk-button--secondary webauthn__api-required",
         "attributes": {
           "data-module": "register-security-key",
           "data-csrf-token": csrf_token(),