diff --git a/career_list.php b/career_list.php
index f90bc9b4383a08a8ee4c7e944ef888bdf28f7225..f3dd72cdbfb5ff68bae000b4deba85354ed40ed5 100644
--- a/career_list.php
+++ b/career_list.php
@@ -31,6 +31,8 @@ $PAGE->set_heading($OUTPUT->heading($COURSE->fullname, 2, 'headingblock header o
 // $section = new block_career_section();
 echo $OUTPUT->header();
 	// echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">";
-$content = new view_career_list();
-echo $content->get_content();
-echo $OUTPUT->footer();
\ No newline at end of file
+//$content = new view_career_list();
+
+$renderer = $PAGE->get_renderer('block_career');
+$renderer->get_career_list();
+echo $OUTPUT->footer();
diff --git a/career_unit.php b/career_unit.php
index 4118653bce044272504946acae46c6bdb4f108c8..7ac2f3cbc00ca1b24e26019a89cdcfee155f75e2 100644
--- a/career_unit.php
+++ b/career_unit.php
@@ -4,8 +4,8 @@ require_once('../../config.php');
 require_once('entity/block_career_ressource.php');
 require_once('entity/block_career_section.php');
 
-global $DB;
-
+global $DB,$USER;
+//$OUTPUT->render_from_template($templatename, $context);
 $careerId = required_param('career', PARAM_INT);
 $courseid = required_param('courseid', PARAM_INT);
 
@@ -15,12 +15,25 @@ $course = $DB->get_record('course', array('id' => $courseid), '*', MUST_EXIST);
 require_login($course, false, NULL);
 
 $PAGE->set_context(context_course::instance($courseid));
-$PAGE->set_pagelayout('course');
+$PAGE->set_pagelayout('standard');
+$PAGE->set_pagetype('course-view-' . $course->format);
 $PAGE->set_url($url);
 
-$requete = $DB->get_record_sql('SELECT * FROM {block_career} WHERE id = ?', array($careerId));
-
-if ($requete == false) {
+$cours_url = $CFG->wwwroot . "/course/view.php?id=" . $COURSE->id;
+$edit_url = $CFG->wwwroot . "/blocks/career/career_setting.php?courseid=" . $COURSE->id . "&pathid=" . $careerId;
+
+function is_not_empty_string($str) {
+	$str_copy = $str;
+	$to_delete = array('<p>', '</p>', '<br>', '</br>', ' ');
+	$str_copy = str_replace($to_delete, '', $str_copy);
+	$str_copy = preg_replace('/\s+/', '', $str_copy);
+	if ( $str_copy != "" ) {
+		return true;
+	}
+	return false;
+}
+    $requete = $DB->get_record_sql('SELECT * FROM {block_career} WHERE id = ?', array($careerId));
+    if ($requete == false) {
 
 	$PAGE->set_title("Erreur");
 	$PAGE->set_heading("Erreur");
@@ -31,11 +44,12 @@ if ($requete == false) {
 } else {
 
 	$PAGE->set_title(get_string('title_plugin', 'block_career'));
-
-	$PAGE->set_heading($course->fullname);
+	$headingtitle=$course->fullname.' - '.$requete->name;
+	$PAGE->set_heading($headingtitle);
 	echo $OUTPUT->header();
-	$PAGE->requires->js("/blocks/career/js/sect-descr.js");
-	require_once('view/view_career_unit.php');
+	$renderer = $PAGE->get_renderer('block_career');
+    $renderer->get_career_header($requete->id);
+    $renderer->get_career_section($requete->id);
 	echo $OUTPUT->footer();
 
 }
\ No newline at end of file
diff --git a/entity/block_career_ressource.php b/entity/block_career_ressource.php
index 773a7145b64f2a2a4dd7f3d6e5149cbc7ec97663..7e5050622f37f89a07ad6344722914948ba57334 100644
--- a/entity/block_career_ressource.php
+++ b/entity/block_career_ressource.php
@@ -42,32 +42,36 @@
 		 *
 		 * @return void
 		 */
-		public function get_ressource_by_id($id_course_modules)
-		{
-			
-			global $DB;
-			if ($id_course_modules) {
-				$this->id = $id_course_modules;
-				$requete = $DB->get_record_sql('SELECT * FROM {course_modules} WHERE id = ? AND deletioninprogress = 0', array($id_course_modules));
-				$id_instance = $requete->instance;
-				$id_module = $requete->module;
-				if ($id_module) {
-					$modules = $DB->get_record_sql('SELECT * FROM {modules} WHERE id = ?', array($id_module));
-				}
-				if ($modules->name) {
-					$instance = $DB->get_record_sql('SELECT * FROM {' . $modules->name . '} WHERE id = ?', array($id_instance));
-				}
-				if ($instance->name) {
-					$this->name = $instance->name;
-				}
-				$this->descrition = $instance->intro;
-				$this->type = $modules->name;
-				$this->module = $modules->id;
-				$this->section = new block_career_section();
-				$this->section->get_section_by_id_section($requete->section);
-				$this->create_link();
-			}
-		}
+		 public function get_ressource_by_id($id_course_modules)
+        {
+           
+            global $DB;
+            global $OUTPUT;
+            $output=$OUTPUT;
+            if ($id_course_modules) {
+                $this->id = $id_course_modules;
+                $requete = $DB->get_record_sql('SELECT * FROM {course_modules} WHERE id = ? AND deletioninprogress = 0', array($id_course_modules));
+                $id_instance = $requete->instance;
+                $id_module = $requete->module;
+                if ($id_module) {
+                    $modules = $DB->get_record_sql('SELECT * FROM {modules} WHERE id = ?', array($id_module));
+                }
+                if ($modules->name) {
+                    $instance = $DB->get_record_sql('SELECT * FROM {' . $modules->name . '} WHERE id = ?', array($id_instance));
+                }
+                if ($instance->name) {
+                    $this->name = $instance->name;
+                }
+                $this->description = $instance->intro;
+                $this->type = $modules->name;
+                $this->module = $modules->id;
+                $this->image = $output->image_url('icon', $this->type);
+                $this->section = new block_career_section();
+                $this->section->get_section_by_id_section($requete->section);
+                $this->many=false;
+                $this->create_link();
+            }
+        }
 		
 		/**
 		 * Get all ressources in a section
diff --git a/lang/en/block_career.php b/lang/en/block_career.php
index 20d5ecddd3f1e2bda33052a5655837e29eeddb02..b690afcf0e16182894f24eaa7a551f3b48d2d82a 100644
--- a/lang/en/block_career.php
+++ b/lang/en/block_career.php
@@ -16,4 +16,6 @@
 	$string['add_path'] = 'Add a path';
     $string['any_carrer'] = 'No Path in this course.';
     $string['list_title'] = 'Edit path list';
+    $string['about_this_career']='About this path';
+    $string['edit_path']='Edit';
 ?>
\ No newline at end of file
diff --git a/lang/fr/block_career.php b/lang/fr/block_career.php
index b7c93cce0444763b72f283e085650f68e41b2f8b..b9f24061d1a13668a7f28e881b277400e0d97ee1 100644
--- a/lang/fr/block_career.php
+++ b/lang/fr/block_career.php
@@ -14,5 +14,6 @@
 	$string['heading_plugin'] = 'Les parcours permettent de regrouper certaines ressources du cours dans un enchaînement particulier à part des autres.';
 	$string['add_path'] = 'Ajouter un parcours';
 	$string['any_carrer'] = 'Pas de parcours.';
-	$string['list_title'] = 'Édition des parcours';
-?>
\ No newline at end of file
+	$string['list_title'] = 'Liste des parcours';
+	$string['about_this_career']='À propos de ce parcours';
+	$string['edit_path']='Editer';
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 512afec31023d3774c01a513552e6272ca29b16c..ddd3a7dda22cb0e11619b812d287ca0119361bf7 100644
--- a/readme.md
+++ b/readme.md
@@ -7,7 +7,7 @@ Plugin MOODLE de type bloc de cours qui permet d'afficher une liste de certaines
 - Vrignaud Camille <cvrignaud@softia.fr>
 - Lebeau Michaël <mlebeau@softia.fr>
 - Thomas Fradet <thomas.fradet@univ-lorraine.fr>
-- Léa Marais <lea.marais6@etu.univ-lorraine.fr>
+- Lea Marais <lea.marais6@etu.univ-lorraine.fr>
 
 ## Compatibility
 
diff --git a/renderer.php b/renderer.php
new file mode 100644
index 0000000000000000000000000000000000000000..7650d3a882ec1fed0c1c82406d6de1933c9414d5
--- /dev/null
+++ b/renderer.php
@@ -0,0 +1,79 @@
+<?php
+/*
+ * @package    block_career
+ */
+
+class block_career_renderer extends plugin_renderer_base {
+    function get_career_list(){
+        global $DB, $CFG, $COURSE, $USER;
+        if (!has_capability('moodle/course:update', $context = context_course::instance($COURSE->id), $USER->id)) {
+            $link = $CFG->wwwroot . '/course/view.php?id=' . $COURSE->id;
+            header("Location: {$link}");
+            exit;
+        }
+        $listtitle=get_string('list_title', 'block_career');
+        $headingplugin=get_string('heading_plugin', 'block_career');
+        $addpath=get_string('add_path', 'block_career');	
+        $path=$CFG->wwwroot.'/blocks/career/career_setting.php?courseid='.$COURSE->id;
+        $request = $DB->get_records_sql('SELECT * FROM {block_career} WHERE course = ?', array($_GET["courseid"]));
+        $courseid=$_GET['courseid'];
+        $careerlist=array();
+        if (empty($request)) {
+            $emptycareer=get_string('any_carrer', 'block_career');
+            $careerlist=false;
+            $list=['list_title'=>$listtitle, 'heading_plugin'=>$headingplugin,'empty_career'=>$emptycareer,'add_path'=>$addpath, 'path'=>$path,'course_id'=>$courseid];
+        }
+        else {
+            foreach ($request as $value){
+                $careerpath=$CFG->wwwroot.'/blocks/career/career_setting.php?courseid='.$_GET["courseid"].'&pathid='.$value->id;
+                array_push($careerlist,array('name'=>$value->name,'description'=>$value->description));
+            }
+            $list=['list_title'=>$listtitle, 'heading_plugin'=>$headingplugin,'add_path'=>$addpath, 'path'=>$path,'career_path'=>$careerpath, 'course_id'=>$courseid,'career_list'=>$careerlist];
+            
+        }
+        //print_r($careerlist);
+	    echo $this->render_from_template('block_career/career_list', $list);
+    }
+    function get_career_header($pathid){
+        global $DB, $CFG, $COURSE, $USER;
+        $aboutcareer=get_string('about_this_career','block_career');
+        $request = $DB->get_record('block_career',array('id' => $pathid));
+        $description=$request->description;
+        $list=array('about_this_career'=>$aboutcareer,'description'=>$description);
+        echo $this->render_from_template('block_career/career_header', $list);
+    }
+
+    function get_career_section($careerId){  
+        global $DB, $CFG, $COURSE, $USER,$SITE;
+        $requete = $DB->get_record_sql('SELECT * FROM {block_career} WHERE id = ?', array($careerId));
+        $courseid=$requete->course;
+        $elements = $requete->ressources;
+        $elements = explode(',', $elements);
+        $elements = $requete->ressources;
+        $elements = explode(',', $elements);
+        $sections = array();
+        $ressources = array();
+        $i = 0;
+        foreach ($elements as $value) {
+            $ressource = new block_career_ressource();
+            $ressource->get_ressource_by_id($value);
+            foreach($ressources as $item){
+                if ($item->section->id==$ressource->section->id){
+                    $ressource->many=true;
+                }      
+            }
+            $ressources[$i] = $ressource;
+            $ressources[$i]->lien=true;
+            if(empty($ressources[$i]->section->summary)){
+                $ressources[$i]->section->summary=false;
+            }
+            $i++;  
+        }
+        for($i = 0; $i < count($ressources);$i++){
+            echo $this->render_from_template('block_career/section', $ressources[$i]);
+        }
+        $link=$CFG->wwwroot.'/blocks/career/career_setting.php?courseid='.$requete->course.'&pathid='.$requete->id;
+        $list =['lien'=>false,'edit_path_link'=>$link,'edit_path'=>get_string('edit_path', 'block_career')];
+        echo $this->render_from_template('block_career/section', $list);
+    }
+}
diff --git a/styles.css b/styles.css
index 4b64581906290d81b60254ea5a048b4c86c3bfaf..9c5135b52d56fc07ce6ef0e3c0952bc1851f54b3 100644
--- a/styles.css
+++ b/styles.css
@@ -1,21 +1,21 @@
 /* Path view */
-.career-section-title {
-	background-color: #008196;
-}
-
 .career-section-title > h3 {
-	color: #fafafa;
-	padding: 0.6rem 1rem;
-	margin-bottom: 0;
+	padding: 0 1rem ;
+	margin: 0 10px;
+	padding-bottom: 2rem;
 }
+.resource{
+	margin-top: 5px;
+	margin-left: 10px;
+	margin-bottom: 9px;
+}
+
 
 .career-descr {
-	padding: .75rem 1.25rem;
+	padding: .75rem;
 	margin-bottom: 0;
 	border: 0 solid transparent;
-	border-color: #f1f3f5;
 	color: #6b6e71;
-	background-color: #f5f6f8;
 }
 
 .career-descr-fold {
diff --git a/templates/career_header.mustache b/templates/career_header.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..bf6c488db521d71f1af1019e6b58355852c47966
--- /dev/null
+++ b/templates/career_header.mustache
@@ -0,0 +1,9 @@
+<div class="path-header">
+	<h3>{{about_this_career}}</h3>
+	<div class="collapse" id="summary-collapse" aria-expanded="false">
+	    {{{description}}}
+	</div>
+	<a role="button" class="collapsed" data-toggle="collapse" href="#summary-collapse" aria-expanded="false" aria-controls="summary-collapse">
+	    Afficher / Masquer les infos du parcours
+	</a>
+</div><br>
\ No newline at end of file
diff --git a/templates/career_list.mustache b/templates/career_list.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..bb5f4107637a03efa66033523e927ca95576ac6c
--- /dev/null
+++ b/templates/career_list.mustache
@@ -0,0 +1,17 @@
+<h2>{{list_title}}</h2>
+<div class="alert alert-info">{{heading_plugin}}</div>
+
+<div class="list-group">
+	{{#career_list}}
+		<a class="list-group-item list-group-item-action2" style='color: inherit' href='{{career_path}}''>
+			<h2 class='' style='float: left'>{{name}}</h2>
+			<div class='' style='clear: both'>
+			    {{{description}}}
+			</div>
+		</a>
+	{{/career_list}}
+</div>
+
+{{#empty_career}}<p>{{empty_career}}</p>{{/empty_career}}
+
+<a href="{{path}}" class='btn btn-primary m-b-1'>{{add_path}}</a>
\ No newline at end of file
diff --git a/templates/section.mustache b/templates/section.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..1de0f4120a17bc0d2901c9d276466f5b2954cd45
--- /dev/null
+++ b/templates/section.mustache
@@ -0,0 +1,22 @@
+{{^many}}<hr>
+    {{#section}}
+        <div class="career-section-title">	
+	        <h3>{{name}}</h3>
+	        {{#summary}}
+		    <div class="collapse" id="summary-section-collapse{{id}}" aria-expanded="false">
+	            <div class="career-descr">{{{summary}}}</div>
+	        </div>
+            <a role="button" class="collapsed" data-toggle="collapse" href="#summary-section-collapse{{id}}" aria-expanded="true" aria-controls="summary-collapse" style="margin:5px 18px">
+	            Afficher / Masquer les infos de la section
+	        </a>
+	        {{/summary}}
+	        </div>	      
+{{/section}}
+{{/many}}
+<div class="resource">
+<a href="{{link}}">
+    <img class="" alt="" src="{{image}}">
+    <span class="instancename">{{name}}</span>
+</a>
+{{^lien}}<a href="{{edit_path_link}}" class='btn btn-primary m-b-1'>{{edit_path}}</a>{{/lien}}
+</div>
diff --git a/templates/sections.mustache b/templates/sections.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..21a7ca664a3f09b80d607d3c66ca0d8ce3633da9
--- /dev/null
+++ b/templates/sections.mustache
@@ -0,0 +1,14 @@
+
+<ul class="path-editing">
+	<div class="path-course-header"></div>
+	{{#sections}}
+		{{> format_path/section}}
+	{{/sections}}
+</ul>
+{{#link_add_sections}}
+<div id="changenumsections" class="mdl-right">
+	<a class="add-sections" data-add-sections="{{# str }} addsections {{/ str }}" data-new-sections="" href={{{link_add_sections}}}>
+	  <i class="icon fa fa-plus fa-fw"></i>{{# str }} addsections {{/ str }}
+	</a>
+</div>
+{{/link_add_sections}}
\ No newline at end of file
diff --git a/version.php b/version.php
index 249eb00969878dc4d3ce4435b35b79ea3cb627d7..7e977575ed69f95b96ec11e9117a092973ba686d 100644
--- a/version.php
+++ b/version.php
@@ -28,7 +28,7 @@
 	 */
 	defined('MOODLE_INTERNAL') || die();
 	
-	$plugin->version = 2019062101;
+	$plugin->version = 2020061500;
 	$plugin->requires = 2014051200;
 	$plugin->component = 'block_career';
 	$plugin->release = 'v1.1';
diff --git a/view/view_career_list.php b/view/view_career_list.php
index 47549d028be23490ba48685062c3c3364232d0a4..28a1c0813cd69bd5a7e1b239517ad2b45a6b42ab 100644
--- a/view/view_career_list.php
+++ b/view/view_career_list.php
@@ -31,7 +31,6 @@ public function get_content()
 		$content .= "
 		<a class='list-group-item list-group-item-action' style='color: inherit;' href='$CFG->wwwroot/blocks/career/career_setting.php?courseid=" . $_GET["courseid"] . "&pathid=$value->id'>
 		<h2 class='' style='float: left;'>$value->name</h2>
-		<!--<a href='$CFG->wwwroot/blocks/career/career_setting.php?courseid=" . $_GET["courseid"] . "&pathid=$value->id' class='btn btn-primary btn-sm' style='float: right;'>Modifier</a>-->
 		<div class='' style='clear: both;'>$value->description</div>
 		</a>
 		";
diff --git a/view/view_career_unit.php b/view/view_career_unit.php
index d423f55c52d80c08ffb73bcebf68db16137d9038..dfbbb9fc031963521a002ac551f6364cdb981a96 100644
--- a/view/view_career_unit.php
+++ b/view/view_career_unit.php
@@ -10,7 +10,7 @@ $date = "24 nov";
 $intro = $requete->description;
 $img = '';
 $titre_module = "Introduction";
-
+/*
 $elements = $requete->ressources;
 $elements = explode(',', $elements);
 $sections = array();
@@ -47,7 +47,7 @@ foreach ($sections as $value){
 	$i++;
 }
 $sections = array_combine($keys,$sections);
-ksort($sections);
+ksort($sections);*/
 
 $cours_url = $CFG->wwwroot . "/course/view.php?id=" . $COURSE->id;
 $edit_url = $CFG->wwwroot . "/blocks/career/career_setting.php?courseid=" . $COURSE->id . "&pathid=" . $careerId;
@@ -67,14 +67,14 @@ function is_not_empty_string($str) {
 
 <section class="section">
 
-	<?php if (has_capability('moodle/course:update', $context = context_course::instance($COURSE->id), $USER->id)): ?>
+	<!--<?php //if (has_capability('moodle/course:update', $context = context_course::instance($COURSE->id), $USER->id)): ?>
 		<a class="btn btn-warning" style="float: right; margin-left: 0.25rem;" href="<?php echo $edit_url; ?>">Éditer</a>
-	<?php endif; ?>
+	<?php //endif; ?>-->
 
-	<a class="btn btn-primary" style="float: right;" href="<?php echo $cours_url; ?>">Retour au cours</a>
-	<h2 class="display-4" style="clear: both;"><?php echo $titre; ?></h2>
+	<!--<a class="btn btn-primary" style="float: right;" href="<?php echo $cours_url; ?>">Retour au cours</a>-->
+	<!--<h2 class="display-4" style="clear: both;"><?php echo $titre; ?></h2>
 	<?php 
-	if ( is_not_empty_string($intro) ) {
+	/*if ( is_not_empty_string($intro) ) {
 		echo "<div class='career-descr career-descr-fold' data-foldsize='full'>" . $intro . "<a href='#' class='career-descr-fold-icon'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_bottom' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.847' style='enable-background:new 0 0 451.847 451.847;' xml:space='preserve'><g><path fill='white' d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751   c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0   c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z'></path></g></svg><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' class='arraw_to_top' x='0px' y='0px' width='35px' height='35px' viewBox='0 0 451.847 451.846' style='enable-background:new 0 0 451.847 451.846;' xml:space='preserve'><g><path fill='white' d='M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0   L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4   c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z'/></g></svg></a></div>"; 
 	}
 	?>