diff --git a/amd/build/suivi-table.js b/amd/build/suivi-table.js
index 5d0388ba2d5e1104cff438001b84e99b070ebab3..0a19aa86dfd72c713148550566380f8f7585259b 100644
--- a/amd/build/suivi-table.js
+++ b/amd/build/suivi-table.js
@@ -24,7 +24,7 @@
 define(['jquery'],
        function($) {
        	var all_selected=false;
-        console.log($(".checkstudent"));
+        nb_results=$("#table-body input").length;
         $("#select-actions-suivi-iena").prop("disabled", true);
        	return{
        		registerSelectAll:function(){
@@ -32,12 +32,9 @@ define(['jquery'],
        			$('#iena-select-all').on('click', function(e){
 					select_all_studs(e);
 	    		});
-                 $(".checkstudent").on("click", function(){
-                    checkSelectActions();
-                })
-	    		
-	    		
-	    		
+            $(".checkstudent").on("click", function(){
+              checkSelectActions();
+            })
        		}
        	}
 
@@ -58,8 +55,10 @@ define(['jquery'],
 	}
 
       function checkSelectActions(){
+        var selectedChecks=$("#table-body input:checked");
         if($("#select-actions-suivi-iena").prop("disabled") == false){
-            var selectedChecks=$("#table-body input:checked");
+            
+            
             if(selectedChecks.length==0){
                 $("#select-actions-suivi-iena").prop("disabled", true);
             }
@@ -67,7 +66,7 @@ define(['jquery'],
         else{
             $("#select-actions-suivi-iena").prop("disabled", false);
         }
-       
+        $("#count-selected-students").text(selectedChecks.length+" résultat(s) sélectionné(s) sur "+nb_results);
     }
 
 
diff --git a/classes/output/renderer.php b/classes/output/renderer.php
index e02106a5c7a7a6118c3ea53ce5566780716b61e0..db0b4f6efffb10305f22df177a3a4f1f8dddcd99 100644
--- a/classes/output/renderer.php
+++ b/classes/output/renderer.php
@@ -95,6 +95,18 @@ class renderer extends section_renderer {
         return $this->render(course_get_format($course)->inplace_editable_render_section_name($section, false));
     }
 
+     public function display_completion($data){
+        echo $this->render_from_template('format_iena/suivi', $data);
+    }
+
+    public function display_table_completion($data){
+        echo $this->render_from_template('format_iena/suivi-table', $data);
+    }
+
+    public function display_message($data){
+        echo $this->render_from_template('format_iena/send-message', $data);
+    }
+
 
 
 }
diff --git a/renderer.php b/renderer.php
index 8618de695a49a8cd6f0e2f67b683b8d62c6c7f09..bdb75f0209fea0d531c03df44bb2a013cc14aaf0 100644
--- a/renderer.php
+++ b/renderer.php
@@ -13,24 +13,22 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-/**
- * format_iena
- *
- * @package    format_iena
- * @copyright  2018 Softia/Université lorraine
- * @author     vrignaud camille/Thomas Fradet
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
- */
+// 
+
+
+
 
 defined('MOODLE_INTERNAL') || die();
 
 
+require_once($CFG->dirroot . '/course/format/topics/renderer.php');
+
 /**
  * format_iena_renderer
  *
  * @package    format_iena
+ * @category   format
  * @copyright  2018 Softia/Université lorraine
  * @author     vrignaud camille
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-
diff --git a/styles.css b/styles.css
index 5a67f01476615f9507c9710f7a71e72c3f639ebe..1dc13c03d59df6929e11bbb3142a0ccc489e7bbe 100644
--- a/styles.css
+++ b/styles.css
@@ -735,32 +735,40 @@ th.th-rotate > div > span {
 	color: white;
 }
 
+
 .state-1 span.icon-progress::after{
 	content: "\f1db";
 	font-family: FontAwesome; width: 100%; display: inline-block;text-align: center; 
 	color: white;
-	font-size: x-large;
-	vertical-align: text-bottom;
-    line-height: 19px;
+	font-size: 130%;
+	vertical-align: middle;
+    line-height: 20px;
+    
 }
 
 .state-2 span.icon-progress::after{
 	content: "\f05d";
 	font-family: FontAwesome; width: 100%; display: inline-block; text-align: center;
 	color: white;
-	font-size: x-large;
-	vertical-align: text-bottom;
-    line-height: 19px;
+	font-size: 130%;
+	vertical-align: middle;
+    line-height: 20px;
+    
 }
 .state-3 span.icon-progress::after{
 	content: "\f1db";
 	font-family: FontAwesome; width: 100%; display: inline-block; text-align: center;
 	color: white;
-	font-size: x-large;
-	vertical-align: text-bottom;
-    line-height: 19px;
+	font-size: 130%;
+	vertical-align: middle;
+    line-height: 20px;
+   
 }	
 
+#table-body span.icon-progress::after{
+    position: relative;
+    top: -1px;
+}
 .section-progress span.icon-progress::after, .iena-progress-legend span.icon-progress::after{
 	font-size: small;
 	line-height: 17px!important;
@@ -870,34 +878,39 @@ tbody th{
 }
 
 #caption-iena .caption-status{
-	display: inline-block;
+	display: flex;
 	margin-right: 20px;
 }
 
 #caption-iena .caption-status .pointer-help{
 	width: 32px;
 	height: 25px;
-	margin-right: 2px;
-	display: inline-block;
-	vertical-align: bottom;
+	margin-right: 7px;
+	display: flex;
+    align-items: center;
+    border-radius: 5px;
 }
 
 #caption-iena .caption-status .pointer-help .icon-progress{
-	line-height: 24px;
+    display: flex;
+    margin: auto;
 }
 #caption-iena .caption-status .caption-title{
 	display: inline-block;
 }
 
 #caption-iena{
-	margin-top: 20px;
-	margin-bottom: 40px;
+	margin-top: 50px;
+	margin-bottom: 30px;
 }
 
 #caption-iena .icon-progress::after{
 	
 }
 
+.caption-wrapper{
+    display: flex;
+}
 .iena-icon-distance, .iena-icon-presence{
 	content: "";
 	display: block;
@@ -932,7 +945,9 @@ tbody th{
   overflow: auto;
   white-space: nowrap;
   max-height: 600px;
-  border:none;
+  border:1px solid lightgrey;
+  border-radius: 5px;
+  padding: 0 10px 10px 10px;
 }
 
 .first-column-iena, .second-column-iena, .actions-column-iena, .third-column-iena{
@@ -967,4 +982,16 @@ th.first-column-iena, th.second-column-iena, th.actions-column-iena, th.third-co
 }
 .course-section-header.d-flex{
     align-items: center;
+}
+
+.iena-filters .input-group .input-group-text{
+    border:none;
+}
+
+.iena-filters .input-group>.custom-select:not(:first-child){
+    border-color: #e9ecef;
+}
+
+#count-selected-students{
+    margin-top: 10px;
 }
\ No newline at end of file
diff --git a/suivi_unit.php b/suivi_unit.php
index 7f61762d36ba157049caf7fcc91807fbf850cef3..5c69804c9995ea12005e736eaf572847e947f115 100644
--- a/suivi_unit.php
+++ b/suivi_unit.php
@@ -368,7 +368,6 @@ if (isset($_POST['action']) && !empty($_POST['action'])) {
     }
     
     $renderer = $PAGE->get_renderer('format_iena');
-
     $renderer->display_completion($data);
     echo $OUTPUT->footer();
 }
diff --git a/templates/suivi-table.mustache b/templates/suivi-table.mustache
index c7454c5aad7c03dff70f97adb650995069e6a770..3d0646a7a00945833142a5f34676769fab741d81 100644
--- a/templates/suivi-table.mustache
+++ b/templates/suivi-table.mustache
@@ -1,5 +1,5 @@
 {{#count_results}}
-	<p>{{count_results}} résultat(s)</p>
+	
 	<div class="table-wrapper">
 		<table id="suivi">
 			<thead>
@@ -53,8 +53,8 @@
 			</tbody>
 		</table>
 	</div>
-	
 
+<p id="count-selected-students">0 résultat(s) sélectionnés sur {{count_results}}</p>
 {{/count_results}}
 {{^count_results}}
 	<div class="alert alert-primary">Il n'y a pas de résultats correspondants aux filtres sélectionnés</div>
diff --git a/templates/suivi.mustache b/templates/suivi.mustache
index 8c1a7b5c2de0d52cbe468c4b87fa532a73342b15..7c54138aeb7acd9b6337addbeac39b4e98db5c7f 100644
--- a/templates/suivi.mustache
+++ b/templates/suivi.mustache
@@ -27,7 +27,7 @@
 	</div>
 </div>
 
-<form style="clear: right;" class="form-inline" action="" method="GET">
+<form style="clear: right;" class="form-inline iena-filters" action="" method="GET">
 	<input name="courseid" type="number" hidden="hidden" style="display: none;" value="">
 
 	<label class="sr-only" for="section-select">Section</label>
@@ -98,7 +98,7 @@
 	<div class="alert alert-danger  iena-message">Messages non envoyés</div>
 {{/msg_failure}}
 <div id="caption-iena"><h5>{{# str }} caption, format_iena {{/ str}}</h5>
-	<div class="">
+	<div class="caption-wrapper">
 		<div class="caption-status"><div class="pointer-help state-0"><span class="icon-progress"></span></div> <span class="caption-title"> {{# str }} status0, format_iena {{/ str}}</span></div>
 		<div class="caption-status"><div class="pointer-help state-1"><span class="icon-progress"></span></div> <span class="caption-title">{{# str }} status1, format_iena {{/ str}}</span></div>
 		<div class="caption-status"><div class="pointer-help state-2"><span class="icon-progress"></span></div>  <span class="caption-title">{{# str }} status2, format_iena {{/ str}}</span></div>