diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index 8f60206be1..3d6db9e84a 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -1666,8 +1666,8 @@ div.admin_section h4 {
     width: 310px;
     height: 200px;
     overflow-y: auto;
-    top: -5px;
-    left: 25px;
+    top: 0;
+    right: 0;
 }
 
 #course_settings h3 img {
diff --git a/main/inc/lib/course.lib.php b/main/inc/lib/course.lib.php
index ba6d64f497..d234354517 100755
--- a/main/inc/lib/course.lib.php
+++ b/main/inc/lib/course.lib.php
@@ -3570,11 +3570,33 @@ class CourseManager
             }
 
             $params = array();
+            
+            $thumbnails = null;
+            $image = null;
+            
+            
+            if ($showCustomIcon === 'true' && $iconName != 'course.png') {
+                $thumbnails = $course_info['course_image'];
+                $image = $course_info['course_image_large'];
+            }else{
+                $image = Display::return_icon('session_default.png', null, null, null,null, true);
+            }
+            
             $params['course_id'] = $course['id'];
-            $params['actions'] = '';
-
+            $params['edit_actions'] = '';
+            $params['document'] = '';
             if (api_is_platform_admin()) {
-                $params['actions'] .= api_get_path(WEB_CODE_PATH) . 'course_info/infocours.php?cidReq=' . $course['code'];
+                $params['edit_actions'] .= api_get_path(WEB_CODE_PATH) . 'course_info/infocours.php?cidReq=' . $course['code'];
+                if($load_dirs){
+                    $params['document'] = '<a id="document_preview_' . $course_info['real_id'] . '_0" class="document_preview btn btn-default btn-sm" href="javascript:void(0);">'
+                               . Display::returnFontAwesomeIcon('folder-open') . '</a>';
+                    $params['document'] .= Display::div('', array('id' => 'document_result_' . $course_info['real_id'] . '_0', 'class' => 'document_preview_container'));
+                }
+            }
+            if ($load_dirs) {
+                $params['document'] = '<a id="document_preview_' . $course_info['real_id'] . '_0" class="document_preview btn btn-default btn-sm" href="javascript:void(0);">'
+                    . Display::returnFontAwesomeIcon('folder-open') . '</a>';
+                $params['document'] .= Display::div('', array('id' => 'document_result_' . $course_info['real_id'] . '_0', 'class' => 'document_preview_container'));
             }
 
             $courseUrl = '';
@@ -3592,8 +3614,11 @@ class CourseManager
             
             $params['visibility'] = $course_info['visibility'];
             $params['link'] = $courseUrl;
-            $params['title'] = $course_info['title'] . $visualCode;
+            $params['thumbnails'] = $thumbnails;
+            $params['image'] = $image;
+            $params['title'] = $course_info['title'];
             $params['teachers'] = $teachers;
+            
 
             if ($course_info['visibility'] != COURSE_VISIBILITY_CLOSED) {
                 $params['notifications'] = $showNotification;
diff --git a/main/template/default/user_portal/classic_courses.tpl b/main/template/default/user_portal/classic_courses.tpl
index 9421e8e4a8..ca7844f431 100644
--- a/main/template/default/user_portal/classic_courses.tpl
+++ b/main/template/default/user_portal/classic_courses.tpl
@@ -1,5 +1,4 @@
 <!-- view classic list special course -->
-
 <div class="classic-courses">
     {% for item in special_courses %}
         <div class="panel panel-default">
@@ -62,12 +61,76 @@
         </div>
     {% endfor %}
 </div>
-
-
 <!-- view classic list course -->
-{% for course in courses %}
 <div class="classic-courses">
-    {% for item in course %}
+    <!-- courses in category -->
+    {% for category in courses.in_category %}
+    <div class="panel panel-default">
+        <div id="category-{{ category.id_category }}" class="panel-heading">
+            {{ category.title_category }}
+        </div>
+        <div class="panel-body">
+            {% for item in category.courses %}
+                <div class="row">
+                    <div class="col-md-2">
+                        <a class="thumbnail">
+                            {% if item.thumbnails != '' %}
+                                <img src="{{ item.thumbnails }}" title="{{ item.title }}" alt="{{ item.title }}"/>
+                            {% else %}
+                                {{ 'blackboard.png' | img(48, item.title ) }}
+                            {% endif %}
+                        </a>
+                    </div>
+                    <div class="col-md-10">
+                        {% if item.edit_actions != '' %}
+                            <div class="pull-right">
+                                {% if item.document == '' %}
+                                    <a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
+                                        <i class="fa fa-pencil" aria-hidden="true"></i>
+                                    </a>
+                                {% else %}
+                                    <div class="btn-group" role="group">
+                                        <a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
+                                            <i class="fa fa-pencil" aria-hidden="true"></i>
+                                        </a>
+                                        {{ item.document }}
+                                    </div> 
+                                {% endif %}
+                            </div>
+                        {% endif %}
+                        <h4 class="course-items-title">
+                            {% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') %}
+                                {{ item.title }} {{ item.code_course }}
+                            {% else %}
+                                <a href="{{ item.link }}">
+                                    {{ item.title }} {{ item.code_course }}
+                                </a>
+                                {{ item.notifications }}
+                            {% endif %}
+                        </h4>
+                        <div class="course-items-session">
+                            {{ 'teacher.png' | img(16, 'Professor'|get_lang ) }}
+                            <ul class="teachers">
+                                {% for teacher in item.teachers %}
+                                <li>
+                                    {% set counter = counter + 1 %}
+                                    {% if counter > 1 %} | {% endif %}
+                                    <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                                        {{ teacher.firstname }} {{ teacher.lastname }}
+                                    </a>
+                                </li>
+                                {% endfor %}
+                            </ul>  
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endfor %}
+    <!-- end courses in category -->
+    <!-- courses with out categories -->
+    {% for item in courses.not_category %}
         <div class="panel panel-default">
             <div class="panel-body">
                 <div class="row">
@@ -126,5 +189,5 @@
             </div>
         </div>
     {% endfor %}
+    <!-- end courses with out categories -->
 </div>
-{% endfor %}
\ No newline at end of file