diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index 26e316cd32..63a0369c05 100644
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -629,6 +629,15 @@ footer {
       font-size: 12px;
     }
   }
+  .card-image{
+    position: relative;
+    .card-tools{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
   .category{
     position: absolute;
     border-radius: 10px;
diff --git a/main/auth/courses_categories.php b/main/auth/courses_categories.php
index f01159cbe5..5750316f09 100755
--- a/main/auth/courses_categories.php
+++ b/main/auth/courses_categories.php
@@ -253,7 +253,7 @@ if ($showCourses && $action != 'display_sessions') {
                 }
 
                 $courseList[] = [
-                    'real_id' => $course['real_id'],
+                    'id' => $course['real_id'],
                     'title' => $course['title'],
                     'category' => $course['category_title'],
                     'image' => $courseMediumImage,
diff --git a/main/inc/lib/course.lib.php b/main/inc/lib/course.lib.php
index 51f28fb170..658812c43f 100755
--- a/main/inc/lib/course.lib.php
+++ b/main/inc/lib/course.lib.php
@@ -6733,10 +6733,10 @@ class CourseManager
             $title = $course['title'];
             $url = api_get_path(WEB_CODE_PATH).'inc/ajax/course_home.ajax.php?a=show_course_information&code='.$course['code'];
             $html = Display::url(
-                Display::returnFontAwesomeIcon('info-circle', 'lg'),
+                Display::returnFontAwesomeIcon('info-circle'),
                 $url,
                 [
-                    'class' => 'ajax btn btn-default btn-sm',
+                    'class' => 'ajax btn btn-light btn-sm',
                     'data-title' => $title,
                     'title' => get_lang('Description'),
                     'aria-label' => get_lang('Description'),
diff --git a/main/template/default/auth/course_catalog.html.twig b/main/template/default/auth/course_catalog.html.twig
index 41c09e09ac..176f67e0f7 100644
--- a/main/template/default/auth/course_catalog.html.twig
+++ b/main/template/default/auth/course_catalog.html.twig
@@ -26,6 +26,10 @@
                     <a href="{{ item.url }}" title="{{ item.title }}">
                         <img class="card-img-top"  alt="{{ item.title }}" src="{{ item.image }}" data-holder-rendered="true" style="width: 100%; display: block;">
                     </a>
+
+                    <div class="card-tools">
+                        {{ item.description_ajax }}
+                    </div>
                 {% endset %}
                 {% set content %}
                     <div class="card-title">
@@ -62,7 +66,7 @@
                     </div>
                     {% endif %}
                 {% endset %}
-                {{ macro.panel_course(item.real_id, '', content, '', '', '', image) }}
+                {{ macro.panel_course(item.id, '', content, '', '', '', image) }}
             </div>
         {% endfor %}
     </div>
diff --git a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
index 703122fb73..208a03995a 100644
--- a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
@@ -134,16 +134,19 @@
 </div>
 {# Global modal, load content by AJAX call to href attribute on anchor tag with 'ajax' class #}
 <div class="modal fade" id="global-modal" tabindex="-1" role="dialog" aria-labelledby="global-modal-title" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
+    <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | trans }}">
+                <h5 class="modal-title" id="global-modal-title">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
-                <h4 class="modal-title" id="global-modal-title">&nbsp;</h4>
             </div>
             <div class="modal-body">
             </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index a4462d9d62..eaea587a21 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/src/ThemeBundle/Resources/views/Macros/box.html.twig
@@ -187,12 +187,14 @@
 
 {% macro panel_course(id, header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
-        <div class="card-course course-{{ id }} mt-3 mb-3">
+        <div class="card card-course course-{{ id }} mt-3 mb-3">
             {% if header %}
                 <div class="card-header"> {{ header }} </div>
             {% endif %}
             {% if top_image %}
-                {{ top_image }}
+                <div class="card-image">
+                    {{ top_image }}
+                </div>
             {% endif %}
             <div class="card-body p-3">
                 {% if title %}