diff --git a/main/css/base.css b/main/css/base.css
index e82b2b1337..e464722de6 100755
--- a/main/css/base.css
+++ b/main/css/base.css
@@ -44,6 +44,109 @@ header #logo {
 header #logo img{
     margin-left: 30px;
 }
+
+
+/* START COURSE PROGRESS */
+.thematic-postit{
+  padding-top: 5px;
+  padding-bottom: px;
+}
+.thematic-postit .tittle-score{
+  padding-bottom: 5px;
+  font-size: 16px;
+  color: #006699;
+}
+.thematic-postit .topics{
+  font-size: 12px;
+  padding-bottom: 5px;
+  color: #006699;
+}
+.items-progress {
+  border-top: 2px solid #C4DDEB;
+  padding: 5px;
+  margin-top: 0px;
+  background-color: #ECF4F8;
+}
+.items-progress .date{
+  color: #666;
+  font-size: 11px;
+  display: block;
+}
+.items-progress .title{
+  font-size: 14px;
+  line-height: 18px;
+  display: block;
+}
+.items-progress .time{
+  display: block;
+  padding-top: 5px;
+}
+.info-progress{
+  padding: 10px;
+}
+.score-thematic .score{
+  text-align: right;
+}
+
+.score-thematic .name-student{
+  font-weight: bold;
+  font-size: 16px;
+  padding-left: 70px;
+  margin: 0px;
+}
+.score-thematic{
+  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;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 3px;
+  float: right;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 15px;
+}
+.accordion-heading .title-accordion{
+  padding:0px;
+  background:url(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: 1px solid #D4E6F0;
+
+}
+.name-student h3{
+  font-size: 13px;
+  font-weight: normal;
+  margin: 0;
+
+}
+.accordion-heading {
+  background-color: #E7F1F7;
+}
+.items-progress p{
+  margin-bottom: 3px;
+}
+.collapse.in {
+  height: auto;
+}
+/* END COURSE PROGRESS*/
+
 .subnav .brand {
     display:none;
 }
@@ -300,10 +403,6 @@ form .formw input {
 [dir=rtl] #top_main_content .span9 {
   float: right;
 }
-/*#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 95489f233d..3f450b11c9 100755
--- a/main/css/chamilo/default.css
+++ b/main/css/chamilo/default.css
@@ -26,110 +26,6 @@ a:active {
     text-decoration: none;
     color : #3757f7;
 }
-/* START COURSE PROGRESS */
-.thematic-postit{
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-.thematic-postit .tittle-score{
-  padding-bottom: 5px;
-  font-size: 16px;
-  color: #006699;
-}
-.thematic-postit .topics{
-  font-size: 12px;
-  padding-bottom: 5px;
-  color: #006699;
-}
-.items-progress {
-  border: 1px solid #ccc;
-  padding: 5px;
-  margin-top: 5px;
-  background-color: #FEF4FF;
-}
-.items-progress .date{
-  color: #666;
-  font-size: 11px;
-  display: block;
-}
-.items-progress .title{
-  font-size: 14px;
-  line-height: 18px;
-  display: block;
-}
-.items-progress .time{
-  display: block;
-  padding-top: 5px;
-}
-.info-progress{
-  padding: 10px;
-}
-.score-thematic .score{
-  text-align: right;
-}
-
-.score-thematic .name-student{
-  font-weight: bold;
-  font-size: 16px;
-  padding-left: 70px;
-  margin: 0px;
-}
-.score-thematic{
-  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;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 3px;
-  float: right;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-right: 15px;
-}
-.accordion-heading .title-accordion{
-  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: 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;
-}
-/* END COURSE PROGRESS*/
 .navbar .nav > li > a {
     float: none;
     line-height: 24px;
@@ -413,31 +309,6 @@ a.thumbnail:hover{
   width: 800px;
 }
 
-/* COURSE INTRO CONTENT */
-
-.page-course-intro{
-    padding: 2em;
-    border: 1px solid #DDDDDD;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    margin-bottom: 2em;
-}
-
-.page-course-intro ul{
-    list-style-image:url(images/vineta.png);
-    padding-top: 10px;
-}
-.page-course-intro a{
-    color: #FD6600;
-}
-.page-course-intro a:hover{
-    color: #FD6600;
-    text-decoration: underline;
-}
-
-
-/* END OF COURSE INTRO*/
 .fc-header-title h2{
     color: #0191C7;
 }
@@ -681,14 +552,20 @@ a.thumbnail:hover{
 /*CSS PARA CONTENIDO DE CURSO INTRODUCCION*/
 
 .page-course-intro{
-    padding: 10px;
+    padding: 5px;
     border: none;
     /*-webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;*/
-    margin-bottom: 10px;
+    margin-bottom: 5px;
+}
+.thumbnail > img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  height: auto;
 }
-
 .page-course-intro ul{
     list-style-image:url(images/vineta.png);
     padding-top: 10px;
@@ -1221,6 +1098,14 @@ RESPONSIVE CSS
     #top_main_content .menu-column #user_image_block{
       box-shadow: none;
     }
+    .navbar .nav > li > a {
+    float: none;
+    line-height: 20px;
+    padding-bottom: 7px;
+    padding-right: 10px;
+    padding-top: 7px;
+    color: #FFFFFF;
+}
 
 }
 @media (max-width: 600px) {
@@ -1316,6 +1201,8 @@ footer {
 #announcements{
   display: none;
 }
+
+
 }
 /*+++++++++++++++++++++++++++++++++
 END RESPONSIVE CSS
diff --git a/main/css/chamilo_electric_blue/default.css b/main/css/chamilo_electric_blue/default.css
index b1fc41f53e..88b8949de8 100755
--- a/main/css/chamilo_electric_blue/default.css
+++ b/main/css/chamilo_electric_blue/default.css
@@ -21,6 +21,7 @@ a:active {
     text-decoration: none;
     color : #3757f7;
 }
+
 .navbar .nav > li > a {
     float: none;
     line-height: 20px;
diff --git a/main/css/responsive.css b/main/css/responsive.css
index ca1f811841..7adf5a792d 100755
--- a/main/css/responsive.css
+++ b/main/css/responsive.css
@@ -141,9 +141,41 @@ The more frequent ones have been marked with *
         display: none;
         visibility: hidden;
     }
+
     #header_right #notifications {
       padding:0;
     }
+/* THEMATIC COURSE */
+    .score-thematic .score {
+      text-align: left;
+      width: 90px;
+      float: left;
+      padding-left: 5px;
+    }
+    .score-thematic .name-student {
+       display: none;
+    }
+    .score-thematic .span8 {
+      width: 320px;
+    }
+    .accordion-heading .title-accordion{
+      background: none;
+    }
+    .accordion-heading .accordion-toggle{
+      margin-right: 0;
+    }
+    .accordion-inner .span4 .row-fluid .span4 {
+      width: 105px;
+    }
+    .navbar .nav > li > a {
+    float: none;
+    line-height: 20px;
+    padding-bottom: 7px;
+    padding-right: 10px;
+    padding-top: 7px;
+    color: #FFFFFF;
+    }
+/* END THEMATIC COURSE */
     #top_main_content .span6 {
         width: 100%;
     }
@@ -328,13 +360,12 @@ The more frequent ones have been marked with *
     .course-tool {
         float: left;
         height: 150px;
-        width: 165px;
+        width: 50%;
     }
 
     .course-tool h4 {
         font-size: 14px;
     }
-
     .subbav .nav > li > a:hover,
     .subbav .dropdown-menu a:hover {
         background-color: #555;
@@ -662,13 +693,6 @@ The more frequent ones have been marked with *
         border:none;
         box-shadow: none;
     }
-    .thumbnail > img{
-        -webkit-border-radius: 10px;
-        -moz-border-radius: 10px;
-        border-radius: 10px;
-        border: 3px solid #FFFFFF;
-        box-shadow: none;
-    }
 }
 
 @media (max-width: 600px) {
diff --git a/main/css/thematic.png b/main/css/thematic.png
new file mode 100644
index 0000000000..8a9e590ad2
Binary files /dev/null and b/main/css/thematic.png differ
diff --git a/main/inc/introductionSection.inc.php b/main/inc/introductionSection.inc.php
index 64c8545f78..c26da40b3b 100755
--- a/main/inc/introductionSection.inc.php
+++ b/main/inc/introductionSection.inc.php
@@ -255,9 +255,10 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 										<div class="topics">'.get_lang('NextTopics').'</div>
 										<div class="row-fluid">';
 		$thematic_description_html.='<div class="span6 items-progress">
+										<p class="title_topics">'.$thematic_info['title'].'</p>
 										<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>
+										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info['duration'].' - <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>
 									</div>';
 
 
@@ -279,9 +280,10 @@ if ($tool == TOOL_COURSE_HOMEPAGE && !isset($_GET['intro_cmdEdit'])) {
 			$thematic_advance_info2['start_date'] = api_format_date($thematic_advance_info2['start_date'], DATE_TIME_FORMAT_LONG);
 
 			$thematic_description_html.='<div class="span6 items-progress">
+										<p class="title_topics">'.$thematic_info['title'].'</p>
 										<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>
+										<p class="time">'.get_lang('DurationInHours').' : '.$thematic_advance_info2['duration'].' - <a href="'.$thematicUrl.'">'.get_lang('ShowDetails').'</a></p>
 									</div>';