diff --git a/assets/css/app.scss b/assets/css/app.scss
index 670e1b436d..0c8976c5e1 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -27,6 +27,16 @@
     }
 }
 
+.btn {
+  @apply font-bold py-2 px-4 rounded;
+}
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue:hover {
+  @apply bg-blue-700;
+}
+
 @import '~cropper/dist/cropper.css';
 //@import '~flag-icon-css/sass/flag-icon.scss';
 @import "~select2/dist/css/select2.css";
diff --git a/assets/js/app.js b/assets/js/app.js
index fd075a971f..7e1daa12ce 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -162,9 +162,15 @@ $(function () {
       self = $(this);
 
     $.when(loadModalContent).done(function (modalContent) {
-      var modalTitle = self.data('title') || ' ';
-      $('#global-modal').find('.modal-title').text(modalTitle);
-      $('#global-modal').find('.modal-body').html(modalContent);
+      var modalTitle = self.data('title') || ' ',
+        globalModalTitle = $('#global-modal').find('#global-modal-title'),
+        globalModalBody = $('#global-modal').find('#global-modal-body');
+
+      globalModalTitle.text(modalTitle);
+      globalModalBody.html(modalContent);
+
+      globalModalBody.css({'max-height' : "500px", "overflow" : "auto"});
+
       toggleModal('global-modal');
     });
   });
diff --git a/public/main/admin/settings.lib.php b/public/main/admin/settings.lib.php
index 3a7ce63ebc..9e52364354 100644
--- a/public/main/admin/settings.lib.php
+++ b/public/main/admin/settings.lib.php
@@ -149,14 +149,16 @@ function handlePlugins()
     // Plugins NOT installed
     echo Display::page_subheader(get_lang('Plugins'));
     echo '<form class="form-horizontal" name="plugins" method="post" action="'.api_get_self().'?category='.Security::remove_XSS($_GET['category']).'&sec_token='.$token.'">';
-    echo '<table class="table table-hover table-striped table-bordered">';
+    echo '<table class="table table-hover table-striped table-bordered table-fixed">';
+    echo '<thead class="bg-gray-50">';
     echo '<tr>';
-    echo '<th width="20px">';
+    echo '<th width="20px" class="px-6 py-2 uppercase font-normal leading-normal mt-0 mb-2 text-gray-500">';
     echo get_lang('Action');
-    echo '</th><th>';
+    echo '</th><th class="px-6 py-2 uppercase font-normal leading-normal mt-0 mb-2 text-gray-500">';
     echo get_lang('Description');
     echo '</th>';
     echo '</tr>';
+    echo '</thead>';
 
     /*$plugin_list = array();
     $my_plugin_list = $plugin_obj->get_plugin_regions();
@@ -174,23 +176,23 @@ function handlePlugins()
             $pluginRow = '';
 
             if (in_array($pluginName, $installed_plugins)) {
-                $pluginRow .= '<tr class="row_selected">';
+                $pluginRow .= '<tr class="row_selected whitespace-nowrap">';
             } else {
-                $pluginRow .= '<tr>';
+                $pluginRow .= '<tr class="whitespace-nowrap">';
             }
-            $pluginRow .= '<td>';
+            $pluginRow .= '<td class="px-6 py-4 text-sm text-gray-500">';
             // Checkbox
             if (in_array($pluginName, $installed_plugins)) {
                 $pluginRow .= '<input type="checkbox" name="plugin_'.$pluginName.'[]" checked="checked" class="border rounded">';
             } else {
                 $pluginRow .= '<input type="checkbox" name="plugin_'.$pluginName.'[]" class="border rounded">';
             }
-            $pluginRow .= '</td><td>';
-            $pluginRow .= '<h4>'.$plugin_info['title'].' <small>v '.$plugin_info['version'].'</small></h4>';
+            $pluginRow .= '</td><td class="px-6 py-4 text-sm text-gray-500">';
+            $pluginRow .= '<h3 class="text-3xl font-normal leading-normal mt-0 mb-2">'.$plugin_info['title'].' <small>v '.$plugin_info['version'].'</small></h3>';
             $pluginRow .= '<p>'.$plugin_info['comment'].'</p>';
             $pluginRow .= '<p>'.get_lang('Author').': '.$plugin_info['author'].'</p>';
 
-            $pluginRow .= '<div class="btn-group btn-group-sm">';
+            $pluginRow .= '<div class="btn-group btn-group-sm mt-4">';
             if (in_array($pluginName, $installed_plugins)) {
                 $pluginRow .= Display::url(
                     '<em class="fa fa-cogs"></em> '.get_lang('Configure'),
@@ -209,7 +211,7 @@ function handlePlugins()
                     "<em class='fa fa-file-text-o'></em> readme.txt",
                     api_get_path(WEB_PLUGIN_PATH).$pluginName."/readme.txt",
                     [
-                        'class' => 'btn btn-primary ajax',
+                        'class' => 'btn btn-blue ajax',
                         'data-title' => $plugin_info['title'],
                         'data-size' => 'lg',
                         '_target' => '_blank',
@@ -223,7 +225,7 @@ function handlePlugins()
                     "<em class='fa fa-file-text-o'></em> README.md",
                     api_get_path(WEB_AJAX_PATH).'plugin.ajax.php?a=md_to_html&plugin='.$pluginName,
                     [
-                        'class' => 'btn btn-primary ajax',
+                        'class' => 'btn btn-blue ajax',
                         'data-title' => $plugin_info['title'],
                         'data-size' => 'lg',
                         '_target' => '_blank',
@@ -241,9 +243,10 @@ function handlePlugins()
             }
         }
     }
-
+    echo '<tbody class="bg-white">';
     echo $installed;
     echo $notInstalled;
+    echo '</tbody>';
     echo '</table>';
 
     echo '<div class="form-actions bottom_actions">';
@@ -252,26 +255,6 @@ function handlePlugins()
     echo get_lang('Enable the selected plugins').'</button>';
     echo '</div>';
     echo '</form>';
-    echo '<div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="global-modal">
-    <!--content-->
-    <div class="relative w-auto my-6 mx-auto max-w-3xl">
-        <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-            <!--header-->
-            <div class="flex items-start justify-between p-5 border-b border-solid border-gray-200 rounded-t">
-                <h3 class="text-3xl font-semibold modal-title" id="global-modal-title"></h3>
-            </div>
-            <!--body-->
-            <div class="relative p-6 flex-auto modal-body" id="global-modal-body"></div>
-            <!--footer-->
-            <div class="flex items-center justify-end p-6 border-t border-solid border-gray-200 rounded-b">
-                <button id="close-global-model" class="text-purple-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
-                  '.get_lang('Close').'
-                </button>
-            </div>
-        </div>
-      </div>
-    </div>
-    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="global-modal-backdrop"></div>';
 }
 
 /**
diff --git a/src/CoreBundle/Resources/views/Layout/base-layout.html.twig b/src/CoreBundle/Resources/views/Layout/base-layout.html.twig
index bc42217141..2c6657cba6 100644
--- a/src/CoreBundle/Resources/views/Layout/base-layout.html.twig
+++ b/src/CoreBundle/Resources/views/Layout/base-layout.html.twig
@@ -3,6 +3,7 @@
 {% import "@ChamiloCore/Macros/buttons.html.twig" as macro_buttons %}
 {% import "@ChamiloCore/Macros/image.html.twig" as macro_image %}
 {% import '@ChamiloCore/Macros/headers.html.twig' as macro_headers %}
+{% import '@ChamiloCore/Macros/modals.html.twig' as macro_modals %}
 {# Chamilo theme #}
 {% set theme = 'chamilo' %}
 {% if not from_vue %}
@@ -26,3 +27,4 @@
 {% else %}
     {{ block('page_content') }}
 {% endif %}
+{{ macro_modals.global_modal('') }}
diff --git a/src/CoreBundle/Resources/views/Macros/modals.html.twig b/src/CoreBundle/Resources/views/Macros/modals.html.twig
new file mode 100644
index 0000000000..d8680eb9a6
--- /dev/null
+++ b/src/CoreBundle/Resources/views/Macros/modals.html.twig
@@ -0,0 +1,22 @@
+{% macro global_modal(title) %}
+    <div class="hidden overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="global-modal">
+        <!--content-->
+        <div class="relative w-auto my-6 mx-auto max-w-6xl">
+            <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+                <!--header-->
+                <div class="flex items-start justify-between p-5 border-b border-solid border-gray-200 rounded-t">
+                    <h3 class="text-3xl font-semibold" id="global-modal-title">{{ title }}</h3>
+                    <button id="close-global-model" class="text-purple-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
+                        {{ 'Close'|trans }}
+                    </button>
+                </div>
+                <!--body-->
+                <div class="relative p-6 flex-auto max-w-6xl" id="global-modal-body"></div>
+                <!--footer-->
+                <div class="flex items-center justify-end p-6 border-t border-solid border-gray-200 rounded-b">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="hidden opacity-25 fixed inset-0 z-40 bg-black" id="global-modal-backdrop"></div>
+{% endmacro %}