diff --git a/allianceauth/services/templates/services/services.html b/allianceauth/services/templates/services/services.html
index b3929fdf..4febf3b8 100644
--- a/allianceauth/services/templates/services/services.html
+++ b/allianceauth/services/templates/services/services.html
@@ -14,40 +14,40 @@
         {% endfor %}
     </div>
 
-    <div class="w-100 text-center">
-        <h4>Legend</h4>
+    <div class="mt-3">
+        <h4 class="border-bottom">{% translate "Legend" %}</h4>
         <div class="d-inline-flex bd-highlight justify-content-center flex-wrap">
-            <div class="d-inline-flex m-3">
-                <a title="Activate" class="btn btn-warning">
-                    <span class="fas fa-check fa-fw"></span>
-                </a>
+            <div class="d-inline-flex align-items-center m-2">
+                <span title="Activate" class="btn btn-warning btn-sm">
+                    <i class="fas fa-check fa-fw"></i>
+                </span>
                 <p class="m-2 p-0 align-self-center">
                     {% translate "Click to activate the service for your user." %}
                 </p>
             </div>
 
-            <div class="d-inline-flex m-3">
-                <a title="Set Password" class="btn btn-warning">
-                    <span class="fas fa-edit fa-fw"></span>
-                </a>
+            <div class="d-inline-flex align-items-center m-2">
+                <span title="Set Password" class="btn btn-warning btn-sm">
+                    <i class="fas fa-edit fa-fw"></i>
+                </span>
                 <p class="m-2 p-0 align-self-center">
                     {% translate "Click to manually set your password." %}
                 </p>
             </div>
 
-            <div class="d-inline-flex m-3">
-                <a title="Reset Password" class="btn btn-primary">
-                    <span class="fas fa-sync fa-fw"></span>
-                </a>
+            <div class="d-inline-flex align-items-center m-2">
+                <span title="Reset Password" class="btn btn-primary btn-sm">
+                    <i class="fas fa-sync fa-fw"></i>
+                </span>
                 <p class="m-2 p-0 align-self-center">
                     {% translate "Click to randomly generate your password." %}
                 </p>
             </div>
 
-            <div class="d-inline-flex m-3">
-                <a title="Deactivate" class="btn btn-danger">
-                    <span class="fas fa-times fa-fw"></span>
-                </a>
+            <div class="d-inline-flex align-items-center m-2">
+                <span title="Deactivate" class="btn btn-danger btn-sm">
+                    <i class="fas fa-times fa-fw"></i>
+                </span>
                 <p class="m-2 p-0 align-self-center">
                     {% translate "Click to deactivate the service for your user" %}
                 </p>