diff --git a/views/docs/fr/commandement.php b/views/docs/fr/commandement.php
index 61dfc0a62bd91847e0df705caedea91706af4ebe..ae2eeed37dac4a08d3b4e8b1fba9ec378eda0f87 100644
--- a/views/docs/fr/commandement.php
+++ b/views/docs/fr/commandement.php
@@ -3,7 +3,7 @@
 </div>
 <div class="space20"></div>
 <p>
-Don’t threaten people.
+Don’t threaten people.<br/>
 
 This includes threats of violence, and threats to hurt others in any way.
 
@@ -78,7 +78,6 @@ If you notice abusive behavior, please report it immediately by emailing reporta
 <div class="keywordList col-xs-6 col-xs-offset-3"></div>
 
 <script type="text/javascript">
-
 var keywords = [
 	
 	{
diff --git a/views/docs/fr/keywords.php b/views/docs/fr/keywords.php
index 5f9dc8082c8a6b7d07a76286a2330bff591be656..5af2f257f3bfeddd7dfd75d0e58de0114fd19945 100755
--- a/views/docs/fr/keywords.php
+++ b/views/docs/fr/keywords.php
@@ -4,16 +4,9 @@
 <div class="space20"></div>
 <div class="keywordList"></div>
 
-<style type="text/css">
-	.keypan{
-		min-height: 370px;
-		border: 1px solid #ddd
-	}
-</style>
 <script type="text/javascript">
 
 var keywords = [
-	
 	{
 		"icon" : "fa-circle-o",
 		"title":"Territoire Connecté",
@@ -106,21 +99,10 @@ var keywords = [
 		"body":"Vision globale de l’action locale / Action simultanée sur un territoire global et local."
 	}
 ];
-	
+//var keyword ="../../modules/co2/config/".$domainName."/params.json";
 jQuery(document).ready(function() 
 {
-	$(".keywordList").html('');
-	$.each(keywords,function(i,obj) { 
-		icon = (obj.icon) ? obj.icon : "fa-tag" ;
-		color = (obj.color) ? obj.color : "#E33551" ;
-		$(".keywordList").append(
-		'<div class="col-sm-4 col-xs-6"><div class="keypan panel panel-white">'+
-			'<div class="panel-heading border-light ">'+
-				'<span class="panel-title homestead"> <i class="fa '+icon+' faa-pulse animated-hover fa-2x"></i> <span style="font-size: 35px; color:'+color+';"> <br/>'+obj.title.toUpperCase()+'</span></span>'+
-			'</div>'+
-			'<div class="panel-body">'+obj.body+"</div>"+
-		"</div></div>");
-	 });
+	getConceptList(keywords, ".keywordList");
 });
 
 </script>
diff --git a/views/docs/fr/philosophy.php b/views/docs/fr/philosophy.php
index f7c716937c94443076ba8f407073f429fd3402ec..a02a35a9d74424ac33a59b77ad36266fb9b6653d 100755
--- a/views/docs/fr/philosophy.php
+++ b/views/docs/fr/philosophy.php
@@ -1,5 +1,8 @@
-<div class="panel-heading border-light center text-dark partition-white radius-10">
-	<span class="panel-title"> <i class='fa fa-heart text-red faa-pulse animated fa-2x  '></i> <span style="font-size: 48px">PHILOSOPHY</span></span>
+<div id="header-docs" class="panel-heading border-light center text-dark partition-white radius-10">
+	<span class="panel-title"> 
+		<i class='fa fa-heart text-red faa-pulse animated'></i> PHILOSOPHIE<br>
+		<span class="sub-title text-red">"Art is the heart of our culture"</span>
+	</span>
 </div>
 <div class="space20"></div>
 <div class="keywordList"></div>
@@ -48,17 +51,19 @@ var keywords = [
 			"<br>et que c'est pas juste un slogan "+
 			"<br>rien ne l'arretera tant qu'on ne le vivra pas "+
 			"<br>on continuera à chercher"
-	},
+	}/*,
 	{
 		"icon" : "fa-heart text-red",
 		"title":"Art is the heart of our culture",
 		"body":""
-	},
+	},*/
 ];
 	
 jQuery(document).ready(function() 
 {
-	$(".keywordList").html('');
+		getConceptList(keywords, ".keywordList");
+
+	/*$(".keywordList").html('');
 	$.each(keywords,function(i,obj) { 
 		icon = (obj.icon) ? obj.icon : "fa-tag" ;
 		color = (obj.color) ? obj.color : "#E33551" ;
@@ -73,7 +78,7 @@ jQuery(document).ready(function()
 				 "</blockquote>"+
 			"</div>"+
 		"</div>");
-	 });
+	 });*/
 });
 
 </script>
diff --git a/views/docs/fr/projects.php b/views/docs/fr/projects.php
index 972eb46d7174487c3a58edb6631acbb572d7ff86..42366bde19e1507bb4f0633e04aaee3c28c70fe7 100644
--- a/views/docs/fr/projects.php
+++ b/views/docs/fr/projects.php
@@ -1,18 +1,17 @@
 
+
 <style type="text/css">
-	.keypane{
-		height: 325px;
-		text-align: left
-	}
+	.keypane{min-height: 400px;}
 </style>
-
-
-<div class="panel-heading border-light center text-dark partition-white radius-10">
-    <span class="panel-title homestead"> <i class='text-red fa fa-lightbulb-o faa-pulse animated fa-3x  '></i> <span style="font-size: 48px">PROJETS</span></span>
+<div id="header-docs" class="panel-heading border-light center text-dark partition-white radius-10">
+    <span class="panel-title">  
+    	<i class='fa fa-lightbulb-o faa-pulse animated'></i> NOS PROJETS<br>
+    	<span class="sub-title">CITATIONS LOREM ISPSUM</span>
+    </span>
 </div>
 <div class="space20"></div>
-
-<div class="col-xs-4 keypane">
+<div class="keywordList"></div>
+<!--<div class="col-xs-4 keypane">
 	<h1><i class="text-red fa fa-cube"></i> PIXEL HUMAIN </h1>
 	<div>
 		Un collectif d'acteurs oeuvrant pour les communs
@@ -23,9 +22,9 @@
 		<br>Open Source, Semantique et Interopérable
 		<br>Le Lien entre le réél et le virtuel
 	</div>
-</div>
+</div>-->
 
-<div class="col-xs-4 keypane">
+<!--<div class="col-xs-4 keypane">
 	<h1><img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/CO2r.png" height=50> Communecter </h1>
 	<div>
 		Un Réseau Sociétale Libre et Open Source 
@@ -36,95 +35,61 @@
 		<br>Une boite outil citoyenne pour encourager , faciliter et dynamiser l'implication citoyenne.
 		<br>le CTK : Citizen Tool Kit , Un socle technique et modulaire pour construire toutes sorte d'outils citoyens et administratifs spécialisés
 	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-map-marker"></i> Network <br>Marque Blanche  </h1>
-	<div>
-		Une Interface et Cartographie 
-		<br>Configurable 
-		<br>Filtrable 
-		<br>R&D : sans base de donnée
-		<br>Contributive
-		<br><a class="btn btn-default btn-sm" href="https://www.communecter.org/?network=BretagneTelecom" target="_blank">Exemple : Bretagne Telecom</a> 
-		<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/marqueblanche" target="_blank">En savoir plus </a>
-	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-wifi"></i> Smarterre</h1>
-	<div>
-		Apporter de la croissance aux organisations locales avec une vision humaine, intégrer un projet de société locale pour les générations futures qui prend en compte l’obsolescence et la finitude des ressources
-		<br><a class="btn btn-default btn-sm" href="javascript:;" onclick="navInDocs('smarterre', '<?php echo Yii::app()->language ?>' );">En savoir plus </a>
-	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-cogs"></i> FABLAB.re</h1>
-	<div>
-		Fablab de bidouilleurs réunionais qui auront bientot un bus et un tiers lieux
-	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-connectdevelop"></i> Open Système </h1>
-	<div>
-		Expérimentation de gouvernance totalement horizontale 
-		<br>Opensource 
-		<br>Conseil Collégiale
-		<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/marqueblanche" target="_blank">En savoir plus </a>
-	</div>
-</div>
+</div>-->
 
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-bus"></i> CO BUS </h1>
-	<div>
-		Un bus itinérant Communecté 
-		<br>sponsorisé par l'AFNIC
-		<br>rempli d'electronique 
-		<br>autonome energiquement 
-		<br>pour agir dans les zones prioritaires et déconnecté
-		<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/co_bus" target="_blank">En savoir plus </a>
-	</div>
-</div>
 
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-wifi"></i> CO PI </h1>
-	<div>
-		CO : Communecter + PI : Raperi Pi
-		<br>Un serveur Low Tech Communecter
-		<br>fonctionne offline
-		<br>sur un modèle distribué, interconnection entre COPI 
-		<br>servant tout les service de CO
-		<br><a class="btn btn-default btn-sm" href="https://chat.lescommuns.org/channel/copi" target="_blank">En savoir plus </a>
-	</div>
-</div>
+<script type="text/javascript">
+	var keywords = [
+	{
+		"icon" : "fa-globe",
+		"title":"Smarterre",
+		"body":"Apporter de la croissance aux organisations locales avec une vision humaine, intégrer un projet de société locale pour les générations futures qui prend en compte l’obsolescence et la finitude des ressources<br><a class='btn btn-danger btn-sm' href='javascript:;' onclick='navInDocs(\"smarterre\", \"<?php echo Yii::app()->language ?>\" );'>En savoir plus </a>"
+	},
+	{
+		"icon" : "fa-cogs",
+		"title":"FABLAB.re",
+		"body":"Fablab de bidouilleurs réunionais qui auront bientot un bus et un tiers lieux"
+	},
+	{
+		"icon" : "fa-connectdevelop",
+		"title":"Open Système",
+		"body":"Expérimentation de gouvernance totalement horizontale<br>Opensource<br>Conseil Collégiale<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/marqueblanche' target='_blank'>En savoir plus </a>"
+	},
+	{
+		"icon" : "fa-bus",
+		"title":"CO BUS",
+		"body":"Un bus itinérant Communecté<br>sponsorisé par l'AFNIC<br>rempli d'electronique<br>autonome energiquement<br>pour agir dans les zones prioritaires et déconnecté<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/co_bus' target='_blank'>En savoir plus </a>"
+	},
+	{
+		"icon" : "fa-wifi",
+		"title":"CO PI",
+		"body":"CO : Communecter + PI : Raperi Pi<br>Un serveur Low Tech Communecter<br>fonctionne offline<br>sur un modèle distribué, interconnection entre COPI<br>servant tout les service de CO<br><a class='btn btn-danger btn-sm' href='https://chat.lescommuns.org/channel/copi' target='_blank'>En savoir plus </a>"
+	},
+	{
+		"icon" : "fa-wifi",
+		"title":"FAI Libre Reunion",
+		"body":"Installation d'un FAI libre Réunionais<br>sponsorisé par l'AFNIC"
+	},
+	{
+		"icon" : "fa-book",
+		"title":"COopedia",
+		"body":"R&D : Augmenter Wikipedia avec un référencement et une inteorpérabilité avec CO<br> Terrapedia : wikipedia territorial ouvert et contributif"
+	},
+	{
+		"icon" : "fa fa-map-marker",
+		"title":"Catographie en marque blanche",
+		"body":"Une Interface et Cartographie<br>Configurable<br>Filtrable<br>R&D : sans base de donnée<br>Contributive<br><a class='btn btn-danger btn-sm' href='https://www.communecter.org/?network=BretagneTelecom' target='_blank'>Exemple : Bretagne Telecom</a>"	
+	},
+	{
+		"icon" : "fa-cubes",
+		"title":"Camp TIC",
+		"body":"Equipement autonome et connecté pour partager l'activité d'un tiers lieux<br>sponsorisé par l'AFNIC<br>C'est un valise complète<br>Connectique réseau internet<br>Son et Video pour des visios partages<br>des Agenda partagé entre réseau de tiers lieux<br>partage de ressources, de besoins, de service et de compétence"
+	},
+	
+];
+jQuery(document).ready(function() 
+{
+	getConceptList(keywords, ".keywordList");
+});
 
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-cubes"></i> Tiers Lieux <br> Camp TIC</h1>
-	<div>
-		Equipement autonome et connecté pour partager l'activité d'un tiers lieux
-		<br>sponsorisé par l'AFNIC
-		<br>C'est un valise complète 
-		<br>Connectique réseau internet 
-		<br>Son et Video pour des visios partages
-		<br>des Agenda partagé entre réseau de tiers lieux 
-		<br>partage de ressources, de besoins, de service et de compétence 
-	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-wifi"></i> FAI Libre Reunion </h1>
-	<div>
-		Installation d'un FAI libre Réunionais 
-		<br>sponsorisé par l'AFNIC
-	</div>
-</div>
-
-<div class="col-xs-4 keypane">
-	<h1><i class="text-red fa fa-book"></i> COopedia</h1>
-	<div>
-		R&D : Augmenter Wikipedia avec un référencement et une inteorpérabilité avec CO
-		<br> Terrapedia : wikipedia territorial ouvert et contributif 
-	</div>
-</div>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/views/docs/index.php b/views/docs/index.php
index 4c24bcc821a2e9231387a3e27de13e8265f3a805..f1398aa9684b9bda401c2f8db2e7f356853aa933 100644
--- a/views/docs/index.php
+++ b/views/docs/index.php
@@ -76,15 +76,71 @@
 	ul.subMenu{
 		padding-left: 30px
 	}
+#show-menu-xs{
+	    padding: 7px 15px;
+    font-size: 20px;
+}
+.keypan .panel-heading{
+	margin-top: 20px;
+    min-height: 70px;
+}
+.keypan{
+	    border: none;
+    margin-bottom: 10px;
+    box-shadow: none;
+}
+.keypan .panel-body{
+	min-height: 200px;
+}
+.keypan hr {
+	width: 75%;
+    margin: auto;
+}
+#header-docs .panel-title{
+	font-size: 40px;
+}
+#header-docs .panel-title .sub-title{
+	font-size: 20px !important;
+	font-style: italic;	
+}
+@media (max-width: 991px) {
+ /* .open-type-filter{
+        display: block;
+    position: absolute;
+    right: -33px;
+    height: 50px;
+    width: 50px;
+    border: 1px solid #dadada;
+    border-radius: 100%;
+    text-align: right;
+    padding-right: 8px;
+    z-index: -1;
+    font-size: 20px;
+  }*/
+  #menu-left{
+    width: 56%;
+    left: -56%;
+	background-color: white;
+	}
+  
+}
+
+@media (min-width: 991px) {
+  #menu-left {
+    left:0 !important;
+  }
+}
 </style>
 <div id="header-doc" class="shadow2">
-	<button id="show-menu-xs" class="visible-xs tooltips" data-placement="bottom" data-title="Menu"><i class="fa fa-menu"></i></button>
-	<h2><i class="fa fa-book"></i><?php echo Yii::t("docs", "All you need to know about") ?></h2>
+	<a href='javascript:;' id="show-menu-xs" class="visible-xs visible-sm pull-left" data-placement="bottom" data-title="Menu"><i class="fa fa-bars"></i></a>
+	<h2 class="elipsis"><i class="fa fa-book hidden-xs"></i> <?php echo Yii::t("docs", "All <span class='hidden-xs'>you need to know</span> about") ?></h2>
 	<img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/LOGOS/CO2/logo-head-search.png" 
-                     class="logo-menutop main pull-left hidden-xs hidden-sm" height=30>
+                     class="logo-menutop main pull-left" height=30>
+    <!--<img src="<?php echo Yii::app()->theme->baseUrl; ?>/assets/img/LOGOS/CO2/logo-min.png" 
+                     class="logo-menutop main pull-left visible-xs visible-sm" height=30>-->
 </div>
-<div id="menu-left" class="col-md-3 col-sm-2 hidden-xs shadow2">
-	<ul class="col-md-12 col-sm-12 col-xs-12 no-padding">
+<div id="menu-left" class="col-md-3 col-sm-2 col-xs-12 shadow2">
+  	<ul class="col-md-12 col-sm-12 col-xs-12 no-padding">
 		<li class="col-xs-12 no-padding">
 			<a href="javascript:" class="link-docs-menu active down-menu" data-type="welcome" data-dir="<?php echo Yii::app()->language ?>">
 				<i class="fa fa-angle-down"></i> <?php echo Yii::t("docs","WEL<span class='text-red'>CO</span>ME"); ?>
@@ -237,7 +293,7 @@
 		</li>
 	</ul>
 </div>
-<div id="container-docs" class="col-sm-offset-2 col-md-offset-3 col-md-9 col-sm-10 col-xs-12 no-padding">
+<div id="container-docs" class="col-md-offset-3 col-md-9 col-sm-12 col-xs-12 no-padding">
 </div>
 <script type="text/javascript">
 jQuery(document).ready(function() {
@@ -258,8 +314,22 @@ jQuery(document).ready(function() {
 			}
 			
 		}
+		if($("#show-menu-xs").is(":visible")){
+			$("#show-menu-xs").removeClass("show-dir");
+			$("#menu-left").animate({ left : "-56%" }, 400 );
+		}
 		navInDocs($(this).data("type"), $(this).data("dir"), $(this).data("get"));
 	});
+	$("#show-menu-xs").click(function(){
+    if(!$(this).hasClass("show-dir")){
+      $(this).addClass("show-dir").data("title", "<?php echo Yii::t("common","Close") ?>").find("i").removeClass("fa-chevron-right").addClass("fa-times");
+      $("#menu-left").animate({ left : "0%" }, 400 );
+    }else{
+      $(this).removeClass("show-dir").data("title", "<?php echo Yii::t("common","Open filtering by type") ?>").find("i").removeClass("fa-times").addClass("fa-chevron-right");
+      $("#menu-left").animate({ left : "-56%" }, 400 );
+    
+    }
+  });
 });
 function navInDocs(page, dir, get){
 	showLoader('#container-docs');
@@ -273,4 +343,23 @@ function navInDocs(page, dir, get){
 	ajaxPost('#container-docs' ,baseUrl+'/'+moduleId+"/default/view/page/"+page+"/dir/docs"+add,
 			 null,function(){},"html");
 }
+function getConceptList(list, dom){
+	str="";
+	$.each(list,function(i,obj) { 
+		icon = (obj.icon) ? obj.icon : "fa-tag" ;
+		color = (obj.color) ? obj.color : "#E33551" ;
+		size = (obj.size) ? obj.size : "20" ;
+		str+=
+		'<div class="col-md-4 col-sm-6 col-xs-12"><div class="keypan panel panel-white">'+
+			'<div class="panel-heading border-light ">'+
+				'<span class="panel-title">'+ 
+					'<i class="fa '+icon+' faa-pulse animated-hover fa-2x"></i>'+
+					' <span style="font-size: '+size+'px; color:'+color+';"> <br/>'+obj.title.toUpperCase()+'</span></span>'+
+			'</div>'+
+			'<hr/>'+
+			'<div class="panel-body">'+obj.body+"</div>"+
+		"</div></div>";
+	 });
+	$(dom).html(str);
+}
 </script>
\ No newline at end of file