diff --git a/main/css/base.css b/main/css/base.css
index 898a75f1cd..afca09eacc 100755
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -3347,11 +3347,18 @@ form .formw .freeze {
   margin-top: 1em;
   background-color: #FFFFFF;
 }
-.skill-options .legend .title-skill, .skill-options .saved_profiles .title-skill{
+.skill-options .legend .title-skill,
+.skill-options .saved_profiles .title-skill
+{
   color: #666655;
   padding-bottom: 1em;
   font-size: 16px;
 }
+.skill-options .skill-profile .title-skill{
+  color: #666655;
+  padding-bottom: .5em;
+  font-size: 18px;
+}
 .skill-options .skill-home{
   margin-top: 1em;
 }
@@ -3408,13 +3415,46 @@ form .formw .freeze {
   padding:1px 5px 2px;
   color:#333;
 }
+.skill-options .skill-items{
+  padding-bottom: 1em;
+  margin-bottom: .5em;
+  margin-top: .5em;
+}
 .skill-options .skill-winner{
   list-style: none;
   margin: 0;
   padding: 0;
 }
+.skill-options .skill-winner li{
+  float: left;
+  margin-right: 1em;
+  padding-bottom: 1em;
+}
 .skill-options .skill-winner li a{
   background: url("../img/icons/16/winner.png") no-repeat;
+  padding-left: 1.5em;
+  padding-bottom: 1em;
+}
+.skill-options .skill-profile{
+  width: 100%;
+  display: block;
+  border: 1px solid #CCC;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  margin-top: 1em;
+  background-color: #FFFFFF;
+}
+.skill-options .skill-profile .avatar{
+  display: block;
+  width: auto;
+  text-align: center;
+}
+.skill-options .skill-profile .info-user{
+  display: block;
+  width: auto;
+  margin-left: 1em;
+  padding: 1em;
 }
 .skill_partition {
   cursor: pointer;
diff --git a/main/template/default/skill/skill_wheel_student.tpl b/main/template/default/skill/skill_wheel_student.tpl
index f91f6c0394..42a7e47d57 100755
--- a/main/template/default/skill/skill_wheel_student.tpl
+++ b/main/template/default/skill/skill_wheel_student.tpl
@@ -282,23 +282,21 @@ $(document).ready(function() {
             <div class="skill-home">
                 <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">{{ "ReturnToCourseList"|get_lang }}</a>
             </div>
-            <div class="well sidebar-nav-skill-wheel ">
-                <div class="media">
-                    <a class="pull-left" href="#">
-                        <img class="media-object" src="{{ userInfo.avatar }}">
-                    </a>
-                    <div class="media-body">
-                        <h4 class="media-heading">{{ userInfo.complete_name }}</h4>
+            <div class="skill-profile">
+
+                <div class="avatar">
+                    <img width="100px" src="{{ userInfo.avatar }}" style="text-align: center">
+                </div>
+                <div class="info-user">
+                        <h4 class="title-skill">{{ userInfo.complete_name }}</h4>
                         <p>{{ 'YourSkillRankingX' | get_lang | format(ranking) }}</p>
-                        <div>
+
                             {% for i in 1..ranking %}
-                                +
+                            <img src="{{ _p.web }}main/img/icons/22/award_red.png"/>
                             {% endfor %}
                             {% for i in 1..(countSkill - ranking) %}
-                                -
+                            <img src="{{ _p.web }}main/img/icons/22/award_red_na.png"/>
                             {% endfor %}
-                        </div>
-                    </div>
                 </div>
             </div>
             <!-- Legend -->
@@ -322,7 +320,7 @@ $(document).ready(function() {
                     <div id="collapseOne" class="accordion-body collapse">
                         <div class="accordion-inner">
                             <!-- MY SKILLS -->
-                            <div id="my_skills">
+                            <div id="my_skills" class="skill-items">
                             </div>
                             <!-- MY SKILLS -->
                         </div>