diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index 16a6dc1135..d130984c17 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -9,9 +9,7 @@
 pre {
     margin-top:50px !important;
 }
-html,body{
-  height: 100%;
-}
+
 #page-wrap{
   margin: auto;
   height: auto;
@@ -59,7 +57,10 @@ select {
   padding-top: 10px;
   margin-top: 5px;
 }
-
+.section-page .page-header h3{
+    font-size:22px;
+    margin-top:5px;
+}
 #announcements-slider .left, #announcements-slider .right{
   position: absolute;
   top: 50%;
@@ -6204,7 +6205,58 @@ div#chat-remote-video video {
   margin-left: 5%;
   text-align: center;
 }
-
+.my-progress .profile-user{
+    padding:10px;
+}
+.my-progress .avatar-profile .img-responsive{
+    margin:auto;
+}
+.my-progress .username{
+    font-size:20px;
+    text-align:center;
+}
+.my-progress .star-progress{
+    font-size:22px;
+}
+.my-progress .star-progress .fa-star{
+    color: #e4c200;
+}
+.my-progress .star-progress .fa-star.in{
+    color: #c2c2c2;
+}
+.my-progress .list-course{
+    padding:0;
+    margin:0;
+}
+.my-progress .list-course li{
+    display:block;
+    padding-top:5px;
+    padding-bottom:5px;
+}
+.my-progress .list-course li a{
+    color:#666;
+}
+.my-progress .list-course li a.active{
+    color:#00829C;
+}
+.my-progress .embed-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+.my-progress .embed-container iframe {
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border:none;
+}
+.section-status .page-header h2{
+    font-size:22px;
+    margin-top:5px;
+}
 p.bg-primary,
 p.bg-success,
 p.bg-info,
diff --git a/main/inc/lib/tracking.lib.php b/main/inc/lib/tracking.lib.php
index 7182f7055b..c874c71bd1 100755
--- a/main/inc/lib/tracking.lib.php
+++ b/main/inc/lib/tracking.lib.php
@@ -153,15 +153,17 @@ class Tracking
         }
 
         if ($origin != 'tracking') {
+            $output .= '<div class="section-status">';
             $output .= Display::page_header(get_lang('ScormMystatus'));
+            $output .= '</div>';
         }
 
         $actionColumn = null;
         if ($type == 'classic') {
             $actionColumn = ' <th>' . get_lang('Actions') . '</th>';
         }
-
-        $output .= '<table class="data_table">
+        $output .= '<div class="table-responsive">';
+        $output .= '<table class="table">
             <tr>
                 <th width="16">' . $extend_all_link . '</th>
                 <th colspan="4">
@@ -1068,6 +1070,7 @@ class Tracking
            </tr>';
 
         $output .= "</table>";
+        $output .= '</div>';
 
         if (!empty($export_csv)) {
             $temp = array(
diff --git a/main/template/default/gamification/my_progress.tpl b/main/template/default/gamification/my_progress.tpl
index 5a045b9731..21f427e328 100644
--- a/main/template/default/gamification/my_progress.tpl
+++ b/main/template/default/gamification/my_progress.tpl
@@ -1,30 +1,57 @@
-<div class="row">
+<div class="my-progress row">
     <div class="col-md-3">
-        <div class="well">
-            {{ user_avatar }}
-            <p>{{ user.getCompleteName() }}</p>
-            <p>{{ 'Stars'|get_lang ~ ' ' ~ gamification_stars }}</p>
-            <p>{{ 'XPoints'|get_lang|format(gamification_points) }}</p>
-            <p>{{ 'GamificationProgress'|get_lang ~ ' ' ~ gamification_progress }}</p>
-        </div>
+        <div class="panel panel-default">
+            <div class="panel-body">
+                <div class="profile-user">
+                    {{ user_avatar }}
+                    <div class="username">{{ user.getCompleteName() }}</div>
+                    <div class="star-points">{{ 'Stars'|get_lang ~ ' ' ~ gamification_stars }}</div>
+                    <div class="star-progress">
+                        <i class="fa fa-star"></i>
+                        <i class="fa fa-star"></i>
+                        <i class="fa fa-star in"></i>
+                        <i class="fa fa-star in"></i>
+                        <i class="fa fa-star in"></i>
+                    </div>
+                    <!-- <div class="bar">{{ 'XPoints'|get_lang|format(gamification_points) }}</div> -->
+
+                    <div class="progress">
+                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{ gamification_progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ gamification_progress }}%">
+                            <span class="sr-only">{{ gamification_progress }} Complete (success)</span>
+                        </div>
+                    </div>
 
-        <h4>{{ 'ShowProgress'|get_lang }}</h4>
-        <div class="list-group">
-            {% for session in sessions %}
-                <a href="{{ _p.self ~ '?' ~ {"session_id": session.getId}|url_encode() }}" class="list-group-item {{ current_session and session.getId == current_session.getId ? 'active' }}">{{ session.getName }}</a>
-            {% endfor %}
+                    <div class="progress-percentage">{{ 'GamificationProgress'|get_lang ~ ' ' ~ gamification_progress }} %</div>
+                </div>
+            </div>
+        </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                {{ 'ShowProgress'|get_lang }}
+            </div>
+            <div class="panel-body">
+                <ul class="list-course">
+                    {% for session in sessions %}
+                    <li><a href="{{ _p.self ~ '?' ~ {"session_id": session.getId}|url_encode() }}" class="list-course-item {{ current_session and session.getId == current_session.getId ? 'active' }}">
+                            <i class="fa fa-chevron-circle-right"></i> {{ session.getName }}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
     </div>
 
     <div class="col-md-9">
         {% if current_session %}
-            <h2 class="page-header">{{ current_session.getName() }}</h2>
-
-            {% for course_id, course in session_data %}
-                <h3>{{ course.title }}</h3>
 
-                <div class="panel-group" id="course-accordion" role="tablist" aria-multiselectable="true">
-                    {% for stats_url in course.stats %}
+            <div class="panel panel-default">
+                <div class="panel-heading"><i class="fa fa-book"></i> {{ current_session.getName() }}</div>
+                <div class="panel-body">
+                    {% for course_id, course in session_data %}
+                    <h3><img src="{{ 'blackboard_blue.png'|icon(32) }}"/> {{ course.title }}</h3>
+                    <div class="panel-group" id="course-accordion" role="tablist" aria-multiselectable="true">
+                        {% for stats_url in course.stats %}
                         {% set panel_id = course_id ~ '-' ~ loop.index %}
                         <div class="panel panel-default">
                             <div class="panel-heading" role="tab" id="heading-{{ panel_id }}">
@@ -36,15 +63,19 @@
                             </div>
                             <div id="collapse-{{ panel_id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-{{ panel_id }}">
                                 <div class="panel-body">
-                                    <div class="embed-responsive embed-responsive-4by3">
+                                    <div class="embed-container">
                                         <iframe src="{{ _p.web_main ~ stats_url.1 }}"></iframe>
                                     </div>
                                 </div>
                             </div>
                         </div>
+                        {% endfor %}
+                    </div>
                     {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
+
+
         {% endif %}
     </div>
 </div>
diff --git a/main/template/default/layout/page_body.tpl b/main/template/default/layout/page_body.tpl
index 1fb3a4e1c5..ce5a28f3ca 100755
--- a/main/template/default/layout/page_body.tpl
+++ b/main/template/default/layout/page_body.tpl
@@ -9,8 +9,10 @@
 
 {#  Page header #}
 {% if header != '' %}
-    <div class="page-header">
-        <h2>{{ header }}</h2>
+    <div class="section-page">
+        <div class="page-header">
+            <h3>{{ header }}</h3>
+        </div>
     </div>
 {% endif %}