diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
index d0d1207d751..e93efb1105d 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit-security-key.hbs
@@ -1,10 +1,13 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.security_key.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="security-key-name">{{i18n "user.second_factor.security_key.edit_description"}}</label>
+      {{input name="security-key-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecurityKey")
     class="btn-primary"
@@ -12,9 +15,9 @@
   }}
   {{d-button
     action=(action "disableSecurityKey")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
index a7a4f60a294..a5fa63f5863 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-edit.hbs
@@ -1,10 +1,13 @@
 {{#d-modal-body}}
-  <div class="form-horizontal">
-    {{input type="text" value=model.name}}
-  </div>
-  <div class="second-factor instructions">
-    {{i18n "user.second_factor.edit_description"}}
-  </div>
+  <form class="form-horizontal">
+    <div class="input-group">
+      <label for="authenticator-name">{{i18n "user.second_factor.edit_description"}}</label>
+      {{input name="authenticator-name" type="text" value=model.name}}
+    </div>
+  </form>
+{{/d-modal-body}}
+
+<div class="modal-footer">
   {{d-button
     action=(action "editSecondFactor")
     class="btn-primary"
@@ -12,9 +15,9 @@
   }}
   {{d-button
     action=(action "disableSecondFactor")
-    class="btn-danger"
+    class="btn-danger no-text"
     icon="trash-alt"
     aria-label="user.second_factor.disable"
     title="user.second_factor.disable"
   }}
-{{/d-modal-body}}
+</div>
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 65293c45893..0c6fd078938 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -35,6 +35,7 @@
   &.no-text {
     .d-icon {
       margin-right: 0;
+      min-height: 17px;
     }
   }
   @include hover {