diff --git a/assets/css/base.css b/assets/css/base.css
index f3241c5a58..a4f0ba775e 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -7063,23 +7063,11 @@ a.sessionView {
     border: 10px solid #00677C;
     border-radius: 25px;
 }
-
-.modal-body .sectiontitle {
-    font-size: 18px;
-    padding-bottom: 10px;
-    color: #00829C;
-}
-
-.modal-body .sectioncomment {
-    color: #666;
-}
-
 .progress {
     border: 1px solid #c5c5c5;
     background: #E9E9E9;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
 }
-
 .wami-container {
     height: 144px;
     position: relative;
diff --git a/main/inc/ajax/course.ajax.php b/main/inc/ajax/course.ajax.php
index 9da8a2b548..f9895b144c 100755
--- a/main/inc/ajax/course.ajax.php
+++ b/main/inc/ajax/course.ajax.php
@@ -32,8 +32,7 @@ switch ($action) {
     case 'get_course_image':
         $courseId = ChamiloApi::getCourseIdByDirectory($_REQUEST['code']);
         $courseInfo = api_get_course_info_by_id($courseId);
-        var_dump($courseInfo);
-        die;
+
         $image = isset($_REQUEST['image']) && in_array($_REQUEST['image'], ['course_image_large_source', 'course_image_source']) ? $_REQUEST['image'] : '';
         if ($courseInfo && $image) {
             DocumentManager::file_send_for_download($courseInfo[$image]);
diff --git a/main/inc/ajax/course_home.ajax.php b/main/inc/ajax/course_home.ajax.php
index 1579d187ca..50c8dda5ae 100755
--- a/main/inc/ajax/course_home.ajax.php
+++ b/main/inc/ajax/course_home.ajax.php
@@ -157,11 +157,13 @@ switch ($action) {
             while ($description = Database::fetch_object($result)) {
                 $descriptions[$description->id] = $description;
             }
+            $extraField = new ExtraField('course');
+            $fieldValues = $extraField->getDataAndFormattedValues($course_info['real_id']);
+
             // Function that displays the details of the course description in html.
             echo CourseManager::get_details_course_description_html(
                 $descriptions,
-                api_get_system_encoding(),
-                false
+                $fieldValues
             );
         } else {
             echo get_lang('NoDescription');
diff --git a/main/inc/lib/course.lib.php b/main/inc/lib/course.lib.php
index 658812c43f..48952afe77 100755
--- a/main/inc/lib/course.lib.php
+++ b/main/inc/lib/course.lib.php
@@ -3265,47 +3265,30 @@ class CourseManager
      */
     public static function get_details_course_description_html(
         $descriptions,
-        $charset,
-        $action_show = true
+        $fieldValues
     ) {
         $data = null;
+        $info = null;
+        $data['extrafield'] = $fieldValues;
         if (isset($descriptions) && count($descriptions) > 0) {
             foreach ($descriptions as $description) {
-                $data .= '<div class="sectiontitle">';
-                if (api_is_allowed_to_edit() && $action_show) {
-                    //delete
-                    $data .= '<a href="'.api_get_self().'?'.api_get_cidreq().'&action=delete&description_id='.$description->id.'" onclick="javascript:if(!confirm(\''.addslashes(api_htmlentities(
-                        get_lang('ConfirmYourChoice'),
-                                ENT_QUOTES,
-                        $charset
-                    )).'\')) return false;">';
-                    $data .= Display::return_icon(
-                        'delete.gif',
-                        get_lang('Delete'),
-                        ['style' => 'vertical-align:middle;float:right;']
-                    );
-                    $data .= '</a> ';
-                    //edit
-                    $data .= '<a href="'.api_get_self().'?'.api_get_cidreq().'&description_id='.$description->id.'">';
-                    $data .= Display::return_icon(
-                        'edit.png',
-                        get_lang('Edit'),
-                        ['style' => 'vertical-align:middle;float:right; padding-right:4px;'],
-                        ICON_SIZE_SMALL
-                    );
-                    $data .= '</a> ';
+
+                if($description->description_type === '1'){
+                    $data['description'] = [
+                        'title' => $description->title,
+                        'content' => Security::remove_XSS($description->content)
+                    ];
                 }
-                $data .= $description->title;
-                $data .= '</div>';
-                $data .= '<div class="sectioncomment">';
-                $data .= Security::remove_XSS($description->content);
-                $data .= '</div>';
             }
-        } else {
-            $data .= '<em>'.get_lang('ThisCourseDescriptionIsEmpty').'</em>';
         }
+        $template = new Template(null);
+        $essence = new Essence\Essence();
+        $template->assign('essence', $essence);
+        $template->assign('data', $data);
+        $layout = $template->get_template('auth/modal_description.html.twig');
+        $info = $template->fetch($layout);
 
-        return $data;
+        return $info;
     }
 
     /**
diff --git a/main/template/default/auth/modal_description.html.twig b/main/template/default/auth/modal_description.html.twig
new file mode 100644
index 0000000000..c4ac214d90
--- /dev/null
+++ b/main/template/default/auth/modal_description.html.twig
@@ -0,0 +1,22 @@
+{% autoescape false %}
+    <div class="popup-course">
+        {% set video = '' %}
+        {% for item in data.extrafield %}
+            {% if item.text == 'VideoUrl' %}
+                {% set video = item.value %}
+            {% endif %}
+        {% endfor %}
+
+        {% if video %}
+        <div class="popup-video">
+            <div class="embed-responsive embed-responsive-16by9">
+                {{ essence.replace(video) }}
+            </div>
+        </div>
+            {% endif %}
+        <div class="popup-content">
+            <h2 class="title">{{ data.description.title }}</h2>
+            {{ data.description.content }}
+        </div>
+    </div>
+{% endautoescape %}
\ No newline at end of file