diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index 06ddc7245a..ac65dc46d0 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -10106,17 +10106,37 @@ ul.dropdown-menu.inner > li > a {
 .summary-course .list-donut .easy-donut{
     text-align: center;
 }
-.summary-course .state-time .stat-heading{
+.summary-course .state{
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+.summary-course .state .stat-heading{
     text-align: center;
+    font-size: 12px;
 }
-.summary-course .state-time .stat-text {
-    font-size: 24px;
+.summary-course .state .stat-text {
+    font-size: 22px;
     text-align: center;
 }
-.summary-course .state-time .stat-icon{
+.summary-course .state .stat-icon{
     font-size: 30px;
     text-align: center;
 }
+.summary-course .easypiechart-legend {
+    font-size: 12px;
+}
+.summary-course .list-info{
+    margin-bottom: 0;
+}
+.summary-course .list-info dt,
+.summary-course .list-info dd
+{
+    padding-top: 7px;
+    padding-bottom: 7px;
+}
+.summary-course .list-info .text-color{
+    color: #0A649F;
+}
 @media (min-width: 768px) {
     .clear-rows-6-4-3 .col-sm-6:nth-child(2n+1) {
         clear: left;
diff --git a/main/inc/lib/myspace.lib.php b/main/inc/lib/myspace.lib.php
index c2461e0ec3..74cbe6b355 100644
--- a/main/inc/lib/myspace.lib.php
+++ b/main/inc/lib/myspace.lib.php
@@ -1042,7 +1042,7 @@ class MySpace
      */
     public static function display_tracking_course_overview()
     {
-        $t_head = '<table style="width: 100%;border:0;padding:0;border-collapse:collapse;table-layout: fixed">';
+        /*$t_head = '<table style="width: 100%;border:0;padding:0;border-collapse:collapse;table-layout: fixed">';
         $t_head .= '<tr>';
         $t_head .= '<th style="padding:0;border-bottom:0"><span>'.cut(get_lang('AvgTimeSpentInTheCourse'), 6, true).'</span></th>';
         $t_head .= '<th style="padding:0;border-bottom:0"><span>'.cut(get_lang('AvgStudentsProgress'), 6, true).'</span></th>';
@@ -1052,21 +1052,32 @@ class MySpace
         $t_head .= '<th width="105px" style="border-bottom:0"><span>'.get_lang('TotalExercisesScoreObtained').'</span></th>';
         $t_head .= '<th style="padding:0;border-bottom:0"><span>'.cut(get_lang('TotalExercisesAnswered'), 6, true).'</span></th>';
         $t_head .= '<th style="padding:0;border-bottom:0;border-right:0;"><span>'.get_lang('LatestLogin').'</span></th>';
-        $t_head .= '</tr></table>';
+        $t_head .= '</tr></table>';*/
         $params = ['view' => 'admin', 'display' => 'courseoverview'];
         $table = new SortableTable(
             'tracking_session_overview',
             ['MySpace', 'get_total_number_courses'],
             ['MySpace', 'get_course_data_tracking_overview'],
-            1
+            1,
+            20,
+            'ASC',
+            null,[
+                'class' => 'table table-transparent'
+            ]
         );
         $table->additional_parameters = $params;
 
-        $table->set_header(0, '', false, null, ['style' => 'display: none']);
-        $table->set_header(1, get_lang('Course'), true, ['style' => 'font-size:8pt'], ['style' => 'font-size:8pt']);
-        $table->set_header(2, $t_head, false, ['style' => 'width:90%;border:0;padding:0;font-size:7.5pt;'], ['style' => 'width:90%;padding:0;font-size:7.5pt;']);
-        $table->set_column_filter(2, ['MySpace', 'course_tracking_filter']);
-        $table->display();
+        //$table->set_header(0, '', false, null, ['style' => 'display: none']);
+        //$table->set_header(1, get_lang('Course'), true, ['style' => 'font-size:8pt'], ['style' => 'font-size:8pt']);
+        //$table->set_header(2, $t_head, false, ['style' => 'width:90%;border:0;padding:0;font-size:7.5pt;'], ['style' => 'width:90%;padding:0;font-size:7.5pt;']);
+        $table->set_column_filter(0, ['MySpace', 'course_tracking_filter']);
+
+        $tableContent = $table->return_table();
+
+        $tpl = new Template('', false, false, false, false, false, false);
+        $tpl->assign('table', $tableContent);
+        $templateName = $tpl->get_template('my_space/course_summary.tpl');
+        $tpl->display($templateName);
     }
 
     /**
@@ -1109,9 +1120,7 @@ class MySpace
         foreach ($courses as $course) {
             $list[] = [
                 '0' => $course['code'],
-                'col0' => $course['code'],
-                '1' => $course['title'],
-                'col1' => $course['title'],
+                'col0' => $course['code']
             ];
         }
 
@@ -1133,8 +1142,8 @@ class MySpace
         $courseInfo = api_get_course_info($course_code);
         $courseId = $courseInfo['real_id'];
 
-        // the table header
-        $return = '<table class="data_table" style="width: 100%;border:0;padding:0;border-collapse:collapse;table-layout: fixed">';
+        $tpl = new Template('', false, false, false, false, false, false);
+        $data = null;
 
         // database table definition
         $tbl_course_rel_user = Database::get_main_table(TABLE_MAIN_COURSE_USER);
@@ -1245,26 +1254,31 @@ class MySpace
         } else {
             $total_score = '-';
         }
-        $return .= '<tr>';
-        // time spent in the course
-        $return .= '    <td style="width:164px;">'.api_time_to_hms($time_spent).'</td>';
-        // student progress in course
-        $return .= '    <td>'.$avg_progress.'</td>';
-        // student score
-        $return .= '    <td>'.$avg_score.'</td>';
-        // student messages
-        $return .= '    <td>'.$nb_messages.'</td>';
-        // student assignments
-        $return .= '    <td>'.$nb_assignments.'</td>';
-        // student exercises results (obtained score, maximum score, number of exercises answered, score percentage)
-        $return .= '<td width="105px;">'.$total_score.'</td>';
-        $return .= '<td>'.$total_questions_answered.'</td>';
-        // last connection
-        $return .= '    <td>'.$last_login_date.'</td>';
-        $return .= '</tr>';
-        $return .= '</table>';
 
-        return $return;
+
+        $data = [
+            'course_code' => $course_code,
+            'id' => $courseId,
+            'image' => $courseInfo['course_image_large'],
+            'image_small' => $courseInfo['course_image'],
+            'title' => $courseInfo['title'],
+            'url' => $courseInfo['course_public_url'],
+            'category' => $courseInfo['categoryName'],
+            'time_spent' => api_time_to_hms($time_spent),
+            'avg_progress' => $avg_progress,
+            'avg_score' => $avg_score,
+            'number_message' => $nb_messages,
+            'number_assignments' => $nb_assignments,
+            'total_score' => $total_score,
+            'questions_answered' => $total_questions_answered,
+            'last_login' => $last_login_date
+        ];
+
+        $tpl->assign('data', $data);
+        $layout = $tpl->get_template('my_space/partials/tracking_course_overview.tpl');
+        $content = $tpl->fetch($layout);
+
+        return $content;
     }
 
     /**
diff --git a/main/mySpace/admin_view.php b/main/mySpace/admin_view.php
index 25c4825c63..6cbd2472c3 100644
--- a/main/mySpace/admin_view.php
+++ b/main/mySpace/admin_view.php
@@ -11,6 +11,8 @@ $exportCSV = isset($_GET['export']) && $_GET['export'] === 'csv' ? true : false;
 $display = isset($_GET['display']) ? Security::remove_XSS($_GET['display']) : null;
 
 $htmlHeadXtra[] = api_get_jqgrid_js();
+$htmlHeadXtra[] = '<script type="text/javascript" src="'.api_get_path(WEB_PUBLIC_PATH).'assets/jquery.easy-pie-chart/dist/jquery.easypiechart.js"></script>';
+
 // the section (for the tabs)
 $this_section = SECTION_TRACKING;
 
diff --git a/main/template/default/admin/user_information.tpl b/main/template/default/admin/user_information.tpl
index ca71698979..8e032059c5 100644
--- a/main/template/default/admin/user_information.tpl
+++ b/main/template/default/admin/user_information.tpl
@@ -36,7 +36,7 @@
                 {{ display.card_widget('LatestLoginInPlatform'|get_lang ,user.last_connection ,'calendar') }}
 
                 {{ display.card_widget('LegalAccepted'|get_lang ,user.legal.datetime ,'gavel' , user.legal.icon) }}
-                
+
             </div>
             {% if social_tool %}
             <div class="list-box-widget">
diff --git a/main/template/default/my_space/course_summary.tpl b/main/template/default/my_space/course_summary.tpl
index 6f33f16908..2b9bbd7d7d 100644
--- a/main/template/default/my_space/course_summary.tpl
+++ b/main/template/default/my_space/course_summary.tpl
@@ -1,3 +1,21 @@
 <div class="summary-legend">
     {{ table }}
-</div>
\ No newline at end of file
+</div>
+<script type="text/javascript">
+    $(function() {
+        $('.easypiechart-blue').easyPieChart({
+            scaleColor: false,
+            barColor: '#30a5ff',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+    $(function() {
+        $('.easypiechart-red').easyPieChart({
+            scaleColor: false,
+            barColor: '#f9243f',
+            lineWidth:8,
+            trackColor: '#f2f2f2'
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/main/template/default/my_space/partials/tracking_course_overview.tpl b/main/template/default/my_space/partials/tracking_course_overview.tpl
new file mode 100644
index 0000000000..923a98bef7
--- /dev/null
+++ b/main/template/default/my_space/partials/tracking_course_overview.tpl
@@ -0,0 +1,99 @@
+{% import 'default/macro/macro.tpl' as display %}
+
+{% set content %}
+    <div class="summary-course" id="summary-{{ data.id }}">
+        <div class="row">
+            <div class="col-md-2">
+                <div class="course">
+                    <h4 class="title">{{ data.title }}</h4>
+                    <div class="image">
+                        <img src="{{ data.image_small }}" class="img-responsive"/>
+                    </div>
+                    <div class="info">
+                        {% if data.course_code %}
+                            <p><strong>{{ 'WantedCourseCode'|get_lang }}</strong><br>{{ data.course_code }}</p>
+                        {% endif %}
+                        {% if data.category %}
+                            <p><strong>{{ 'CourseFaculty'|get_lang }}</strong><br>{{ data.category }}</p>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <div class="state">
+                    <div class="stat-text">
+                        <i class="fa fa-clock-o" aria-hidden="true"></i> {{ data.time_spent }}
+                    </div>
+                    <div class="stat-heading">
+                        {{ 'TimeSpentInTheCourse'|get_lang }}
+                    </div>
+                </div>
+                <div class="state">
+                    <div class="stat-text">
+                        {{ data.total_score }}
+                    </div>
+                    <div class="stat-heading">
+                        {{ 'TotalExercisesScoreObtained'|get_lang }}
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="list-donut">
+                    <div class="easy-donut">
+                        <div class="easypiechart-blue easypiechart" title="{{ 'Progress'|get_lang }}"  data-percent="{{ data.avg_progress }}">
+                            <span class="percent">{{ data.avg_progress }}%</span>
+                        </div>
+                        <div class="easypiechart-legend">
+                            {{ 'AvgStudentsProgress'|get_lang }}
+                        </div>
+                    </div>
+                    <div class="easy-donut">
+                        <div class="easypiechart-blue easypiechart" title="{{ 'Progress'|get_lang }}"  data-percent="{{ data.avg_score }}">
+                            <span class="percent">{{ data.avg_score }}%</span>
+                        </div>
+                        <div class="easypiechart-legend">
+                            {{ 'AvgCourseScore'|get_lang }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+
+                <dl class="dl-horizontal list-info">
+                    <dt>
+                        <span title="{{ 'TotalNumberOfMessages'|get_lang }}">{{ 'TotalNumberOfMessages'|get_lang }}</span>
+                    </dt>
+                    <dd>
+                        <span class="text-color"><i class="fa fa-comments" aria-hidden="true"></i></span>
+                        <span class="text-color">{{ data.number_message }}</span>
+                    </dd>
+                    <dt>
+                        <span title="{{ 'TotalNumberOfAssignments'|get_lang }}">{{ 'TotalNumberOfAssignments'|get_lang }}</span>
+                    </dt>
+                    <dd>
+                        <span class="text-color"><i class="fa fa-pencil" aria-hidden="true"></i></span>
+                        <span class="text-color">{{ data.number_assignments }}</span>
+                    </dd>
+                    <dt>
+                        <span title="{{ 'TotalExercisesAnswered'|get_lang }}">{{ 'TotalExercisesAnswered'|get_lang }}</span>
+                    </dt>
+                    <dd>
+                        <span class="text-color"><i class="fa fa-file-text" aria-hidden="true"></i></span>
+                        <span class="text-color">{{ data.questions_answered }}</span>
+                    </dd>
+                    <dt>
+                        <span title="{{ 'LatestLogin'|get_lang }}">{{ 'LatestLogin'|get_lang }}</span>
+                    </dt>
+                    <dd>
+                        <span class="text-color"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
+                        <span class="text-color">{{ data.last_login }}</span>
+                    </dd>
+
+                </dl>
+
+            </div>
+        </div>
+    </div>
+{% endset %}
+
+{{ display.panel('',content ,'') }}
\ No newline at end of file