diff --git a/site/plugins/admin/templates/system/api/delivery/add.html b/site/plugins/admin/templates/system/api/delivery/add.html
index 9e2af3b1..b6f48bc3 100644
--- a/site/plugins/admin/templates/system/api/delivery/add.html
+++ b/site/plugins/admin/templates/system/api/delivery/add.html
@@ -4,32 +4,32 @@
 <form method="post" id="form">
     {{ csrf() }}
     <input type="hidden" name="api" value="{{ api }}">
-    <div class="row">
-        <div class="col-md-6">
-            <div class="form-group">
-                <label for="title">{{ tr('admin_title') }}</label>
-                <input type="text" id="title" name="title" value="" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_title_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_tokens_label') }}</small>
+    <div class="flex">
+        <div class="w-full lg:w-3/12">
+            <div class="mb-2">
+                <label for="title" class="block mb-1">{{ tr('admin_title') }}</label>
+                <input type="text" id="title" name="title" value="" class="w-full border border-black border-2 outline-none px-1 py-1" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_title_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_tokens_label') }}</small>
             </div>
-            <div class="form-group">
-                <label for="title">{{ tr('admin_api_calls_limit') }}</label>
-                <input type="text" id="limit" name="limit_calls" value="0" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_api_calls_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_api_calls_limit_label') }}</small>
+            <div class="mb-2">
+                <label for="title" class="block mb-1">{{ tr('admin_api_calls_limit') }}</label>
+                <input type="text" id="limit" name="limit_calls" value="0" class="w-full border border-black border-2 outline-none px-1 py-1" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_api_calls_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_api_calls_limit_label') }}</small>
             </div>
-            <div class="form-group">
-                <label for="icon">{{ tr('admin_icon') }}</label>
-                <input type="text" id="fieldsetIcon" name="icon" value="fas fa-truck" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_icon_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_api_token_icon', {':link': '<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">fontawesome</a>'})|raw }}</small>
+            <div class="mb-2">
+                <label for="icon" class="block mb-1">{{ tr('admin_icon') }}</label>
+                <input type="text" id="fieldsetIcon" name="icon" value="fas fa-truck" class="w-full border border-black border-2 outline-none px-1 py-1" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_icon_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_api_token_icon', {':link': '<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">fontawesome</a>'})|raw }}</small>
             </div>
-            <div class="form-group">
-                <label for="type">{{ tr('admin_state') }}</label>
-                <select class="form-control" name="state">
+            <div class="mb-2">
+                <label for="type" class="block mb-1">{{ tr('admin_state') }}</label>
+                <select class="js-example-basic-single w-full border border-black border-2 outline-none px-1 py-1" name="state">
                     <option value="enabled" selected>{{ tr('admin_enabled') }}</option>
                     <option value="disabled">{{ tr('admin_disabled') }}</option>
                 </select>
             </div>
-            <div class="form-group">
-                <input type="submit" id="create" name="create" value="{{ tr('admin_create') }}" class="btn btn-black">
+            <div class="mb-2">
+                <input type="submit" id="create" name="create" value="{{ tr('admin_create') }}" class="mt-6 px-4 py-2 border border-black border-4 text-black inline-block w-auto bg-white hover:bg-black hover:text-white">
             </div>
         </div>
     </div>
diff --git a/site/plugins/admin/templates/system/api/delivery/edit.html b/site/plugins/admin/templates/system/api/delivery/edit.html
index 61e92bfd..993cb5c5 100644
--- a/site/plugins/admin/templates/system/api/delivery/edit.html
+++ b/site/plugins/admin/templates/system/api/delivery/edit.html
@@ -9,32 +9,32 @@
     <input type="hidden" name="created_at" value="{{ api_token_data.created_at }}">
     <input type="hidden" name="uuid" value="{{ api_token_data.uuid }}">
     <input type="hidden" name="calls" value="{{ api_token_data.calls }}">
-    <div class="row">
-        <div class="col-md-6">
-            <div class="form-group">
-                <label for="title">{{ tr('admin_title') }}</label>
-                <input type="text" id="title" name="title" value="{{ api_token_data.title }}" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_title_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_tokens_label') }}</small>
+    <div class="flex">
+        <div class="w-full lg:w-3/12">
+            <div class="mb-2">
+                <label for="title" class="block mb-1 font-bold">{{ tr('admin_title') }}</label>
+                <input type="text" id="title" name="title" value="{{ api_token_data.title }}" class="w-full border border-black border-2 outline-none px-2 py-2" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_title_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_tokens_label') }}</small>
             </div>
-            <div class="form-group">
-                <label for="title">{{ tr('admin_api_calls_limit') }}</label>
-                <input type="text" id="limit" name="limit_calls" value="{{ api_token_data.limit_calls }}" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_api_calls_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_api_calls_limit_label') }}</small>
+            <div class="mb-2">
+                <label for="title" class="block mb-1 font-bold">{{ tr('admin_api_calls_limit') }}</label>
+                <input type="text" id="limit" name="limit_calls" value="{{ api_token_data.limit_calls }}" class="w-full border border-black border-2 outline-none px-2 py-2" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_api_calls_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_api_calls_limit_label') }}</small>
             </div>
-            <div class="form-group">
-                <label for="icon">{{ tr('admin_icon') }}</label>
-                <input type="text" id="fieldsetIcon" name="icon" value="{{ api_token_data.icon }}" class="form-control" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_icon_empty_input') }}">
-                <small class="form-text text-muted">{{ tr('admin_help_text_for_api_token_icon', {':link': '<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">fontawesome</a>'})|raw }}</small>
+            <div class="mb-2">
+                <label for="icon" class="block mb-1 font-bold">{{ tr('admin_icon') }}</label>
+                <input type="text" id="fieldsetIcon" name="icon" value="{{ api_token_data.icon }}" class="w-full border border-black border-2 outline-none px-2 py-2" required="required" data-validation="length required" data-validation-length="min1" data-validation-error-msg="{{ tr('admin_error_icon_empty_input') }}">
+                <small class="opacity-50 block mt-1">{{ tr('admin_help_text_for_api_token_icon', {':link': '<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">fontawesome</a>'})|raw }}</small>
             </div>
-            <div class="form-group">
-                <label for="type">{{ tr('admin_state') }}</label>
-                <select class="form-control" name="state">
+            <div class="mb-2">
+                <label for="type" class="block mb-1 font-bold">{{ tr('admin_state') }}</label>
+                <select class="w-full border border-black border-2 outline-none px-1 py-2" name="state">
                     <option value="enabled" {% if api_token_data.state == 'enabled' %}selected{% endif %}>{{ tr('admin_enabled') }}</option>
                     <option value="disabled" {% if api_token_data.state == 'disabled' %}selected{% endif %}>{{ tr('admin_disabled') }}</option>
                 </select>
             </div>
-            <div class="form-group">
-                <input type="submit" id="save" name="save" value="{{ tr('admin_save') }}" class="btn btn-black">
+            <div class="mb-2">
+                <input type="submit" id="save" name="save" value="{{ tr('admin_save') }}" class="mt-6 px-4 py-2 border border-black border-4 text-black inline-block w-auto bg-white hover:bg-black hover:text-white">
             </div>
         </div>
     </div>
diff --git a/site/plugins/admin/templates/system/api/delivery/index.html b/site/plugins/admin/templates/system/api/delivery/index.html
index 9254b040..f3bfa04f 100644
--- a/site/plugins/admin/templates/system/api/delivery/index.html
+++ b/site/plugins/admin/templates/system/api/delivery/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 {% if (delivery_tokens_list|length > 0) %}
-<table class="table no-margin">
+<table>
   <tbody>
       {% for key, delivery_token in delivery_tokens_list %}
       {% set token_file_path = PATH_TOKENS ~ '/' ~ api ~ '/' ~ delivery_token.dirname  ~ '/' ~ 'token.yaml' %}
@@ -10,28 +10,27 @@
           {% set token_data = parser_decode(filesystem_read(token_file_path), 'yaml') %}
       {% endif %}
       <tr>
-          <td style="width: 50px; padding-right: 10px; text-align:center;" class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}">
+          <td class="w-1 text-center {% if token_data.state == 'disabled' %}opacity-50{% endif %}">
             <i class="fas fa-truck"></i>
           </td>
-          <td style="padding-left:0px;" class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}"><a href="{{ path_for('admin.api_tokens.edit') }}?api={{ api }}&api_token={{ delivery_token.dirname }}">{{ token_data.title }}</a></td>
-          <td style="padding-left:0px;" class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}">{{ delivery_token.dirname }}</td>
-          <td style="padding-left:0px;" class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}">{{ token_data.calls }} / {% if(token_data.limit_calls > 0) %}{{ token_data.limit_calls }}{% else %}<span style="font-size: 20px;">&infin;</span>{% endif %}</td>
+          <td class="pl-0 {% if token_data.state == 'disabled' %}opacity-50{% endif %}"><a href="{{ path_for('admin.api_tokens.edit') }}?api={{ api }}&api_token={{ delivery_token.dirname }}">{{ token_data.title }}</a></td>
+          <td class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}">{{ delivery_token.dirname }}</td>
+          <td class="{% if token_data.state == 'disabled' %}opacity-50{% endif %}">{{ token_data.calls }} / {% if(token_data.limit_calls > 0) %}{{ token_data.limit_calls }}{% else %}<span style="font-size: 20px;">&infin;</span>{% endif %}</td>
           <td class="text-right">
-              <div class="btn-group">
-                <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
+              <div class="relative">
+                <button type="button" class="btn dot js-dropdown-btn">
                   <i class="fas fa-ellipsis-h"></i>
                 </button>
-                <div class="dropdown-menu dropdown-menu-lg-right">
-                  <a class="dropdown-item" href="{{ path_for('admin.api_tokens.edit') }}?api={{ api }}&api_token={{ delivery_token.dirname }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
-                  <div class="dropdown-divider"></div>
+                <div class="js-dropdown px-10 py-6 bg-black text-white absolute right-0 top-0 mt-6 w-56 text-left hidden">
+                  <a class="block py-2" href="{{ path_for('admin.api_tokens.edit') }}?api={{ api }}&api_token={{ delivery_token.dirname }}"><i class="fas fa-edit mr-2"></i> {{ tr('admin_edit') }}</a>
                   <form id="delete-api-token-id-{{ delivery_token.dirname }}" action="{{ path_for('admin.api_tokens.deleteProcess') }}" method="POST" style="display: none;">
                       {{ csrf() }}
                       <input type="hidden" name="api" value="{{ api }}">
                       <input type="hidden" name="api_token" value="{{ delivery_token.dirname }}">
                   </form>
-                  <a class="dropdown-item" href="javascript:;"
+                  <a class="block py-2" href="javascript:;"
                      onclick="event.preventDefault();
-                              document.getElementById('delete-api-token-id-{{ delivery_token.dirname }}').submit();"><i class="fas fa-trash-alt"></i> {{ tr('admin_delete') }}</a>
+                              document.getElementById('delete-api-token-id-{{ delivery_token.dirname }}').submit();"><i class="fas fa-trash-alt mr-2"></i> {{ tr('admin_delete') }}</a>
                 </div>
               </div>
           </td>
@@ -40,10 +39,12 @@
   </tbody>
 </table>
 {% else %}
-<div class="empty-list-message">
-    <i class="fas fa-truck"></i>
-    <h3>{{ tr('admin_you_have_not_created_any_api_tokens_yet') }}</h3>
-    <a href="{{ path_for('admin.api_tokens.add') }}?api={{ api }}" class="btn">{{ tr('admin_create_new_delivery_token') }}</a>
-</div>
+    {{ include ("plugins/admin/templates/ui/no-elements.html", {icon: 'fas fa-truck',
+                                                                message: 'admin_create_new_delivery_token',
+                                                                button: {
+                                                                    link: path_for('admin.api_tokens.add') ~ '?api=' ~ api,
+                                                                    title: 'admin_create_new_delivery_token'
+                                                                    }
+                                                                })}}
 {% endif %}
 {% endblock %}
diff --git a/site/plugins/admin/templates/system/api/index.html b/site/plugins/admin/templates/system/api/index.html
index a018dc7c..fc4a70b9 100644
--- a/site/plugins/admin/templates/system/api/index.html
+++ b/site/plugins/admin/templates/system/api/index.html
@@ -2,22 +2,19 @@
 
 {% block content %}
 {% if (api_list|length > 0) %}
-<table class="table no-margin">
+<table>
   <tbody>
       {% for key, api in api_list %}
       <tr>
-          <td style="width: 50px; padding-right: 10px; text-align:center;">
+          <td class="w-1 text-center">
             <i class="fas fa-truck"></i>
           </td>
-          <td style="padding-left:0px;"><a href="{{ path_for('admin.api_tokens.index') }}?api={{ key }}">{{ api }}</a></td>
+          <td class="pl-0"><a href="{{ path_for('admin.api_tokens.index') }}?api={{ key }}">{{ api }}</a></td>
       </tr>
     {% endfor %}
   </tbody>
 </table>
 {% else %}
-<div class="empty-list-message">
-    <i class="fas fa-network-wired"></i>
-    <h3>{{ tr('admin_you_have_not_created_any_api_tokens_yet') }}</h3>
-</div>
+    {{ include ("plugins/admin/templates/ui/no-elements.html", {icon: 'fas fa-network-wired', message: 'admin_you_have_not_created_any_api_tokens_yet'}) }}
 {% endif %}
 {% endblock %}
diff --git a/site/plugins/admin/templates/ui/no-elements.html b/site/plugins/admin/templates/ui/no-elements.html
new file mode 100644
index 00000000..f15d6f96
--- /dev/null
+++ b/site/plugins/admin/templates/ui/no-elements.html
@@ -0,0 +1,5 @@
+<div class="text-center pt-20">
+    <i class="{{ icon }} text-6xl"></i>
+    <h3 class="text-2xl pt-6">{{ tr(message) }}</h3>
+    {% if button %}<a href="{{ tr(button.link) }}" class="mt-6 px-4 py-2 border border-black border-4 text-black inline-block w-auto hover:bg-black hover:text-white">{{ tr(button.title) }}</a>{% endif %}
+</div>