diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 52b5e4fea..92dbd0315 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -424,6 +424,8 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
+  display: flex;
+  flex-direction: column;
 
   --emoji-size: 1.8em;
 
@@ -446,6 +448,7 @@
 
   .user-profile-field-add {
     justify-content: center;
+    margin: 0.25em;
   }
 
   .user-profile-field {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 498f51c54..2c0298c97 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -442,7 +442,7 @@
               </template>
             </EmojiInput>
             <button
-              class="delete-field button-unstyled -hover-highlight"
+              class="delete-field button-default -hover-highlight"
               @click="deleteField(i)"
             >
               <!-- TODO something is wrong with v-show here -->
@@ -453,17 +453,15 @@
             </button>
           </dd>
         </dl>
-        <p class="user-profile-field-add">
-          <button
-            v-if="newFields.length < maxFields"
-            class="add-field faint button-unstyled -hover-highlight"
-            @click="addField"
-          >
-            <FAIcon icon="plus" />
-            {{ ' ' }}
-            {{ $t("settings.profile_fields.add_field") }}
-          </button>
-        </p>
+        <button
+          v-if="newFields.length < maxFields"
+          class="user-profile-field-add add-field button-default -hover-highlight"
+          @click="addField"
+        >
+          <FAIcon icon="plus" />
+          {{ ' ' }}
+          {{ $t("settings.profile_fields.add_field") }}
+        </button>
       </div>
     </template>
     <div