diff --git a/main/css/base.css b/main/css/base.css
index 29442d7090..e82b2b1337 100755
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -300,9 +300,9 @@ form .formw input {
 [dir=rtl] #top_main_content .span9 {
   float: right;
 }
-#top_main_content .span6 {
+/*#top_main_content .span6 {
   width: 460px;
-}
+}*
 
 
 /* New changes Chamilo 1.9 */
diff --git a/main/css/chamilo/default.css b/main/css/chamilo/default.css
index 3f55533d07..95489f233d 100755
--- a/main/css/chamilo/default.css
+++ b/main/css/chamilo/default.css
@@ -67,22 +67,23 @@ a:active {
 .score-thematic .score{
   text-align: right;
 }
-.score-thematic .score, .score-thematic .name-student{
-  color: #FFFFFF;
-}
+
 .score-thematic .name-student{
   font-weight: bold;
   font-size: 16px;
-  padding-bottom: 0px;
+  padding-left: 70px;
   margin: 0px;
 }
 .score-thematic{
-  color: #FFFFFF;
+  color: #666;
 }
 .score-thematic p{
   padding: 0px;
   margin: 0px;
 }
+.row-fluid.score-thematic {
+  padding-top: 5px;
+}
 .accordion-heading .accordion-toggle {
   display: inline;
   padding-bottom: 3px;
@@ -92,16 +93,38 @@ a:active {
   float: right;
   margin-top: 10px;
   margin-bottom: 10px;
+  margin-right: 15px;
 }
 .accordion-heading .title-accordion{
-  padding-left: 25px;
-  padding-right: 25px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding:0px;
+  background:url(images/thematic.png) no-repeat left bottom transparent;
+}
+.name-student h2{
+  font-size: 18px;
+  margin: 0;
+}
+.accordion-heading h3, .accordion-heading h2{
+  line-height: 17px;
+}
+.accordion-group{
+  border: auto;
+
+}
+.name-student h3{
+  font-size: 13px;
+  font-weight: normal;
+  margin: 0;
+
 }
 .accordion-heading {
-  background:url(images/thematic.png) no-repeat left bottom #55a1d7;
-  color: #006699;
+  background: rgb(255,255,255); /* Old browsers */
+  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(192,219,234,1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(192,219,234,1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0dbea',GradientType=0 ); /* IE6-9 */
 }
 .collapse.in {
   height: auto;
@@ -116,9 +139,9 @@ a:active {
     color: #FFFFFF;
 }
 .subnav .navbar-inner {
-    -webkit-border-radius: 8px;
-    -moz-border-radius: 8px;
-    border-radius: 8px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
     border: 1px solid #178ACC;
     background: #4fb2ea; /* Old browsers */
     background: -moz-linear-gradient(top, #4fb2ea 0%, #0191c7 100%); /* FF3.6+ */
@@ -210,6 +233,7 @@ a.thumbnail:hover{
 .breadcrumb a.btn-mini{
     line-height: 17px;
     text-transform: none;
+    margin-top: 5px;
 }
 .breadcrumb a.btn-mini > .btn-success{
   color: #FFFFFF;
@@ -541,8 +565,8 @@ a.thumbnail:hover{
   background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(192,219,234,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c0dbea',GradientType=0 ); /* IE6-9 */
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding-top: 0;
+  padding-bottom: 0;
   margin-top: 5px;
   border: 1px solid #B1D6EC;
   box-shadow: none;
@@ -657,12 +681,12 @@ a.thumbnail:hover{
 /*CSS PARA CONTENIDO DE CURSO INTRODUCCION*/
 
 .page-course-intro{
-    padding: 2em;
-    border: 1px solid #DDDDDD;
-    -webkit-border-radius: 10px;
+    padding: 10px;
+    border: none;
+    /*-webkit-border-radius: 10px;
     -moz-border-radius: 10px;
-    border-radius: 10px;
-    margin-bottom: 2em;
+    border-radius: 10px;*/
+    margin-bottom: 10px;
 }
 
 .page-course-intro ul{
diff --git a/main/css/chamilo/images/thematic.png b/main/css/chamilo/images/thematic.png
new file mode 100644
index 0000000000..8a9e590ad2
Binary files /dev/null and b/main/css/chamilo/images/thematic.png differ
diff --git a/main/css/responsive.css b/main/css/responsive.css
index 0a9ae2a2dd..ca1f811841 100755
--- a/main/css/responsive.css
+++ b/main/css/responsive.css
@@ -328,7 +328,7 @@ The more frequent ones have been marked with *
     .course-tool {
         float: left;
         height: 150px;
-        width: 150px;
+        width: 165px;
     }
 
     .course-tool h4 {
@@ -503,7 +503,7 @@ The more frequent ones have been marked with *
 
     }
     .course-tool {
-        width: 210px;
+        width: 160px;
     }
     .course-tool h4 {
         font-size: 14px;
@@ -852,7 +852,7 @@ The more frequent ones have been marked with *
         float: left;
     }
     .course-tool {
-        width: 260px;
+        width: 160px;
     }
     .btn-invitations {
         margin-left: 120px;
diff --git a/main/inc/introductionSection.inc.php b/main/inc/introductionSection.inc.php
index dd41d74445..64c8545f78 100755
--- a/main/inc/introductionSection.inc.php
+++ b/main/inc/introductionSection.inc.php
@@ -205,7 +205,8 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 		$thematic_advance_info['start_date'] = api_get_local_time($thematic_advance_info['start_date']);
 		$thematic_advance_info['start_date'] = api_format_date($thematic_advance_info['start_date'], DATE_TIME_FORMAT_LONG);
 		$userInfo = $_SESSION['_user'];
-
+		$courseInfo = api_get_course_info();
+		//die('<pre>'.print_r($courseInfo,1).'</pre>');
 		
 		$thematic_description_html = '<div class="thematic-postit">
 									  <div class="row-fluid"><div class="span12">
@@ -214,21 +215,22 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 						              		<div class="accordion-heading">
 									  		<div class="title-accordion">
 									  <div class="row-fluid score-thematic">
-									  <div class="span4">';
-		$thematic_description_html.='<div class="span5"><h1 class="score">'.$thematicScore.'</h1></div>
-									 <div class="span7"><h3 class="name-student">'.$userInfo['complete_name'].'</h3><p>'.$thematic_advance.'</p></div></div>';
-		$thematic_description_html.='<div class="span8">
-									 <a id="thematic-show" class="btn btn-small btn-primary accordion-toggle btn-hidden-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course">
-								     '.get_lang('ClickToShowDetails').'
+									  <div class="span8">';
+		$thematic_description_html.='<div class="span6 name-student"><h2>'.$userInfo['firstName'].'</h2><h3>'.$userInfo['lastName'].'</h3></div>
+									<div class="span2 score"><h1>'.$thematicScore.'</h1></div>
+									 <div class="span4"><h3>'.$thematic_advance.'</h3><p>'.$courseInfo['name'].'</p></div></div>';
+		$thematic_description_html.='<div class="span4">
+									 <a id="thematic-show" class="btn btn-small accordion-toggle btn-hidden-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course">
+								     '.get_lang('ClickToHideDetails').'
 								     </a>
-								     <a id="thematic-hidden" class="btn btn-small accordion-toggle btn-show-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course" style="display:none;">
-									 '.get_lang('ClickToHideDetails').'
+								     <a id="thematic-hidden" class="btn btn-small btn-primary accordion-toggle btn-show-thematic" href="#pross" data-toggle="collapse" data-parent="#progress-bar-course" style="display:none;">
+									 '.get_lang('ClickToShowDetails').'
 								     </a>
 								     </div>
 								     </div>
 									</div>	 
 									</div>';
-		$thematic_description_html.='<div class="accordion-body collapse in" id="pross" >
+		$thematic_description_html.='<div class="accordion-body collapse" id="pross" style="height:auto;">
 									<div class="accordion-inner">
 									<div class="row-fluid">
 									<div class="span4">
@@ -252,7 +254,7 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 		$thematic_description_html.='<div class="span8">
 										<div class="topics">'.get_lang('NextTopics').'</div>
 										<div class="row-fluid">';
-		$thematic_description_html.='<div class="span5 items-progress">
+		$thematic_description_html.='<div class="span6 items-progress">
 										<p class="date">'.$thematic_advance_info['start_date'].'</p>
 										<h3 class="title">'.$thematic_advance_info['content'].'</h3>
 										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info['duration'].' <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>
@@ -276,7 +278,7 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 			$thematic_advance_info2['start_date'] = api_get_local_time($thematic_advance_info2['start_date']);
 			$thematic_advance_info2['start_date'] = api_format_date($thematic_advance_info2['start_date'], DATE_TIME_FORMAT_LONG);
 
-			$thematic_description_html.='<div class="span5 items-progress">
+			$thematic_description_html.='<div class="span6 items-progress">
 										<p class="date">'.$thematic_advance_info2['start_date'].'</p>
 										<h3 class="title">'.$thematic_advance_info2['content'].'</h3>
 										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].' <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>