diff --git a/resources/views/users/api-tokens/parts/list.blade.php b/resources/views/users/api-tokens/parts/list.blade.php
index ea1893372..58617fb85 100644
--- a/resources/views/users/api-tokens/parts/list.blade.php
+++ b/resources/views/users/api-tokens/parts/list.blade.php
@@ -1,6 +1,6 @@
 <section class="card content-wrap auto-height" id="api_tokens">
-    <div class="grid half mb-s">
-        <div><h2 class="list-heading">{{ trans('settings.users_api_tokens') }}</h2></div>
+    <div class="flex-container-row wrap justify-space-between items-center mb-s">
+        <h2 class="list-heading">{{ trans('settings.users_api_tokens') }}</h2>
         <div class="text-right pt-xs">
             @if(userCan('access-api'))
                 <a href="{{ url('/api/docs') }}" class="button outline">{{ trans('settings.users_api_tokens_docs') }}</a>
@@ -9,25 +9,25 @@
         </div>
     </div>
     @if (count($user->apiTokens) > 0)
-        <table class="table">
-            <tr>
-                <th>{{ trans('common.name') }}</th>
-                <th>{{ trans('settings.users_api_tokens_expires') }}</th>
-                <th></th>
-            </tr>
+        <div class="item-list my-m">
             @foreach($user->apiTokens as $token)
-                <tr>
-                    <td>
-                        {{ $token->name }} <br>
+                <div class="item-list-row flex-container-row items-center wrap py-xs gap-x-m">
+                    <div class="flex px-m py-xs min-width-m">
+                        <a href="{{ $user->getEditUrl('/api-tokens/' . $token->id) }}">{{ $token->name }}</a> <br>
                         <span class="small text-muted italic">{{ $token->token_id }}</span>
-                    </td>
-                    <td>{{ $token->expires_at->format('Y-m-d') ?? '' }}</td>
-                    <td class="text-right">
-                        <a class="button outline small" href="{{ $user->getEditUrl('/api-tokens/' . $token->id) }}">{{ trans('common.edit') }}</a>
-                    </td>
-                </tr>
+                    </div>
+                    <div class="flex flex-container-row items-center min-width-m">
+                        <div class="flex px-m py-xs text-muted">
+                            <strong class="text-small">{{ trans('settings.users_api_tokens_expires') }}</strong> <br>
+                            {{ $token->expires_at->format('Y-m-d') ?? '' }}
+                        </div>
+                        <div class="flex px-m py-xs text-right">
+                            <a class="button outline small" href="{{ $user->getEditUrl('/api-tokens/' . $token->id) }}">{{ trans('common.edit') }}</a>
+                        </div>
+                    </div>
+                </div>
             @endforeach
-        </table>
+        </div>
     @else
         <p class="text-muted italic py-m">{{ trans('settings.users_api_tokens_none') }}</p>
     @endif