diff --git a/public/js/picture_displayer.js b/public/js/picture_displayer.js
index a1a3dc24bf8f98dcc08bcf5641b3f53133735b66..48797d5e6b83f9f453824cc0f067dfd708ec131e 100644
--- a/public/js/picture_displayer.js
+++ b/public/js/picture_displayer.js
@@ -59,8 +59,33 @@ var displayerMoyReview = {
 		
 			var texte_li = $(this).text();
 			var tab = texte_li.split(",");
+			if( tab[1].length > 3 )
+				tab[1] = tab[1].substring(0,3);
+			var valeurMoy = parseFloat( tab[1] );
+			if( valeurMoy >= 4.9 )
+				var color ="";
+			else
+			{
+				if( valeurMoy >= 4.0 )
+					var color = "yellow";
+				else
+				{
+					if( valeurMoy >= 3.0 )
+						var color = "white";
+					else
+						var color = "red";
+				}
+			}
+
+			var place = parseInt( tab[2] );
+			if( place > 1 )
+				tab[2] += "eme"
+			else
+				tab[2] += "er"
 			// console.log("ascii:" + tab[0] + ", " + tab[1]);
 			var currentID = intListToString(tab[0]);
+
+			
 			// console.log("decode:" +currentID);
 			// console.log(currentID);
 			requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/search?nasa_id='+currentID, function(json) {
@@ -73,7 +98,7 @@ var displayerMoyReview = {
 								'<h4>'+real_im.data[0].title+'</h4>'+
 								'<p style="font-size: 15px">'+real_im.data[0].description+'</p>'+
 							'</div>'+
-							'<div class="actionrow" style="left: -120px;">'+
+							'<div class="actionrow" style="left: -120px;margin-bottom:15px;">'+
 								'<form method="POST" action="download.php" target="_blank">'+
 									'<input type="hidden" name="urlget" value="'+correctionURLLink(real_im.href)+'">'+
 									'<input type="hidden" name="nasa_id" value="'+currentID+'">'+
@@ -82,6 +107,12 @@ var displayerMoyReview = {
 									'<input type="image" name="submit" alt="Submit" class="download" width="13%" src="./ressources/icons/dwnld.png" onmouseover="this.src=\'./ressources/icons/dwnldVert.png\'" onmouseout="this.src=\'./ressources/icons/dwnld.png\'">'+
 								'</form>'+
 							'</div>'+
+							'<div class="actionrow" style="color:'+color+';left:15px;margin-bottom:15px;right:15px;font-size:35px;font-family: abang">'+
+								tab[1]+
+							'</div>'+
+							'<div class="actionrow" style="color:'+color+';margin-left: 350px;;margin-bottom:15px;right:15px;font-size:35px;font-family: abang">'+
+								tab[2]+
+							'</div>'+
 						'</div>'+
 					'</div>'+
 				'</div>');
@@ -102,7 +133,7 @@ var displayerMoyReview = {
 var displayerNbCDC = {
 
 	startdisplay: function(idToDat, whereToDisplay) {
-		var liste = $('#'+idToDat+" li");
+		/*var liste = $('#'+idToDat+" li");
 
 		$('#'+whereToDisplay).html('<div id="'+whereToDisplay+'row" class="row"></div>');
 		liste.each(function() {
@@ -112,9 +143,68 @@ var displayerNbCDC = {
 			requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/asset/'+currentID, function(json) {
 				$('#'+whereToDisplay+'row').append('<div class="col"><img width=300 src="'+json.collection.items[2].href+'"><p>Cette photo a '+nbCDC+' coups de coeur</p></div>');
 			});
-		});
+		});*/
+
 
+		var liste = $('#'+idToDat+" li");		
+		$('#'+whereToDisplay).html('<div id="'+whereToDisplay+'row" class="row"></div>');
+		liste.each(function() {
+		// 	console.log("__");
+		
+			var texte_li = $(this).text();
+			var tab = texte_li.split(",");
+			// console.log("ascii:" + tab[0] + ", " + tab[1]);
+			var currentID = intListToString(tab[0]);
+			var nbCDC = parseInt( tab[1]);
+			if( nbCDC >= 25 )
+				var color = "yellow"
+			else
+			{
+				if( nbCDC >= 10 )
+					var color = "blue";
+				else
+					var color = "white";
+			}
+
+			var place = parseInt( tab[2] );
+			if( place > 1 )
+				tab[2] += "eme"
+			else
+				tab[2] += "er"
+			// console.log("decode:" +currentID);
+			// console.log(currentID);
+			requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/search?nasa_id='+currentID, function(json) {
+				var real_im = json.collection.items[0];
+				$('#'+whereToDisplay+'row').append('<div class="view container-fluid">'+
+					'<div class="hover-container" style="margin: 3px">'+
+						'<img class="img-fluid" style="margin: 4px" src='+real_im.links[0].href+'>'+
+						'<div class="content">'+
+							'<div class="text scrollbar">'+
+								'<h4>'+real_im.data[0].title+'</h4>'+
+								'<p style="font-size: 15px">'+real_im.data[0].description+'</p>'+
+							'</div>'+
+							'<div class="actionrow" style="left: -120px;margin-bottom:15px;">'+
+								'<form method="POST" action="download.php" target="_blank">'+
+									'<input type="hidden" name="urlget" value="'+correctionURLLink(real_im.href)+'">'+
+									'<input type="hidden" name="nasa_id" value="'+currentID+'">'+
+									'<input type="hidden" name="title" value="'+real_im.data[0].title+'">'+
+									'<input type="hidden" name="preview" value="'+real_im.links[0].href+'"">'+
+									'<input type="image" name="submit" alt="Submit" class="download" width="13%" src="./ressources/icons/dwnld.png" onmouseover="this.src=\'./ressources/icons/dwnldVert.png\'" onmouseout="this.src=\'./ressources/icons/dwnld.png\'">'+
+								'</form>'+
+							'</div>'+
+							'<div class="actionrow" style="color:'+color+';left:15px;margin-bottom:15px;right:15px;font-size:35px;font-family: abang">'+
+								tab[1]+
+							'</div>'+
+							'<div class="actionrow" style="color:'+color+';margin-left: 350px;;margin-bottom:15px;right:15px;font-size:35px;font-family: abang">'+
+								tab[2]+
+							'</div>'+
+						'</div>'+
+					'</div>'+
+				'</div>');
+			});
+		});
 	}
+
 }
 
 
diff --git a/public/leaderboard.php b/public/leaderboard.php
index c498919f0996a04250d9b7dd227e9200f5af9e3c..c3ee9d3077203ca0c92a0cb7b9512331a7222b96 100644
--- a/public/leaderboard.php
+++ b/public/leaderboard.php
@@ -54,25 +54,32 @@ urlHasArgument();
 	generateNavBar('leaderboard');
 	?>
 	<!-- balises cachées contenant les images par ordre de notation -->
-	<div id="NoteLeaderboard" style=""> <!-- display: none -->
+	<div id="NoteLeaderboard" style="display:none"> <!-- display: none -->
 		<?php
 			$test = $orderRepository->fetchAvgNoteOrder();
-		?>
-		<?php
+
+			$i = 1;
 			foreach ($test as $elem): 
 				echo "<li><div class='idPhoto'>".$elem->getIdPhoto().",</div>";
-				echo "<div class='moyenne'>".$elem->getNote()."</div></li>";
+				echo "<div class='moyenne'>".$elem->getNote()."</div>";
+				echo ",<div>".$i."</div></li>";
+				$i++;
 			endforeach
 		?>
 	</div>
 
 	<div id="CDCLeaderboard" style="display: none">
 		<?php
-		$test = $orderRepository->fetchCDCOrder();
+			$test = $orderRepository->fetchCDCOrder();
 
-		foreach ($test as $elem): ?>
-			<li><div class="idPhoto"><?php echo $elem->getIdPhoto(); ?></div><div class="nbCDC"><?php echo $elem->getNbCDC(); ?></div></li>
-		<?php endforeach; ?>
+			$i = 1;
+			foreach ($test as $elem): 
+				echo "<li><div class='idPhoto'>".$elem->getIdPhoto().",</div>";
+				echo "<div class='nbCDC'>".$elem->getNbCDC()."</div>";
+				echo ",<div>".$i."</div></li>";
+				$i++;
+			endforeach
+		?>
 	</div>
 
 	<h1 class="titre">Images les mieux notees</h1>