diff --git a/main/css/base.css b/main/css/base.css
index d150a485ac..97af853832 100755
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -3334,6 +3334,214 @@ form .formw .freeze {
 }
 
 /* jsPlumb */
+/* ****************************************************
+                     CSS SKILL
+ **************************************************** */
+.skill-options .legend{
+  border: 1px dashed #cccccc;
+  padding: 1em;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  margin-bottom: 1em;
+  margin-top: 1em;
+  background-color: #FFFFFF;
+}
+.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;
+}
+.skill-options .btn-block {
+  box-sizing: border-box;
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
+  width: 100%;
+}
+.skill-options .accordion-heading {
+  border-bottom: 0px none;
+  background: #3FA5C3;
+}
+.skill-options .accordion-heading a{
+  color: #FFFFFF;
+}
+.skill-options .button-skill{
+  margin-top: 1em;
+}
+.skill-options .form-search .holder{
+  border: 1px solid #cccccc;
+  padding-left: .5em;
+  padding-right: .5em;
+}
+.skill-options .accordion-inner {
+  padding: 9px 15px;
+  /*border: 1px solid #dadada;*/
+  background-color: #FFFFFF;
+}
+.skill-options .items_save{
+  margin-top: .5em;
+  margin-bottom: .5em;
+  display: inline-block;
+  height: auto !important;
+  clear: both;
+  width: 100%;
+}
+.skill-options .accordion-group {
+  margin-bottom: 2px;
+  border: 1px solid #3FA5C3;
+  border-radius: 4px;
+}
+.skill-options .accordion-inner {
+  padding: 9px 15px;
+  border-top: 1px solid #3FA5C3;
+}
+.skill-options .load_wheel{
+  -moz-border-radius:6px;
+  -webkit-border-radius:6px;
+  border-radius:6px;
+  border:1px solid #C09853;
+  background:#FCF8E3;
+  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;
+  padding-top: .5em;
+  padding-bottom: .5em;
+}
+.skill-options .section-info-skill{
+  display: inline-block;
+  padding-top: .5em;
+  padding-bottom: .5em;
+  width: 100%;
+  clear: both;
+}
+.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-options .button-skill{
+  margin-bottom: .5em;
+}
+.page-items-profile{
+  padding-top: 2em;
+  padding-bottom: 2em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.page-items-profile .title-skill{
+  margin-bottom: 1em;
+  font-size: 18px;
+  color: #333333;
+  margin-top: 1em;
+}
+.page-items-profile .block-items{
+  display: block;
+  width: 22.5%;
+  margin:10px;
+  float: left;
+}
+.page-items-profile .award-items{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.page-items-profile .number-skill{
+  background-color: #FFFFFF;
+  padding-top: .5em;
+  padding-bottom: .5em;
+  padding-left: .5em;
+  margin-bottom: 1em;
+  border: 1px solid #cccccc;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+.page-items-profile .block-items .border-items{
+  background-color: #EFEFEF;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+}
+.page-items-profile .items-info{
+  padding:1em;
+}
+.page-items-profile .info-profile{
+  margin-top: 1em;
+  margin-bottom: .5em;
+}
+.page-items-profile .items-info .avatar-profile{
+  text-align: center;
+  background: #FFFFFF;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  border: 1px solid #cccccc;
+}
+.skill_partition {
+  cursor: pointer;
+  stroke: #000000;
+  stroke-width: 0.5px;
+}
+
+#skill_holder li {
+  float:left;
+  padding-right: 10px;
+  margin-bottom: .5em;
+}
+
+
+/* ****************************************************
+                     END SKILL
+ **************************************************** */
 
 .skill_root {
     box-shadow: 2px 2px 19px #aaa;
@@ -4839,16 +5047,6 @@ i.size-32.icon-new-work{
 }
 
 /* Default skill partition colors */
-.skill_partition {
-    cursor: pointer;
-    stroke: #000000;
-    stroke-width: 1.5;
-}
-
-#skill_holder li {
-    float:left;
-    /*width: 120px;*/
-}
 
 #filepaths input{
     margin-bottom:5px;
diff --git a/main/img/icons/16/award_red.png b/main/img/icons/16/award_red.png
new file mode 100644
index 0000000000..7675b93890
Binary files /dev/null and b/main/img/icons/16/award_red.png differ
diff --git a/main/img/icons/16/award_red_na.png b/main/img/icons/16/award_red_na.png
new file mode 100644
index 0000000000..5a5d3242c1
Binary files /dev/null and b/main/img/icons/16/award_red_na.png differ
diff --git a/main/img/icons/16/winner.png b/main/img/icons/16/winner.png
new file mode 100644
index 0000000000..4c303819d8
Binary files /dev/null and b/main/img/icons/16/winner.png differ
diff --git a/main/img/icons/22/award_green.png b/main/img/icons/22/award_green.png
new file mode 100644
index 0000000000..d358e4f47f
Binary files /dev/null and b/main/img/icons/22/award_green.png differ
diff --git a/main/img/icons/22/award_red.png b/main/img/icons/22/award_red.png
new file mode 100644
index 0000000000..478b69129b
Binary files /dev/null and b/main/img/icons/22/award_red.png differ
diff --git a/main/img/icons/22/award_red_na.png b/main/img/icons/22/award_red_na.png
new file mode 100644
index 0000000000..5ce6d1ff51
Binary files /dev/null and b/main/img/icons/22/award_red_na.png differ
diff --git a/main/img/icons/22/award_red_start.png b/main/img/icons/22/award_red_start.png
new file mode 100644
index 0000000000..83a0ca9ae2
Binary files /dev/null and b/main/img/icons/22/award_red_start.png differ
diff --git a/main/img/icons/22/winner.png b/main/img/icons/22/winner.png
new file mode 100644
index 0000000000..cc0845539e
Binary files /dev/null and b/main/img/icons/22/winner.png differ
diff --git a/main/img/icons/32/award_red.png b/main/img/icons/32/award_red.png
new file mode 100644
index 0000000000..6242df7e5a
Binary files /dev/null and b/main/img/icons/32/award_red.png differ
diff --git a/main/img/icons/32/award_red_na.png b/main/img/icons/32/award_red_na.png
new file mode 100644
index 0000000000..1284958ec8
Binary files /dev/null and b/main/img/icons/32/award_red_na.png differ
diff --git a/main/inc/ajax/skill.ajax.php b/main/inc/ajax/skill.ajax.php
index cd3c7c13c0..0f3c323cd3 100755
--- a/main/inc/ajax/skill.ajax.php
+++ b/main/inc/ajax/skill.ajax.php
@@ -263,7 +263,7 @@ switch ($action) {
             }
 
             if (!empty($ordered_user_list)) {
-                arsort($ordered_user_list);
+                krsort($ordered_user_list);
             }
         }
         
@@ -332,6 +332,18 @@ switch ($action) {
             }
         }
         break;
+    case 'delete_profile':
+        if (api_is_platform_admin() || api_is_drh()) {
+            $profileId = $_REQUEST['profile'];
+
+            $skillProfile = new SkillProfile();
+            $isDeleted = $skillProfile->delete($profileId);
+
+            echo json_encode(array(
+                'status' => $isDeleted
+            ));
+        }
+        break;
     case 'skill_exists':
         $skill_data = $skill->get($_REQUEST['skill_id']);
         if (!empty($skill_data)) {
diff --git a/main/inc/lib/javascript/d3/colorbrewer.js b/main/inc/lib/javascript/d3/colorbrewer.js
index 7261590924..9595aa834c 100755
--- a/main/inc/lib/javascript/d3/colorbrewer.js
+++ b/main/inc/lib/javascript/d3/colorbrewer.js
@@ -6,7 +6,7 @@ var colorbrewer = {
 YlGn:{3:["rgb(247,252,185)","rgb(173,221,142)","rgb(49,163,84)"],4:["rgb(255,255,204)","rgb(194,230,153)","rgb(120,198,121)","rgb(35,132,67)"],5:["rgb(255,255,204)","rgb(194,230,153)","rgb(120,198,121)","rgb(49,163,84)","rgb(0,104,55)"],6:["rgb(255,255,204)","rgb(217,240,163)","rgb(173,221,142)","rgb(120,198,121)","rgb(49,163,84)","rgb(0,104,55)"],7:["rgb(255,255,204)","rgb(217,240,163)","rgb(173,221,142)","rgb(120,198,121)","rgb(65,171,93)","rgb(35,132,67)","rgb(0,90,50)"],8:["rgb(255,255,229)","rgb(247,252,185)","rgb(217,240,163)","rgb(173,221,142)","rgb(120,198,121)","rgb(65,171,93)","rgb(35,132,67)","rgb(0,90,50)"],9:["rgb(255,255,229)","rgb(247,252,185)","rgb(217,240,163)","rgb(173,221,142)","rgb(120,198,121)","rgb(65,171,93)","rgb(35,132,67)","rgb(0,104,55)","rgb(0,69,41)"]},
 YlGnBu:{3:["rgb(237,248,177)","rgb(127,205,187)","rgb(44,127,184)"],4:["rgb(255,255,204)","rgb(161,218,180)","rgb(65,182,196)","rgb(34,94,168)"],5:["rgb(255,255,204)","rgb(161,218,180)","rgb(65,182,196)","rgb(44,127,184)","rgb(37,52,148)"],6:["rgb(255,255,204)","rgb(199,233,180)","rgb(127,205,187)","rgb(65,182,196)","rgb(44,127,184)","rgb(37,52,148)"],7:["rgb(255,255,204)","rgb(199,233,180)","rgb(127,205,187)","rgb(65,182,196)","rgb(29,145,192)","rgb(34,94,168)","rgb(12,44,132)"],8:["rgb(255,255,217)","rgb(237,248,177)","rgb(199,233,180)","rgb(127,205,187)","rgb(65,182,196)","rgb(29,145,192)","rgb(34,94,168)","rgb(12,44,132)"],9:["rgb(255,255,217)","rgb(237,248,177)","rgb(199,233,180)","rgb(127,205,187)","rgb(65,182,196)","rgb(29,145,192)","rgb(34,94,168)","rgb(37,52,148)","rgb(8,29,88)"]},
 GnBu:{3:["rgb(224,243,219)","rgb(168,221,181)","rgb(67,162,202)"],4:["rgb(240,249,232)","rgb(186,228,188)","rgb(123,204,196)","rgb(43,140,190)"],5:["rgb(240,249,232)","rgb(186,228,188)","rgb(123,204,196)","rgb(67,162,202)","rgb(8,104,172)"],6:["rgb(240,249,232)","rgb(204,235,197)","rgb(168,221,181)","rgb(123,204,196)","rgb(67,162,202)","rgb(8,104,172)"],7:["rgb(240,249,232)","rgb(204,235,197)","rgb(168,221,181)","rgb(123,204,196)","rgb(78,179,211)","rgb(43,140,190)","rgb(8,88,158)"],8:["rgb(247,252,240)","rgb(224,243,219)","rgb(204,235,197)","rgb(168,221,181)","rgb(123,204,196)","rgb(78,179,211)","rgb(43,140,190)","rgb(8,88,158)"],9:["rgb(247,252,240)","rgb(224,243,219)","rgb(204,235,197)","rgb(168,221,181)","rgb(123,204,196)","rgb(78,179,211)","rgb(43,140,190)","rgb(8,104,172)","rgb(8,64,129)"]},
-BuGn:{3:["rgb(229,245,249)","rgb(153,216,201)","rgb(44,162,95)"],4:["rgb(237,248,251)","rgb(178,226,226)","rgb(102,194,164)","rgb(35,139,69)"],5:["rgb(237,248,251)","rgb(178,226,226)","rgb(102,194,164)","rgb(44,162,95)","rgb(0,109,44)"],6:["rgb(237,248,251)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(44,162,95)","rgb(0,109,44)"],7:["rgb(237,248,251)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,88,36)"],8:["rgb(247,252,253)","rgb(229,245,249)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,88,36)"],9:["rgb(247,252,253)","rgb(229,245,249)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,109,44)","rgb(0,68,27)"]},
+BuGn:{3:["rgb(229,245,249)","rgb(153git c,216,201)","rgb(44,162,95)"],4:["rgb(237,248,251)","rgb(178,226,226)","rgb(102,194,164)","rgb(35,139,69)"],5:["rgb(237,248,251)","rgb(178,226,226)","rgb(102,194,164)","rgb(44,162,95)","rgb(0,109,44)"],6:["rgb(237,248,251)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(44,162,95)","rgb(0,109,44)"],7:["rgb(237,248,251)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,88,36)"],8:["rgb(247,252,253)","rgb(229,245,249)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,88,36)"],9:["rgb(247,252,253)","rgb(229,245,249)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,109,44)","rgb(0,68,27)"]},
 PuBuGn:{3:["rgb(236,226,240)","rgb(166,189,219)","rgb(28,144,153)"],4:["rgb(246,239,247)","rgb(189,201,225)","rgb(103,169,207)","rgb(2,129,138)"],5:["rgb(246,239,247)","rgb(189,201,225)","rgb(103,169,207)","rgb(28,144,153)","rgb(1,108,89)"],6:["rgb(246,239,247)","rgb(208,209,230)","rgb(166,189,219)","rgb(103,169,207)","rgb(28,144,153)","rgb(1,108,89)"],7:["rgb(246,239,247)","rgb(208,209,230)","rgb(166,189,219)","rgb(103,169,207)","rgb(54,144,192)","rgb(2,129,138)","rgb(1,100,80)"],8:["rgb(255,247,251)","rgb(236,226,240)","rgb(208,209,230)","rgb(166,189,219)","rgb(103,169,207)","rgb(54,144,192)","rgb(2,129,138)","rgb(1,100,80)"],9:["rgb(255,247,251)","rgb(236,226,240)","rgb(208,209,230)","rgb(166,189,219)","rgb(103,169,207)","rgb(54,144,192)","rgb(2,129,138)","rgb(1,108,89)","rgb(1,70,54)"]},
 PuBu:{3:["rgb(236,231,242)","rgb(166,189,219)","rgb(43,140,190)"],4:["rgb(241,238,246)","rgb(189,201,225)","rgb(116,169,207)","rgb(5,112,176)"],5:["rgb(241,238,246)","rgb(189,201,225)","rgb(116,169,207)","rgb(43,140,190)","rgb(4,90,141)"],6:["rgb(241,238,246)","rgb(208,209,230)","rgb(166,189,219)","rgb(116,169,207)","rgb(43,140,190)","rgb(4,90,141)"],7:["rgb(241,238,246)","rgb(208,209,230)","rgb(166,189,219)","rgb(116,169,207)","rgb(54,144,192)","rgb(5,112,176)","rgb(3,78,123)"],8:["rgb(255,247,251)","rgb(236,231,242)","rgb(208,209,230)","rgb(166,189,219)","rgb(116,169,207)","rgb(54,144,192)","rgb(5,112,176)","rgb(3,78,123)"],9:["rgb(255,247,251)","rgb(236,231,242)","rgb(208,209,230)","rgb(166,189,219)","rgb(116,169,207)","rgb(54,144,192)","rgb(5,112,176)","rgb(4,90,141)","rgb(2,56,88)"]},
 BuPu:{3:["rgb(224,236,244)","rgb(158,188,218)","rgb(136,86,167)"],4:["rgb(237,248,251)","rgb(179,205,227)","rgb(140,150,198)","rgb(136,65,157)"],5:["rgb(237,248,251)","rgb(179,205,227)","rgb(140,150,198)","rgb(136,86,167)","rgb(129,15,124)"],6:["rgb(237,248,251)","rgb(191,211,230)","rgb(158,188,218)","rgb(140,150,198)","rgb(136,86,167)","rgb(129,15,124)"],7:["rgb(237,248,251)","rgb(191,211,230)","rgb(158,188,218)","rgb(140,150,198)","rgb(140,107,177)","rgb(136,65,157)","rgb(110,1,107)"],8:["rgb(247,252,253)","rgb(224,236,244)","rgb(191,211,230)","rgb(158,188,218)","rgb(140,150,198)","rgb(140,107,177)","rgb(136,65,157)","rgb(110,1,107)"],9:["rgb(247,252,253)","rgb(224,236,244)","rgb(191,211,230)","rgb(158,188,218)","rgb(140,150,198)","rgb(140,107,177)","rgb(136,65,157)","rgb(129,15,124)","rgb(77,0,75)"]},
diff --git a/main/inc/lib/javascript/tag/style.css b/main/inc/lib/javascript/tag/style.css
index efc444ed0f..a6f55bba2c 100755
--- a/main/inc/lib/javascript/tag/style.css
+++ b/main/inc/lib/javascript/tag/style.css
@@ -1,81 +1,222 @@
 /* TextboxList sample CSS */
 ul.holder {
-    background-color: white;
-    -moz-border-radius:5px 5px 5px 5px;
-    -web-kit-border-radius:5px 5px 5px 5px;	 
-    margin: 0; border: 1px solid #ccc; 
-    overflow: hidden; 
+    overflow: hidden;
     height: auto !important; 
-    height: 1%; 
-    padding: 4px 5px 0; 
+    height: 1%;
 }
 *:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
-ul.holder li { 
+ul.holder_simple li {
     float: left; 
     list-style-type: none; 
     margin: 0 5px 4px 0; 
     white-space:nowrap;
 }
 
-ul.holder li.bit-box, ul.holder li.bit-input input {    
-    box-shadow: none;
+ul.holder li.bit-box,ul.holder li.bit-input input {
+  box-shadow:none
 }
-ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
-ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
-ul.holder li.bit-input input {	 
-    width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */
+
+ul.holder_simple li.bit-box {
+  -moz-border-radius:6px;
+  -webkit-border-radius:6px;
+  border-radius:6px;
+  border:1px solid #C09853;
+  background:#FCF8E3;
+  padding:1px 5px 2px;
+  color:#333;
+}
+
+ul.holder_simple li.bit-box-focus {
+  border-color:#FCF8E3;
+  background:#FCF8E3;
+}
+
+ul.holder li.bit-input input {
+  width:auto;
+  overflow:visible;
+  margin:0;
+  border:0;
+  outline:0;
+  padding:3px 0 2px
+}
+
 ul.holder li.bit-input input.smallinput {
-    width: 20px; 
+  width:20px
 }
 
-/* Facebook demo CSS */      
-#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; }
-form ol li { list-style-type: none; }
-form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; }
-form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; }
-form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; }
-form ol li.input-text input { background-image:none; width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; }
+#add {
+  border:1px solid #999;
+  width:550px;
+  margin:50px;
+  padding:20px 30px 10px
+}
 
-/* This hide the shadow.gid image of dokeos*/
-ul.holder input[type="text"]:focus, ul.holder input-text input[type="password"]:focus {
-    background-image:none;
+form ol li {
+  list-style-type:none
 }
 
+form ol {
+  font:11px "Lucida Grande",Verdana;
+  margin:0;
+  padding:0
+}
 
+form ol li.input-text {
+  margin-bottom:10px;
+  list-style-type:none;
+  padding-bottom:10px
+}
 
+form ol li.input-text label {
+  font-weight:700;
+  cursor:pointer;
+  display:block;
+  font-size:13px;
+  margin-bottom:10px
+}
 
-/*form ul.holder { width: 500px; } */
-form ul { margin: 0 !important }
-ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
-#apple-list ul.holder li.bit-input { margin: 0; }
-#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
-ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
-ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
-ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
-ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
-ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
+form ol li.input-text input {
+  background-image:none;
+  width:500px;
+  padding:5px 5px 6px;
+  font:11px "Lucida Grande",Verdana;
+  border:1px solid #999
+}
 
-/* Autocompleter */
+ul.holder input[type="text"]:focus,ul.holder input-text input[type="password"]:focus {
+  background-image:none
+}
 
-.facebook-auto { 
-    z-index:2000;  
-    display: none; 
-    position: absolute; 
-/*    width: 512px; */
-    background: #eee; 
+form ul {
+  margin-left:0 !important;
+  margin-bottom: 0 !important;
 }
-.facebook-auto .default { z-index:2000; padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; }
-.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999}
-.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee }
-.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
-.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; }
-.facebook-auto ul li.auto-focus em { background: none; }
-.deleted { background-color:#4173CC !important; color:#ffffff !important;}
-.hidden { display:none;}
 
-#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
-.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;}
+ul.holder li.bit-box,#apple-list ul.holder li.bit-box {
+  padding-right:15px;
+  position:relative;
+  z-index:1000
+}
+
+#apple-list ul.holder li.bit-input {
+  margin:0
+}
+
+#apple-list ul.holder li.bit-input input.smallinput {
+  width:5px
+}
+
+ul.holder li.bit-hover {
+  background:#BBCEF1;
+  border:1px solid #6D95E0
+}
+
+ul.holder li.bit-box-focus {
+  border-color:#598BEC;
+  background:#598BEC;
+  color:#fff
+}
 
-.holder_simple {
-    border:none !important;    
+ul.holder li.bit-box a.closebutton {
+  position:absolute;
+  right:4px;
+  top:5px;
+  display:block;
+  width:7px;
+  height:7px;
+  font-size:1px;
+  background:url(close.gif)
+}
+
+ul.holder li.bit-box a.closebutton:hover {
+  background-position:7px
+}
+
+ul.holder li.bit-box-focus a.closebutton,ul.holder li.bit-box-focus a.closebutton:hover {
+  background-position:bottom
+}
+
+.facebook-auto {
+  z-index:2000;
+  display:none;
+  position:absolute;
+  background:#FCF8E3;
+  border: 1px solid #FBEED5;
+  margin-right: 1em;
+}
+
+.facebook-auto .default {
+  z-index:2000;
+  padding:5px 7px;
+  color:#C09853;
+  font-size:13px;
+}
+
+.facebook-auto ul {
+  display:none;
+  margin:0;
+  padding:0;
+  overflow:auto;
+  position:absolute;
+  z-index:9999 !important;
+}
+
+.facebook-auto ul li {
+  padding:5px 10px;
+  z-index:1000;
+  cursor:pointer;
+  margin:0;
+  list-style-type:none;
+  background:#FCF8E3;
+  border: 1px solid #FBEED5;
+  color: #666;
+}
+
+.facebook-auto ul li em {
+  color:#C09853;
+  font-weight: bold;
+}
+
+.facebook-auto ul li.auto-focus {
+  background:#F0F0F0;
+  color:#333;
+}
+
+.facebook-auto ul li.auto-focus em {
+  background:none
+}
+
+.deleted {
+  background-color:#4173CC!important;
+  color:#fff!important
+}
+
+.hidden {
+  display:none
+}
+
+#demo ul.holder li.bit-input input {
+  padding:2px 0 1px;
+  border:1px solid #999
+}
+
+.ie6fix {
+  height:1px;
+  width:1px;
+  position:absolute;
+  top:0;
+  left:0;
+  z-index:1
+}
+ul.holder_simple{
+  list-style: none;
+  margin:0;
+  height: auto !important;
+  width: 93%;
 }
+ul.border {
+  border: 1px dashed #cccccc;
+  padding: .5em 1em;
+  margin-top: 1em;
+  display: inline-block;
+}
\ No newline at end of file
diff --git a/main/inc/lib/skill.lib.php b/main/inc/lib/skill.lib.php
index 4fc584f39d..333473ab8a 100755
--- a/main/inc/lib/skill.lib.php
+++ b/main/inc/lib/skill.lib.php
@@ -66,6 +66,22 @@ class SkillProfile extends Model
         }
         return false;
     }
+
+    /**
+     * Delete a skill profile
+     * @param int $id The skill profile id
+     * @return boolean Whether delete a skill profile
+     */
+    public function delete($id) {
+        Database::delete(
+            $this->table_rel_profile,
+            array(
+                'profile_id' => $id
+            )
+        );
+
+        return parent::delete($id);
+    }
 }
 
 class SkillRelProfile extends Model
@@ -853,6 +869,7 @@ class Skill extends Model
                 $tmp = array();
                 $tmp['name'] = $elem['name'];
                 $tmp['id'] = $elem['id'];
+                $tmp['isSearched'] = self::isSearched($elem['id']);
 
                 if (is_array($elem['children'])) {
                     $tmp['children'] = $this->get_skill_json($elem['children'], $depth + 1, $max_depth);
@@ -971,4 +988,42 @@ class Skill extends Model
         }
         return false;
     }
+
+    /**
+     * Check if a skill is searched
+     * @param int $id The skill id
+     * @return boolean Whether el skill is searched return true. Otherwise return false
+     */
+    public static function isSearched($id)
+    {
+        $id = intval($id);
+
+        if (empty($id)) {
+            return false;
+        }
+
+        $skillRelProfileTable = Database::get_main_table(TABLE_MAIN_SKILL_REL_PROFILE);
+
+        $result = Database::select(
+            'COUNT( DISTINCT `skill_id`) AS qty',
+            $skillRelProfileTable,
+            array(
+                'where' => array(
+                    'skill_id = ?' => $id
+                )
+            ),
+            'first'
+        );
+
+        if ($result === false) {
+            return false;
+        }
+
+        if ($result['qty'] > 0) {
+            return true;
+        }
+
+        return false;
+    }
+
 }
diff --git a/main/inc/lib/userportal.lib.php b/main/inc/lib/userportal.lib.php
index 43b94bf0e4..43f47f7971 100755
--- a/main/inc/lib/userportal.lib.php
+++ b/main/inc/lib/userportal.lib.php
@@ -312,7 +312,9 @@ class IndexManager
 
             $content .= Display::tag('li', Display::url(get_lang('MySkills'), api_get_path(WEB_CODE_PATH).'social/skills_wheel.php'));
 
-            if (api_get_setting('allow_hr_skills_management') == 'true' || api_is_platform_admin()) {
+            $allowSkillsManagement = api_get_setting('allow_hr_skills_management') == 'true';
+
+            if (($allowSkillsManagement && api_is_drh()) || api_is_platform_admin()) {
                 $content .= Display::tag('li', Display::url(get_lang('ManageSkills'), api_get_path(WEB_CODE_PATH).'admin/skills_wheel.php'));
             }
             $content .= '</ul>';
diff --git a/main/social/skills_wheel.php b/main/social/skills_wheel.php
index b55c6686be..1c3e78b84e 100755
--- a/main/social/skills_wheel.php
+++ b/main/social/skills_wheel.php
@@ -31,6 +31,11 @@ $htmlHeadXtra[] = '<link  href="'.api_get_path(WEB_LIBRARY_PATH).'javascript/tag
 $tpl = new Template(null, false, false);
 
 $load_user = api_get_user_id();
+$userInfo = api_get_user_info();
+
+$skill = new Skill();
+$ranking = $skill->get_user_skill_ranking($load_user);
+$countSkill = count($skill->get_all());
 
 $skill_condition = '';
 if (isset($_GET['skill_id'])) {
@@ -45,6 +50,10 @@ $tpl->assign('wheel_url', $url);
 $url  = api_get_path(WEB_AJAX_PATH).'skill.ajax.php?1=1';
 $tpl->assign('url', $url);
 
+$tpl->assign('userInfo', $userInfo);
+$tpl->assign('ranking', $ranking);
+$tpl->assign('countSkill', $countSkill);
+
 $content = $tpl->fetch('default/skill/skill_wheel_student.tpl');
 $tpl->assign('content', $content);
 $tpl->display_no_layout_template();
\ No newline at end of file
diff --git a/main/template/default/skill/profile.tpl b/main/template/default/skill/profile.tpl
index 4509208ac9..6f54c91602 100755
--- a/main/template/default/skill/profile.tpl
+++ b/main/template/default/skill/profile.tpl
@@ -1,4 +1,4 @@
-{% if search_skill_list is not null %}    
+{% if search_skill_list is not null %}
     <div class="skills-skills">
         <h3>{{"Skills"|get_lang}}</h3>
         <ul class="holder">             
@@ -28,67 +28,70 @@
 
 {% if order_user_list is not null %}
     {% for count, user_list in order_user_list %}
-        <div class="row-fluid">
-            <div class="span12">  
-            <div class="page-header">
-                <h2>
-                {% if count == total_search_skills %}
-                    {{ "CompleteMatch"|get_lang }}
-                {% else %}
-                    {% if (total_search_skills - count) == 1 %}
-                        {{ "MissingOneStepToMatch"|get_lang }}</h2>
-                    {% else %}
-                        {{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}                        
-                    {% endif %}        
-                {% endif %}
-                </h2>
-                    
-            </div>
+        <div class="page-items-profile">
+            <div class="row-fluid">
+                <div class="span12">
+                    <h4 class="title-skill">
+                        {% if count == total_search_skills %}
+                            {{ "CompleteMatch"|get_lang }}
+                        {% else %}
+                            {% if (total_search_skills - count) == 1 %}
+                                {{ "MissingOneStepToMatch"|get_lang }}
+                            {% else %}
+                                {{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}                        
+                            {% endif %}
+                        {% endif %}
+                    </h4>
+                </div>
             </div>
-        </div>
 
-        <div class="row-fluid">
-        {% for user in user_list %}
-            <div class="span4">
-                <div class="well_border">                                 
-                    <h3>
-                        <img src="{{user.user.avatar_small}}" /> 
-                        <a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}">{{ user['user'].complete_name }} ({{user['user'].username}}) </a>
-                    </h3>
-                    <hr >
-                    <div class="ui-widget-content ">
-                        <h4>{{ "Skills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</h4>
-                        <ul>                
-                            {% for skill_data in user.skills %}                                     
-                                <li>
-                                    {% if skill_list[skill_data.skill_id].name is not null %}                       
-                                        {% if skill_data.found %}                                        
-                                            <span class="label label-important">{{ skill_list[skill_data.skill_id].name }}</span>
-                                        {% else %} 
-                                            <span class="label_tag skill">{{ skill_list[skill_data.skill_id].name }}</span>
-                                        {% endif %}        
-                                        
-                                    {% else %} 
-                                        {{ "SkillNotFound"|get_lang }}
-                                    {% endif %}
-                                    {# if $skill_data.found 
-                                         IHaveThisSkill"|get_lang
-                                    #}
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </div>    
-                </div> 
+            <div class="row-fluid">
+                {% for user in user_list %}
+                    <div class="block-items">
+                        <div class="border-items">
+                            <div class="items-info">
+                                <div class="avatar-profile">
+                                    <img width="96px" src="{{user.user.avatar}}" />
+                                </div>
+                                <div class="info-profile">
+                                    <h4><a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}">{{ user['user'].complete_name }} </a></h4>
+                                    <p>{{ 'User' | get_lang }}: {{user['user'].username}} </p>
+                                </div>
+                                <div class="number-skill">{{ "Skills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}</div>
+                                <div class="skill-user-items">
+                                    <ul class="award-items">
+                                        {% for skill_data in user.skills %}
+                                            <li>
+                                                {% if skill_list[skill_data.skill_id].name is not null %}
+                                                    {% if skill_data.found %}
+                                                        <img src="{{ _p.web }}main/img/icons/22/award_red_start.png" />{{ skill_list[skill_data.skill_id].name }}
+                                                    {% else %}
+                                                        <img src="{{ _p.web }}main/img/icons/22/award_green.png" />{{ skill_list[skill_data.skill_id].name }}
+                                                    {% endif %}
+
+                                                {% else %}
+                                                    {{ "SkillNotFound"|get_lang }}
+                                                {% endif %}
+                                                {# if $skill_data.found
+                                                "IHaveThisSkill"|get_lang
+                                                #}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
-        {% endfor %}
+        </div>
     {% endfor %}
-    </div>
-{% else %}      
+{% else %}
     {% if search_skill_list is null %}
         <div class="warning-message">{{"NoResults"|get_lang}}</div>
-     {% endif %}     
+    {% endif %}
 {% endif %}
-
+</div>
 <div id="dialog-form" style="display:none;">    
     <form id="save_profile_form" class="form-horizontal" name="form">       
         <fieldset>
diff --git a/main/template/default/skill/profile_item.tpl b/main/template/default/skill/profile_item.tpl
index be30ab9cd0..df6ed587d5 100755
--- a/main/template/default/skill/profile_item.tpl
+++ b/main/template/default/skill/profile_item.tpl
@@ -1,12 +1,13 @@
 {% if profiles is not null %}
-    <div class="page-header">
-        <h3>{{ "SkillProfiles"|get_lang }}</h3>
-    </div>
-    <ul class="holder">
-        {%for profile in profiles %}        
-            <li class="bit-box">
-                <a class="load_profile" rel="{{ profile.id }}" href="#">{{ profile.name }}</a>
+          <h4 class="title-skill">{{ "SkillProfiles"|get_lang }}</h4>
+        <div class="items_save">
+            <ul class="holder_simple">
+            {%for profile in profiles %}
+            <li class="bit-box load_profile" rel="{{ profile.id }}" >
+                <button class="close">&times;</button>
+                <a href="#">{{ profile.name }}</a>
             </li>        
-        {% endfor %}
-    </ul>    
+            {% endfor %}
+            </ul>
+        </div>
 {% endif %}
\ No newline at end of file
diff --git a/main/template/default/skill/skill_wheel.js.tpl b/main/template/default/skill/skill_wheel.js.tpl
index f0618be517..7beb561aa4 100755
--- a/main/template/default/skill/skill_wheel.js.tpl
+++ b/main/template/default/skill/skill_wheel.js.tpl
@@ -12,7 +12,7 @@ var main_depth = 4;
 var main_parent_id = 0;
 
 // Used to split in two word or not
-var max_size_text_length = 11; 
+var max_size_text_length = 20;
   
 /* ColorBrewer settings */
 var my_domain = [1,2,3,4,5,6,7,8,9];
@@ -45,7 +45,7 @@ color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOr
 
 //Too make the gray tones lighter
 col = 3;
-color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greys[col]);
+color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
 
 //If you want to use the category10()
 //var normal_fill = d3.scale.category10().domain(my_domain);
@@ -137,7 +137,7 @@ function get_color(d) {
         }                  
         return color;
     }
-    color = '#fefefe';        
+    color = '#fefefe';
     return color; //missing colors
 }
 
@@ -156,7 +156,7 @@ bright red for missing skills, in the "Required skills" view for a student when
 **/
 function set_skill_style(d, attribute, searched_skill_id) {
     //Default border color (stroke)
-    return_stroke = 'black';
+    return_stroke = '#000';
 
     //0. Nice rainbow colors (Comment 1.0 to see the rainbow!)
     return_fill = get_color(d);
@@ -168,15 +168,13 @@ function set_skill_style(d, attribute, searched_skill_id) {
 
     //2. Yellow - If the skill has a gradebook attached
     if (d.skill_has_gradebook) {      
-        return_fill = '#F89406';            
+        return_fill = '#F89406';
         //return_stroke = 'grey';
     }
 
     //3. Red - if you search that skill
-    if (searched_skill_id) {
-        if (d.id ==  searched_skill_id) {
-            return_fill = '#B94A48';
-        }
+    if (d.isSearched) {
+        return_fill = '#B94A48';
     }
     
     //4. Blue - if user achieved that skill
diff --git a/main/template/default/skill/skill_wheel.tpl b/main/template/default/skill/skill_wheel.tpl
index 8517a208ea..6dec5839d6 100644
--- a/main/template/default/skill/skill_wheel.tpl
+++ b/main/template/default/skill/skill_wheel.tpl
@@ -284,7 +284,7 @@ $(document).ready(function() {
     update_my_saved_profiles();
     
     /* Click in profile */
-    $("#saved_profiles").on("click", "a.load_profile", function() {
+    $("#saved_profiles").on("click", "li.load_profile", function() {
         profile_id = $(this).attr('rel');
         $('#profile_id').attr('value',profile_id);        
         $.ajax({
@@ -304,8 +304,19 @@ $(document).ready(function() {
             }                           
         });        
     });
-    
-    
+    $("#saved_profiles").on('click', 'li.load_profile button.close', function () {
+        var $parent = $(this).parent();
+        var profileId = $parent.attr('rel');
+
+        $.getJSON('{{ url }}&a=delete_profile', {
+            profile: profileId
+        }, function (response) {
+            if (response.status) {
+                $parent.remove();
+            }
+        });
+    });
+
     /* Wheel skill popup form */
     
     /* Close button in gradebook select */
@@ -429,7 +440,24 @@ $(document).ready(function() {
             }                           
         });
     }
-
+/* change background color */
+    $(document).ready(function () {
+        $("#celestial").click(function () {
+            $("#page-back").css("background","#A9E2F3");
+        });
+        $("#white").click(function () {
+            $("#page-back").css("background","#FFFFFF");
+        });
+        $("#black").click(function () {
+            $("#page-back").css("background","#000000");
+        });
+        $("#lead").click(function () {
+            $("#page-back").css("background","#848484");
+        });
+        $("#light-yellow").click(function () {
+            $("#page-back").css("background","#F7F8E0");
+        });
+    });
     /* Generated random colour */
     /*
     function colour(d) {
@@ -446,59 +474,98 @@ $(document).ready(function() {
     }*/
 });
 </script>
-
+<div id="page-back">
 <div class="container-fluid">
     <div class="row-fluid">
-        
-        <div class="span3">
-            <div class="well sidebar-nav-skill-wheel">
-                <div class="page-header">
-                    <h3>{{ 'Skills'|get_lang }}</h3>
+
+        <div class="span3 skill-options">
+            <div class="skill-home">
+                <a class="btn btn-large btn-block btn-success" href="{{ _p.web }}user_portal.php">{{ "ReturnToCourseList"|get_lang }}</a>
+            </div>
+            <!-- Legend -->
+            <div class="legend">
+                <h4 class="title-skill">{{ "Legend"|get_lang }}</h4>
+                <p><span class="label-warning">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
+                <p><span class="label-important">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
+            </div>
+            <!-- End Legend -->
+
+            <!-- ACCORDION -->
+
+            <div class="accordion" id="accordion2">
+            <div class="accordion-group">
+                <div class="accordion-heading">
+                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+                        <h4 class="title-skill">{{ 'SkillsSearch' | get_lang }}</h4>
+                    </a>
                 </div>
-                
-                <form id="skill_search" class="form-search">
-                    <select id="skill_id" name="skill_id" />
-                    </select>
-                    <br /><br />
-                    <div class="btn-group">
-                        <a class="btn load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
-                        <!-- <a id="clear_selection" class="btn">{{ "Clear"|get_lang }}</a> -->	
+                <div id="collapseOne" class="accordion-body collapse">
+                    <div class="accordion-inner">
+                        <!-- SEARCH -->
+                        <div class="search-skill">
+                            <p>{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                            <form id="skill_search" class="form-search">
+                                <select id="skill_id" name="skill_id" /></select>
+                                <div class="button-skill">
+                                    <a class="btn btn-block btn-large btn-danger load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
+                                    <!-- <a id="clear_selection" class="btn">{{ "Clear"|get_lang }}</a> -->
+                                </div>
+                                <ul id="skill_holder" class="holder_simple border"></ul>
+                            </form>
+                        </div>
+                        <!-- END SEARCH -->
                     </div>
-                    <ul id="skill_holder" class="holder holder_simple">
-                    </ul>
-                </form>
-                
-                <div class="page-header">
-                    <h3>{{ 'ProfileSearch'|get_lang }}</h3>
                 </div>
-                {{ 'WhatSkillsAreYouLookingFor'|get_lang }}
-                
-                <ul id="profile_search" class="holder holder_simple">
-                </ul>
-                
-                <form id="search_profile_form" class="form-search">
-                    <input class="btn" type="submit" value="{{ "SearchProfileMatches"|get_lang }}">
-                </form>
-                
-                <div id="profile-options-container" style="display:none">                
-                    {{ 'IsThisWhatYouWereLookingFor'|get_lang }}
-                    <form id="save_profile_form_button" class="form-search">
-                        <input class="btn" type="submit" value="{{ "SaveThisSearch"|get_lang }}">
-                    </form>                  
-                </div>                
-                 
-                <div id="saved_profiles">
+            </div>
+            <div class="accordion-group">
+                <div class="accordion-heading">
+                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+                        <h4 class="title-skill">{{ 'ProfileSearch'|get_lang }}</h4>
+                    </a>
+                </div>
+                <div id="collapseTwo" class="accordion-body collapse">
+                    <div class="accordion-inner">
+                        <!-- SEARCH PROFILE -->
+                        <div class="search-profile-skill">
+
+                            <p class="description">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</p>
+                            <ul id="profile_search" class="holder holder_simple"></ul>
+                            <form id="search_profile_form" class="form-search">
+                                <input class="btn btn-block" type="submit" value="{{ "SearchProfileMatches"|get_lang }}">
+                            </form>
+                            <p class="description">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</p>
+                            <form id="save_profile_form_button" class="form-search">
+                                <input class="btn btn-block" type="submit" value="{{ "SaveThisSearch"|get_lang }}">
+                            </form>
+                        </div>
+                        <!-- END SEARCH PROFILE-->
+                        <div id="saved_profiles"></div>
+                    </div>
                 </div>
-                
-                <div class="page-header">            
-                    <h3>{{ "Legend"|get_lang }}</h3>                
+            </div>
+                <div class="accordion-group">
+                    <div class="accordion-heading">
+                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+                            <h4 class="title-skill">{{ 'DisplayOptions' | get_lang }}</h4>
+                        </a>
+                    </div>
+                    <div id="collapseThree" class="accordion-body collapse">
+                        <div class="accordion-inner">
+                            <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
+                            <ul>
+                                <li><a href="#" id="white">{{ 'White' | get_lang }}</a></li>
+                                <li><a href="#" id="black">{{ 'Black' | get_lang }}</a></li>
+                                <li><a href="#" id="celestial">{{ 'LightBlue' }}</a></li>
+                                <li><a href="#" id="lead">{{ 'Gray' | get_lang }}</a></li>
+                                <li><a href="#" id="light-yellow">{{ 'Corn' | get_lang }}</a></li>
+                            </ul>
+                        </div>
+                    </div>
                 </div>
-                <span class="label label-warning">{{ "SkillsYouCanLearn"|get_lang }}</span><br /><br />
-                <span class="label label-important">{{ "SkillsSearchedFor"|get_lang }}</span><br /><br />
-                <div><a class="btn btn-small" href="{{ _p.web }}user_portal.php">{{ "ReturnToCourseList"|get_lang }}</a></div>
-            </div>                
+            </div>
+
+            <!-- END ACCORDEON -->
         </div>
-            
         <div id="wheel_container" class="span9">
             <div id="skill_wheel">
                 <img src="">
@@ -559,8 +626,6 @@ $(document).ready(function() {
         </fieldset>
     </form>     
 </div>
-        
-        
 <div id="dialog-form-profile" style="display:none;">
     <form id="save_profile_form" class="form-horizontal" name="form">
         <input type="hidden" id="profile_id" name="profile_id"/>
@@ -580,3 +645,5 @@ $(document).ready(function() {
         </fieldset>
     </form>
 </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/main/template/default/skill/skill_wheel_student.tpl b/main/template/default/skill/skill_wheel_student.tpl
index 6253e46561..7b4e1f1402 100755
--- a/main/template/default/skill/skill_wheel_student.tpl
+++ b/main/template/default/skill/skill_wheel_student.tpl
@@ -1,48 +1,48 @@
 {% include 'default/skill/skill_wheel.js.tpl' %}
 
 <script>
- 
+
 /* Skill search input in the left menu */
 function check_skills_sidebar() {
     //Selecting only selected skills
     $("#skill_id option:selected").each(function() {
-        var skill_id = $(this).val();                
+        var skill_id = $(this).val();
         if (skill_id != "" ) {
             $.ajax({
-                url: "{{ url }}&a=skill_exists", 
+                url: "{{ url }}&a=skill_exists",
                 data: "skill_id="+skill_id,
-//                async: false, 
-                success: function(return_value) {                   
+//                async: false,
+                success: function(return_value) {
                     if (return_value == 0 ) {
-                        alert("{{ 'SkillDoesNotExist'|get_lang }}");                                                
+                        alert("{{ 'SkillDoesNotExist'|get_lang }}");
                         //Deleting select option tag
-                        //$("#skill_id option[value="+skill_id+"]").remove();                    
+                        //$("#skill_id option[value="+skill_id+"]").remove();
                         $("#skill_id").empty();
-                       
+
                         //Deleting holder
                         $("#skill_search .holder li").each(function () {
                             if ($(this).attr("rel") == skill_id) {
                                 $(this).remove();
                             }
-                        });                        
+                        });
                     } else {
                         $("#skill_id option[value="+skill_id+"]").remove();
-                          
+
                         //Deleting holder
                         $("#skill_search .holder li").each(function () {
                             if ($(this).attr("rel") == skill_id) {
                                 $(this).remove();
                             }
                         });
-                        
+
                         if ($('#skill_to_select_id_'+skill_id).length == 0) {
-                            skill_info = get_skill_info(skill_id);                        
+                            skill_info = get_skill_info(skill_id);
                             li = fill_skill_search_li(skill_id, skill_info.name);
-                            $("#skill_holder").append(li); 
+                            $("#skill_holder").append(li);
                         }
                     }
-                },            
-            });                
+                },
+            });
         }
     });
 }
@@ -51,15 +51,15 @@ function fill_skill_search_li(skill_id, skill_name, checked) {
     checked_condition = '';
     if (checked == 1) {
         checked_condition = 'checked=checked';
-    }    
+    }
     return '<li><a id="skill_to_select_id_'+skill_id+'" href="#" class="load_wheel" rel="'+skill_id+'">'+skill_name+'</a></li>';
 }
 
 function load_skill_info(skill_id) {
     $.ajax({
         url: url+'&a=get_skill_course_info&id='+skill_id,
-        async: false,        
-        success: function(data) {            
+        async: false,
+        success: function(data) {
             $('#skill_info').html(data);
             return data;
         }
@@ -69,66 +69,84 @@ function load_skill_info(skill_id) {
 function load_my_skills() {
     $.ajax({
         url: url+'&a=get_user_skills&user_id='+{{ _u.user_id}},
-        //async: false,        
-        success: function(data) {            
-            $('#my_skills').html(data);                
+        //async: false,
+        success: function(data) {
+            $('#my_skills').html(data);
         }
-    });        
+    });
 }
 
 
 $(document).ready(function() {
-    /* Skill search */ 
-    
+    /* Skill search */
+
     /* Skill item list onclick  */
     $("#skill_holder").on("click", "input.skill_to_select", function() {
         skill_id = $(this).attr('rel');
         skill_name = $(this).attr('name');
         add_skill_in_profile_list(skill_id, skill_name);
-    });   
-    
+    });
+
      /* URL link when searching skills */
     $("#skill_holder").on("click", "a.load_wheel", function() {
         skill_id = $(this).attr('rel');
         skill_to_load_from_get = 0;
-        load_nodes(skill_id, main_depth);        
+        load_nodes(skill_id, main_depth);
         load_skill_info(skill_id);
     });
-    
+
      /* URL link when searching skills */
     $("#skill_search").on("click", "a.load_root", function() {
         skill_id = $(this).attr('rel');
         skill_to_load_from_get = 0;
         load_nodes(skill_id, main_depth);
     });
-    
+
     /* When clicking in a course title */
     $("#skill_info").on("click", "a.course_description_popup", function() {
-        course_code = $(this).attr('rel');        
+        course_code = $(this).attr('rel');
         $.ajax({
             url: url+'&a=get_course_info_popup&code='+course_code,
-            async: false,        
-            success: function(data) {                
+            async: false,
+            success: function(data) {
                 $('#course_info').html(data);
                 $("#dialog-course-info").dialog({
-                     close: function() {     
-                        $('#course_info').html('');                
+                     close: function() {
+                        $('#course_info').html('');
                     }
                 });
                 $("#dialog-course-info").dialog("open");
             }
         });
     });
-        
-    
+
+    /* change background color */
+    $(document).ready(function () {
+        $("#celestial").click(function () {
+            $("#page-back").css("background","#A9E2F3");
+        });
+        $("#white").click(function () {
+            $("#page-back").css("background","#FFFFFF");
+        });
+        $("#black").click(function () {
+            $("#page-back").css("background","#000000");
+        });
+        $("#lead").click(function () {
+            $("#page-back").css("background","#848484");
+        });
+        $("#light-yellow").click(function () {
+            $("#page-back").css("background","#F7F8E0");
+        });
+    });
+
     /* Wheel skill popup form */
-    
+
     /* Close button in gradebook select */
     $("#gradebook_holder").on("click", "a.closebutton", function() {
         gradebook_id = $(this).attr('rel');
-        skill_id = $('#id').attr('value');         
-        delete_gradebook_from_skill(skill_id, gradebook_id);        
-    });    
+        skill_id = $('#id').attr('value');
+        delete_gradebook_from_skill(skill_id, gradebook_id);
+    });
 
     $("#skill_id").fcbkcomplete({
         json_url: "{{ url }}&a=find_skills",
@@ -141,8 +159,8 @@ $(document).ready(function() {
         onselect:"check_skills_sidebar",
         filter_selected: true,
         newel: true
-    });    
-    
+    });
+
     $("#parent_id").fcbkcomplete({
         json_url: "{{ url }}&a=find_skills",
         cache: false,
@@ -154,8 +172,8 @@ $(document).ready(function() {
         onselect:"check_skills_edit_form",
         filter_selected: true,
         newel: true
-    });    
-    
+    });
+
     $("#gradebook_id").fcbkcomplete({
         json_url: "{{ url }}&a=find_gradebooks",
         cache: false,
@@ -172,143 +190,201 @@ $(document).ready(function() {
     //Open dialog
     $("#dialog-form").dialog({
         autoOpen: false,
-        modal   : true, 
-        width   : 600, 
+        modal   : true,
+        width   : 600,
         height  : 550
     });
-    
+
     //Open dialog
     $("#dialog-course-info").dialog({
         autoOpen: false,
-        modal   : true, 
-        width   : 550, 
+        modal   : true,
+        width   : 550,
         height  : 250
-    });    
-        
+    });
+
     load_nodes(0, main_depth);
-    
+
     load_my_skills();
 
     function open_popup(skill_id, parent_id) {
-        //Cleaning selected        
-        $("#gradebook_id").find('option').remove();        
+        //Cleaning selected
+        $("#gradebook_id").find('option').remove();
         $("#parent_id").find('option').remove();
-        
+
         $("#gradebook_holder").find('li').remove();
         $("#skill_edit_holder").find('li').remove();
-                
+
         var skill = false;
         if (skill_id) {
             skill = get_skill_info(skill_id);
-        }        
-        
+        }
+
         var parent = false;
         if (parent_id) {
             parent = get_skill_info(parent_id);
         }
-        
+
         if (skill) {
             var parent_info = get_skill_info(skill.extra.parent_id);
-            
+
             $("#id").attr('value',   skill.id);
             $("#name").attr('value', skill.name);
-            $("#short_code").attr('value', skill.short_code);                        
-            $("#description").attr('value', skill.description);                
-            
-            //Filling parent_id                        
-            $("#parent_id").append('<option class="selected" value="'+skill.extra.parent_id+'" selected="selected" >');            
-            
+            $("#short_code").attr('value', skill.short_code);
+            $("#description").attr('value', skill.description);
+
+            //Filling parent_id
+            $("#parent_id").append('<option class="selected" value="'+skill.extra.parent_id+'" selected="selected" >');
+
             $("#skill_edit_holder").append('<li class="bit-box">'+parent_info.name+'</li>');
-            
+
             //Filling the gradebook_id
-            jQuery.each(skill.gradebooks, function(index, data) {                    
+            jQuery.each(skill.gradebooks, function(index, data) {
                 $("#gradebook_id").append('<option class="selected" value="'+data.id+'" selected="selected" >');
-                $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');    
-            });            
-            
+                $("#gradebook_holder").append('<li id="gradebook_item_'+data.id+'" class="bit-box">'+data.name+' <a rel="'+data.id+'" class="closebutton" href="#"></a> </li>');
+            });
+
             $("#dialog-form").dialog({
                 buttons: {
                      "{{ "Edit"|get_lang }}" : function() {
                          var params = $("#add_item").find(':input').serialize();
-                         add_skill(params);                     
-                      },                                    
+                         add_skill(params);
+                      },
                       /*"{{ "Delete"|get_lang }}" : function() {
                       },*/
-                      "{{ "CreateChildSkill"|get_lang }}" : function() {                          
+                      "{{ "CreateChildSkill"|get_lang }}" : function() {
                           open_popup(0, skill.id);
 
                       },
-                      "{{ "AddSkillToProfileSearch"|get_lang }}" : function() {                          
+                      "{{ "AddSkillToProfileSearch"|get_lang }}" : function() {
                           add_skill_in_profile_list(skill.id, skill.name);
                       }
                 },
-                close: function() {     
+                close: function() {
                     $("#name").attr('value','');
                     $("#description").attr('value', '');
                     //Redirect to the main root
                     load_nodes(0, main_depth);
-                                 
+
                 }
             });
-            
-            $("#dialog-form").dialog("open");            
-        }       
+
+            $("#dialog-form").dialog("open");
+        }
     }
 });
-</script>
 
-<div class="container-fluid">
-    <div class="row-fluid">
-        
-        <div class="span3">
-            <div class="well sidebar-nav-skill-wheel ">
-                
-                <div class="page-header">
-                    <h3>{{ 'MySkills'|get_lang }}</h3>                
+</script>
+<div id="page-back">
+    <div class="container-fluid">
+        <div class="row-fluid">
+            <div class="span3 skill-options">
+                <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 id="my_skills">
+                <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>
+                            <a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default btn-block" target="_blank">{{ 'YourSkillRankingX' | get_lang | format(ranking) }}</a>
+                        </p>
+                        {% 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 class="page-header">
-                    <h3>{{ 'GetNewSkills'|get_lang }}</h3>
+                <!-- Legend -->
+                <div class="legend">
+                    <h4 class="title-skill">{{ "Legend"|get_lang }}</h4>
+                    <p><span class="label-info">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouAcquired"|get_lang }}</p>
+                    <p><span class="label-warning">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsYouCanLearn"|get_lang }}</p>
+                    <p><span class="label-important">&nbsp;&nbsp;&nbsp;&nbsp;</span> {{ "SkillsSearchedFor"|get_lang }}</p>
                 </div>
-                
-                <form id="skill_search" class="form-search">
-                    <select id="skill_id" name="skill_id" />
-                    </select>
-                    <br /><br />
-                    <div class="btn-group">
-                        <a class="btn load_root" rel="0" href="#">{{ "SkillRoot"|get_lang }}</a>                        
+                <!-- End Legend -->
+                <!-- ACCORDION -->
+                <div class="accordion" id="accordion2">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+                                <h4 class="title-skill">{{ 'MySkills'|get_lang }}</h4>
+                            </a>
+                        </div>
+                        <div id="collapseOne" class="accordion-body collapse">
+                            <div class="accordion-inner">
+                                <!-- MY SKILLS -->
+                                <div id="my_skills" class="skill-items">
+                                </div>
+                                <!-- MY SKILLS -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
+                                <h4 class="title-skill">{{ 'GetNewSkills' | get_lang }}</h4>
+                            </a>
+                        </div>
+                        <div id="collapseTwo" class="accordion-body collapse">
+                            <div class="accordion-inner">
+                                <!-- SEARCH -->
+                                <div class="search-skill">
+                                    <p>{{ 'EnterTheSkillNameToSearch' | get_lang }}</p>
+                                    <form id="skill_search" class="form-search">
+                                        <select id="skill_id" name="skill_id" /></select>
+                                        <div class="button-skill">
+                                            <a class="btn btn-block btn-large btn-danger load_root" rel="0" href="#">{{ "ViewSkillsWheel"|get_lang }}</a>
+                                            <!-- <a id="clear_selection" class="btn">{{ "Clear"|get_lang }}</a> -->
+                                        </div>
+                                        <ul id="skill_holder" class="holder_simple"></ul>
+                                    </form>
+                                </div>
+                                <!-- END SEARCH -->
+                                <!-- INFO SKILL -->
+                                <div class="section-info-skill">
+                                    <h4 class="title-skill">{{ 'SkillInfo'|get_lang }}</h4>
+                                    <div id="skill_info"></div>
+                                </div>
+                                <!-- END INFO SKILL -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
+                                <h4 class="title-skill">{{ 'DisplayOptions' | get_lang }}</h4>
+                            </a>
+                        </div>
+                        <div id="collapseThree" class="accordion-body collapse">
+                            <div class="accordion-inner">
+                                <p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
+                                <ul>
+                                    <li><a href="#" id="white">{{ 'White' | get_lang }}</a></li>
+                                    <li><a href="#" id="black">{{ 'Black' | get_lang }}</a></li>
+                                    <li><a href="#" id="celestial">{{ 'LightBlue' }}</a></li>
+                                    <li><a href="#" id="lead">{{ 'Gray' | get_lang }}</a></li>
+                                    <li><a href="#" id="light-yellow">{{ 'Corn' | get_lang }}</a></li>
+                                </ul>
+                            </div>
+                        </div>
                     </div>
-                    <ul id="skill_holder" class="holder holder_simple">
-                    </ul>
-                </form>
-                
-                <div class="page-header">
-                    <h3>{{ 'SkillInfo'|get_lang }}</h3>
-                </div>                
-                <div id="skill_info">
                 </div>
-                
-                <div class="page-header">
-                <h3>{{ "Legend"|get_lang }}</h3>
+                <!-- END ACCORDEON -->
+            </div>
+            <div id="wheel_container" class="span9">
+                <div id="skill_wheel">
+                    <img src="">
                 </div>
-                <span class="label label-info">{{ "SkillsYouAcquired"|get_lang }}</span><br />
-                <span class="label label-warning">{{ "SkillsYouCanLearn"|get_lang }}</span><br />
-                <span class="label label-important">{{ "SkillsSearchedFor"|get_lang }}</span><br /><br />
-                <div><a class="btn btn-small" href="{{ _p.web }}user_portal.php">{{ "ReturnToCourseList"|get_lang }}</a></div>
-            </div>                
+            </div>
         </div>
-            
-        <div id="wheel_container" class="span9">
-            <div id="skill_wheel">
-                <img src="">
+        <div id="dialog-course-info" style="display:none;">
+            <div id="course_info">
             </div>
         </div>
-</div>   
-<div id="dialog-course-info" style="display:none;">        
-    <div id="course_info">
-    </div>    
+    </div>
 </div>
diff --git a/main/template/default/skill/user_skills.tpl b/main/template/default/skill/user_skills.tpl
index b1e8a51a8b..3b74509696 100755
--- a/main/template/default/skill/user_skills.tpl
+++ b/main/template/default/skill/user_skills.tpl
@@ -1,13 +1,11 @@
-{% if skills is not null %}
-<ul class="nav nav-list">
+{% if skills is not empty %}
+<ul class="skill-winner">
     {%for skill in skills %}        
         <li>
-            <a rel="{{ skill.id}}" href="#">
-                <span class="label label-info">
-            {{ skill.name }}
-                </span>
-                </a>
+            <a class="" rel="{{ skill.id}}" href="#">{{ skill.name }}</a>
         </li>        
     {% endfor %}
 </ul>    
+{% else %}
+    {{ 'YouHaveNotYetAchievedSkills' | get_lang }}
 {% endif %}
\ No newline at end of file