diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css
index 5e43b87eca..a05b94f8bd 100644
--- a/app/Resources/public/css/base.css
+++ b/app/Resources/public/css/base.css
@@ -2669,8 +2669,8 @@ form .formw .freeze {
 .skill-legend-badges{
   color: #3A87AD;
 }
-.page-skill .panel-heading a{
-  color: #ffffff;
+.page-skill .panel-default{
+    border-color:#DDDDDD;
 }
 .page-skill .btn-default{
   background-color: #F6F6F6;
@@ -2692,7 +2692,17 @@ form .formw .freeze {
   stroke: #000000;
   stroke-width: 0.5px;
 }
-
+.items-user .avatar-user{
+    text-align: center;
+    margin-bottom: 10px;
+}
+.items-user p{
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+.items-user .list-group{
+    font-size: 12px;
+}
 table#skill_holder {
   margin-top: 15px;
 }
diff --git a/main/template/default/skill/profile.tpl b/main/template/default/skill/profile.tpl
index 3f1b779a5d..f4dae92958 100755
--- a/main/template/default/skill/profile.tpl
+++ b/main/template/default/skill/profile.tpl
@@ -46,16 +46,19 @@
 
         <div class="row">
             {% for user in user_list %}
-                <div class="col-sm-4 col-lg-3">
+                <div class="col-md-3">
+                    <div class="items-user">
                     <div class="panel panel-default">
                         <div class="panel-body">
-                            <img width="96" src="{{ user.user.avatar }}" class="center-block">
-                            <h3 class="text-center">
+                            <div class="avatar-user">
+                                <img  class="img-circle" width="100" src="{{ user.user.avatar }}" class="center-block">
+                            </div>
+                            <p class="text-center"><em class="fa fa-user"></em> 
                                 <a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}" target="_blank">
                                     {{ user['user'].complete_name_with_username }}
                                 </a>
-                            </h3>
-                            <p class="lead text-center">{{ "AchievedSkills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</p>
+                            </p>
+                            <p class="text-center"><em class="fa fa-graduation-cap"></em> {{ "AchievedSkills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</p>
                         </div>
                         <ul class="list-group">
                             {% for skill_data in user.skills %}
@@ -75,6 +78,7 @@
                             {% endfor %}
                         </ul>
                     </div>
+                    </div>    
                 </div>
             {% endfor %}
         </div>
diff --git a/main/template/default/skill/profile_item.tpl b/main/template/default/skill/profile_item.tpl
index cc4a9ff9eb..ed42e478ea 100755
--- a/main/template/default/skill/profile_item.tpl
+++ b/main/template/default/skill/profile_item.tpl
@@ -7,10 +7,10 @@
                     <td>{{ profile.name }}</td>
                     <td class="text-right">
                         <div class="btn-group btn-group-sm">
-                            <button class="btn btn-info btn-sm skill-wheel-load-profile" aria-label="{{ 'Search'|get_lang }}" title="{{ 'Search'|get_lang }}" data-id="{{ profile.id }}">
+                            <button class="btn btn-default btn-sm skill-wheel-load-profile" aria-label="{{ 'Search'|get_lang }}" title="{{ 'Search'|get_lang }}" data-id="{{ profile.id }}">
                                 <span class="fa fa-search" aria-hidden="true"></span>
                             </button>
-                            <button class="btn btn-danger btn-sm skill-wheel-delete-profile" aria-label="{{ 'Delete'|get_lang }}" title="{{ 'Delete'|get_lang }}" data-id="{{ profile.id }}">
+                            <button class="btn btn-default btn-sm skill-wheel-delete-profile" aria-label="{{ 'Delete'|get_lang }}" title="{{ 'Delete'|get_lang }}" data-id="{{ profile.id }}">
                                 <span class="fa fa-trash" aria-hidden="true"></span>
                             </button>
                         </div>
diff --git a/main/template/default/skill/skill_wheel.tpl b/main/template/default/skill/skill_wheel.tpl
index 1520d23327..e59376c37a 100644
--- a/main/template/default/skill/skill_wheel.tpl
+++ b/main/template/default/skill/skill_wheel.tpl
@@ -60,11 +60,11 @@
                 <td>' + skill_name + '</td>\n\
                 <td class="text-right">\n\
                     <div class="btn-group btn-group-sm" data-toggle="buttons">\n\
-                        <label class="btn btn-info ' + activeCondition + '" aria-label="{{ 'Select'|get_lang }}" title="{{ 'SelectToSearch'|get_lang }}">\n\
+                        <label class="btn btn-default ' + activeCondition + '" aria-label="{{ 'Select'|get_lang }}" title="{{ 'SelectToSearch'|get_lang }}">\n\
                             <input id="skill_to_select_id_' + skill_id + '" data-id="' + skill_id + '" name="' + skill_name + '" class="skill_to_select" type="checkbox" autocomplete="off" ' + checked_condition + '>\n\
                             <span class="fa fa-check-square-o" aria-hidden="true"></span>\n\
                         </label>\n\
-                        <button class="btn btn-warning load_wheel" aria-label="{{ 'Search'|get_lang }}" title="{{ 'PlaceOnTheWheel'|get_lang }}" data-id="' + skill_id + '">\n\
+                        <button class="btn btn-default load_wheel" aria-label="{{ 'Search'|get_lang }}" title="{{ 'PlaceOnTheWheel'|get_lang }}" data-id="' + skill_id + '">\n\
                             <span class="fa fa-crosshairs fa-fw" aria-hidden="true"></span>\n\
                         </button>\n\
                     </div>\n\
@@ -478,11 +478,11 @@
         <div class="row">
             <div class="col-md-3 skill-options">
                 <div class="skill-home">
-                    <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">
+                    <a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
                         <em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
                     </a>
                 </div>
-                <div class="panel panel-primary">
+                <div class="panel panel-default">
                     <div class="panel-body">
                         <div id="saved_profiles"></div>
                         <h4 class="page-header">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</h4>
@@ -515,7 +515,7 @@
                     </div>
                 </div>
                 <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-primary">
+                    <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="wheel-legend-heading">
                             <h4 class="panel-title">
                                 <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
@@ -539,7 +539,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="panel panel-primary">
+                    <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="wheel-display-heading">
                             <h4 class="panel-title">
                                 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
diff --git a/main/template/default/skill/skill_wheel_student.tpl b/main/template/default/skill/skill_wheel_student.tpl
index e31ab452b1..3f9e57d39b 100755
--- a/main/template/default/skill/skill_wheel_student.tpl
+++ b/main/template/default/skill/skill_wheel_student.tpl
@@ -154,14 +154,14 @@
         <div class="row">
             <div class="col-md-3 skill-options">
                 <p class="skill-home">
-                    <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">
+                    <a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
                         <em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
                     </a>
                 </p>
                 <div class="panel panel-default">
                     <div class="panel-body">
                         <figure class="text-center">
-                            <img width="100px" src="{{ user_info.avatar }}" class="center-block">
+                            <img width="100px" src="{{ user_info.avatar }}" class="img-circle center-block">
                             <figcaption class="lead">{{ user_info.complete_name }}</figcaption>
                         </figure>
                         <p class="text-center">
@@ -187,7 +187,7 @@
 
                 <!-- ACCORDION -->
                 <div class="accordion" id="accordion2">
-                    <div class="panel panel-primary">
+                    <div class="panel panel-default">
                         <div class="panel-heading">
                             <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                 {{ 'GetNewSkills'|get_lang }}
@@ -218,7 +218,7 @@
                     </div>
                 </div>
                 <div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
-                    <div class="panel panel-primary">
+                    <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="wheel-legend-heading">
                             <h4 class="panel-title">
                                 <a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
@@ -245,7 +245,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="panel panel-primary">
+                    <div class="panel panel-default">
                         <div class="panel-heading" role="tab" id="wheel-display-heading">
                             <h4 class="panel-title">
                                 <a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">