diff --git a/assets/css/scss/_sidebar.scss b/assets/css/scss/_sidebar.scss
index b198786bcd..b434c9a2fa 100644
--- a/assets/css/scss/_sidebar.scss
+++ b/assets/css/scss/_sidebar.scss
@@ -170,7 +170,7 @@
   overflow: auto;
   padding: 0;
   position: relative;
-  background: linear-gradient(180deg, #0181bf, #00bcda);
+  background: $default-sidebar;
 
   .nav-header {
     margin-top: 10px;
diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss
index 623cbc29b0..bcb2aa52fb 100644
--- a/assets/css/scss/_variables.scss
+++ b/assets/css/scss/_variables.scss
@@ -38,6 +38,7 @@ $default-warning      : #fc0;
 $default-white        : #fff;
 $default-active       : #006b9e;
 $default-background   : #FFFFFF;
+$default-sidebar      : #0181bf;
 
 // ---------------------------------------------------------
 // OTHERS
diff --git a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig b/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
index ddc6b99750..b7318eefe3 100644
--- a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
+++ b/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
@@ -4,7 +4,16 @@
 
 {% for item in hot_courses %}
     {% if item.title %}
-        <div class="col-xs-12 col-sm-6 col-md-4">
+
+            {% set tools %}
+                {% if item.categoryName != '' %}
+                    <span class="category">{{ item.categoryName }}</span>
+                    <div class="cribbon"></div>
+                {% endif %}
+                <div class="user-actions">{{ item.description_button }}</div>
+
+            {% endset %}
+
             {% set image %}
                 {% if item.is_registered %}
                     <a title="{{ item.title}}" href="{{ item.course_public_url }}">
@@ -16,21 +25,19 @@
             {% endset %}
 
             {% set content %}
-                {% if item.categoryName != '' %}
-                    <span class="category">{{ item.categoryName }}</span>
-                    <div class="cribbon"></div>
-                {% endif %}
+
+
 
                 <div class="card-title">
-                    <div class="user-actions">{{ item.description_button }}</div>
+
                     {% if item.is_registered %}
-                        <h4 class="title">
-                            <a alt="{{ item.title }}" title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title_cut}}</a>
-                        </h4>
+                        <h5 class="title">
+                            <a title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title_cut}}</a>
+                        </h5>
                     {% else %}
-                        <h4 class="title" title="{{ item.title }}">
+                        <h5 class="title" title="{{ item.title }}">
                             {{ item.title_cut}}
-                        </h4>
+                        </h5>
                     {% endif %}
                 </div>
 
@@ -77,7 +84,7 @@
 
             {{ macro.panel('', content, '', '', '', image) }}
 
-        </div>
+
     {% endif %}
 {% endfor %}
 {% endautoescape %}
diff --git a/src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig b/src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig
index 366769cd01..ba0e7972b0 100644
--- a/src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig
+++ b/src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig
@@ -1,47 +1,43 @@
 {% autoescape false %}
-{% if hot_courses is not null and hot_courses is not empty %}
-<script>
-$(document).ready( function() {
-    $('.star-rating li a').on('click', function(event) {
-        var id = $(this).parents('ul').attr('id');
-        $('#vote_label2_' + id).html("{{'Loading'|get_lang}}");
-        $.ajax({
-            url: $(this).attr('data-link'),
-            success: function(data) {
-                $("#rating_wrapper_"+id).html(data);
-                if (data == 'added') {
-                    //$('#vote_label2_' + id).html("{{'Saved'|get_lang}}");
-                }
-                if (data == 'updated') {
-                    //$('#vote_label2_' + id).html("{{'Saved'|get_lang}}");
-                }
-            }
-        });
-    });
-});
-</script>
-
-    <div class="box-header">
-        <h5>
-            {% if is_granted('ROLE_ADMIN') %}
-                <div class="float-right">
-                    <a title="{{ "Hide"|get_lang }}"
-                       alt="{{ "Hide"|get_lang }}"
-                       class="btn btn-light btn-sm"
-                       href="{{ url('admin_settings') }}/search_settings?keyword=show_hot_courses&submit_button=&_qf__search_settings=&category=search_setting"
-                    >
-                        <i class="fas fa-pencil-alt"></i>
-                    </a>
-                </div>
-            {% endif %}
-            {{ "HottestCourses"|get_lang}}
-        </h5>
-    </div>
-    <div class="grid-courses">
-        <div class="row">
-            {% include '@ChamiloCore/default/layout/hot_course_item.html.twig' %}
+    {% if hot_courses is not null and hot_courses is not empty %}
+        <script>
+            $(document).ready(function () {
+                $('.star-rating li a').on('click', function (event) {
+                    var id = $(this).parents('ul').attr('id');
+                    $('#vote_label2_' + id).html("{{ 'Loading'|get_lang }}");
+                    $.ajax({
+                        url: $(this).attr('data-link'),
+                        success: function (data) {
+                            $("#rating_wrapper_" + id).html(data);
+                            if (data == 'added') {
+                                //$('#vote_label2_' + id).html("{{ 'Saved'|get_lang }}");
+                            }
+                            if (data == 'updated') {
+                                //$('#vote_label2_' + id).html("{{ 'Saved'|get_lang }}");
+                            }
+                        }
+                    });
+                });
+            });
+        </script>
+        <div class="box-header">
+            <h5>
+                {% if is_granted('ROLE_ADMIN') %}
+                    <div class="float-right">
+                        <a title="{{ "Hide"|get_lang }}" class="btn btn-light btn-sm"
+                           href="{{ url('admin_settings') }}/search_settings?keyword=show_hot_courses&submit_button=&_qf__search_settings=&category=search_setting"
+                        >
+                            <i class="fas fa-pencil-alt"></i>
+                        </a>
+                    </div>
+                {% endif %}
+                {{ "HottestCourses"|get_lang }}
+            </h5>
         </div>
-    </div>
+        <div class="card-columns">-
+
+                {% include '@ChamiloCore/default/layout/hot_course_item.html.twig' %}
 
-{% endif %}
+        </div>
+    {% endif %}
 {% endautoescape %}
\ No newline at end of file
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index 14980fe1e8..9b9a7b2501 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/src/ThemeBundle/Resources/views/Macros/box.html.twig
@@ -152,18 +152,15 @@
     {% endautoescape %}
 {% endmacro %}
 
-
 {% macro panel(header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
-        <div class="card">
-            {% if top_image %}
-                {{ top_image }}
-            {% endif %}
-
+        <div class="card" style="width: 20rem;">
             {% if header %}
                 <div class="card-header"> {{ header }} </div>
             {% endif %}
-
+            {% if top_image %}
+                {{ top_image }}
+            {% endif %}
             <div class="card-body">
                 {% if title %}
                     <h5 class="card-title">{{ title }}</h5>
@@ -171,11 +168,10 @@
                 {% if subtitle %}
                     <h5 class="card-subtitle mb-2 text-muted">{{ subtitle }}</h5>
                 {% endif %}
-                <p class="card-text">
-                    {{ content }}
-                </p>
-            </div>
 
+                {{ content }}
+
+            </div>
             {% if footer %}
                 <div class="card-footer">
                     {{ footer }}
@@ -183,4 +179,4 @@
             {% endif %}
         </div>
     {% endautoescape %}
-{% endmacro %}
+{% endmacro %}
\ No newline at end of file