diff --git a/fir_api/templates/fir_api/plugins/user_profile.html b/fir_api/templates/fir_api/plugins/user_profile.html
index ecb4877e..ee3e1267 100644
--- a/fir_api/templates/fir_api/plugins/user_profile.html
+++ b/fir_api/templates/fir_api/plugins/user_profile.html
@@ -1,19 +1,17 @@
 {% load i18n %}
 {% if perms.incidents.handle_incidents and not oidc_enabled %}
-<div class="row">
+<div class="row justify-content-md-center">
 
   <div class="col-sm-8 col-sm-offset-2">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h3 class="panel-title">FIR API - {% trans "API Access" %}</h3>
-      </div>
-      <div class="panel-body">
+    <div class="card mb-3">
+      <h5 class="card-header bg-primary-subtle text-primary-emphasis">FIR API - {% trans "API Access" %}</h3>
+      <div class="card-body">
           <p>You need to be authenticated in order to use the API. It will accept session or token based authentication.
           Tokens can be managed in the administration interface and should be specified as a <strong>request header</strong>.</p>
           Example:<br/>
           <pre>X-Api: Token {{ user.auth_token.key }}</pre>
       </div>
-      <table class='table'>
+      <table class="table">
         <tr><th>{% trans "Token" %}</th><td><code>{{ user.auth_token.key }}</code></td></tr>
         <tr><th>{% trans "Created" %}</th><td><code>{{ user.auth_token.created }}</code></td></tr>
       </table>