diff --git a/components/featured.php b/components/featured.php
new file mode 100644
index 0000000..1de7681
--- /dev/null
+++ b/components/featured.php
@@ -0,0 +1,40 @@
+<div id="featured-articles" class="preview-container">
+  <?php
+  query_posts(array( 
+    'post_type' => 'post',
+    'tax_query' => array(
+        array(
+            'taxonomy' => 'niveau',
+            'terms' => 'featured',
+            'field' => 'slug',
+        )
+    ),
+    'orderby' => 'date',
+    'post_count' => '2',
+    'order' => 'DESC' 
+  ));
+  
+  if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
+  
+  <article class="preview">
+    <a href="<?php the_permalink(); ?>" class="preview-link">
+      <div class="preview-item" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>');">
+		    <div class="preview-overlay">
+		      <div class="preview-categories">
+		        <?php $category = get_the_category();
+          echo"<span class='badge badge-category'>" . $category[0]->cat_name . "</span>"; ?>
+          </div>
+		    
+		      <h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
+		    </div>
+      </div>
+		</a>
+  </article>
+  
+  
+  <?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
+</div>
+ 
+ 
+
+
diff --git a/functions.php b/functions.php
index f61c632..9fbc9ff 100644
--- a/functions.php
+++ b/functions.php
@@ -16,4 +16,27 @@
       'after_title'   => '</h1>',
     ));
     
+/* 2. Niveau support (for featured posts) */
 
+register_taxonomy(
+  'niveau',
+  'post',
+  array(
+    'label' => 'Niveau',
+      'labels' => array(
+      'name' => 'Niveaux',
+      'singular_name' => 'Niveaux',
+      'all_items' => 'Tous les niveaux',
+      'edit_item' => 'Éditer le niveau',
+      'view_item' => 'Voir le niveau',
+      'update_item' => 'Mettre à jour le niveau',
+      'add_new_item' => 'Ajouter un niveau',
+      'new_item_name' => 'Nouveau niveau',
+      'search_items' => 'Rechercher parmi les niveaux',
+      'popular_items' => 'Niveaux les plus utilisés'
+    ),
+  'hierarchical' => false
+  )
+);
+
+register_taxonomy_for_object_type( 'niveau', 'post' );
diff --git a/index.php b/index.php
index cb58c05..2b6aeab 100644
--- a/index.php
+++ b/index.php
@@ -1,5 +1,8 @@
 <?php get_header(); ?>
 <main class="col-md-9">
+  <h1 class="page-title"><i class="fa fa-fw fa-star"></i> À la une</h1>
+	<?php include(TEMPLATEPATH . '/components/featured.php'); ?>
+
   <h1 class="page-title"><i class="fa fa-fw fa-clock-o"></i> Articles récents</h1>
 	<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
 </main>
diff --git a/scss/_blog.scss b/scss/_blog.scss
index bea79c1..536a8ee 100644
--- a/scss/_blog.scss
+++ b/scss/_blog.scss
@@ -13,145 +13,116 @@
 
 /* 2.1 - Previews */
 
-.previews-section {
-  display: flex;
-  align-content: flex-start;
-  flex-wrap: wrap;
-}
-
 .preview-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; 
+  justify-content: space-between;
+  align-content: flex-start;
   margin-bottom:1em;
-  padding:0.4em;
-  width:100%
-}
-
-@media(max-width:767px){}
-@media(min-width:768px){}
-@media(min-width:992px){
-
-  .prev-col-2 .preview-container {
-    width:50%;
-  }
-
-  .prev-col-3 .preview-container {
-    width:33%;
-  }
-
-  .prev-col-4 .preview-container {
-    width:25%;
-  }
-
-}
-
-.card-preview {
-  @include border-radius();
-  width:100%;  
-  margin:auto;
-  box-shadow: $large-shadow, $inset-shadow;
-}
-
-.preview-link:hover {
-  text-decoration:none!important;
-}
-
-.preview-item {
+  padding: 0;
+  width:100%;
   
-  height:200px;
-  overflow:hidden;
-  font-size:0.9em;
-	line-height: 1.5em !important;
-  padding:0.2em;
-  text-align:justify;
-  background-color:rgba(0,0,0,0.05);
-  color:rgba(0,0,0,0.4);
-	position: relative;
-	
-	
-	display: flex;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-  justify-content: center;
+  .preview {
+    width: 48%;
+    height:220px;
+  }
 }
 
-.preview-content {
-  max-height:200px;
-}
-
-.preview-content > p {
-  width:100%;
+.preview {
   margin:auto;
-}
-
-.preview-content > p.p-img {
-  text-align:center;
-  margin:auto;
-  padding:auto;
-  display: block;
-  width:100%;
-}
-
-.preview-content > p > img {
-  max-width:100%;
-  height:auto;
-  vertical-align:middle;
-  margin:auto;
-  text-align:center;
-}
-
-.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
-  margin-bottom:0px;
-  max-width:100%;
-  display:none;
-}
-
-.preview-item h1 {
-  display:none;
+  margin-bottom: 1em;
+  &-link {
+    display:block;
+    width:100%;
+    height:100%;
+    padding:0;
+    margin:0;
+    text-decoration:none!important;
+    &:hover .preview-item {
+      background-size: 133% auto;
+	    background-position: center center;
+    }
+  }
+  
+  &-item {
+    height: 100%;
+	  width: 100%;
+	  background-size: 100% auto;
+	  background-position: center center;
+	  transition: background-size .5s;
+  }
 }
 
 .preview-overlay {
 	height: 100%;
 	width: 100%;
-	opacity: 0;
-	top: 0;
-	left: 0;
-	position: absolute;
+	opacity: 1;
 	padding: 0;
-	transition: opacity .5s;
+	transition: background .5s;
 	color: #FFF;
-	background-color: rgba(0,0,0,0.5);
-	text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
-  backdrop-filter: none;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+	align-items: flex-start;
+	text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
+	color: white!important;
+	
+	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 60%);
+	
+	&:hover {
+	  opacity: 1;
+	  
+	  h1, h2 {
+	    opacity: 1;
+	    color: #FFF;
+	  }
+	  
+	  .badge {
+	    background-color: lighten($color-category, 10%);
+	  }
+	}
+	
+	.badge {
+	  background-color: $color-category;
+	}
+  
+  h1, h2 {
+    max-width:100%;
+    margin:auto;
+    margin-bottom:0px;
+    text-align:left;
+    display:block;
+    font-size:2em;
+    transition: opacity .5s;
+    text-shadow: 1px 1px 0px rgba(0,0,0,1);
+    opacity: 0.6;
+    padding: 0.25em;
+	  color: #FFF;
+  }
 }
 
-.preview-overlay h1 {
-  max-width:100%;
-  padding-top:0.3em;
-  margin:auto;
-  margin-bottom:0px;
-  text-align:center;
-  display:block;
-  font-size:2em;
-  color: white;
+.preview-item {
+  .preview-content {
+	  height: 100%;
+	  width: 100%;
+	  background-size: 100% auto;
+	  background-position: center center;
+	  transition: background-size .5s;
+  }
+  
+  &:hover .preview-content {
+    background-size: 133% auto;
+	  background-position: center center;
+  }
 }
 
-.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10  {
-	color:white;
-  text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
-}
-
-.preview-item:hover .preview-overlay {
-  opacity: .9;
-  transition: opacity .5s;
-  backdrop-filter: blur(2px);
-}
-
-.comment-text {
-  margin-top:0.8em;
-}
-
-.card-preview time {
-  margin-bottom:0.4em;
-  display:block;
+.preview-categories {
+  padding: 0.5em;
+  .badge {
+    font-size: 1em;
+    text-shadow: none;
+  }
 }
 
 /* 2.1.1 - Article list */
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 3138046..482fdc3 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -172,5 +172,9 @@
   &-danger { @include badge-color($color-danger, #FFF); }
   &-info { @include badge-color($color-info, #FFF); }
   &-success { @include badge-color($color-success, #FFF); }
+  
+  &-category { @include badge-color($color-category, #FFF); }
+  &-tag { @include badge-color($color-tag, #FFF); }
+  
 }
 
diff --git a/scss/_definitions.scss b/scss/_definitions.scss
index 1f7b731..734c402 100644
--- a/scss/_definitions.scss
+++ b/scss/_definitions.scss
@@ -22,6 +22,9 @@ $color-link: $color-blue;
 $color-selection: $color-blue;
 $color-mark: $color-yellow;
 
+$color-category: $color-blue;
+$color-tag: $color-grey;
+
 $color-font: #444;
 
 @mixin borders() {
diff --git a/style.css b/style.css
index afaf504..6278f87 100644
--- a/style.css
+++ b/style.css
@@ -1198,6 +1198,20 @@ a.list-group-item:hover {
     background-color: #9bd75b;
     color: #FFF; }
 
+.badge-category {
+  background-color: #4e63c9;
+  color: #FFF; }
+  .badge-category:hover, .badge-category:active, .badge-category:focus, a:hover > .badge-category, a:active > .badge-category, a:focus > .badge-category, .badge-category:not(.disabled):not(:disabled):hover, .badge-category:not(.disabled):not(:disabled):active, .badge-category:not(.disabled):not(:disabled):focus, a:hover > .badge-category:not(.disabled):not(:disabled), a:active > .badge-category:not(.disabled):not(:disabled), a:focus > .badge-category:not(.disabled):not(:disabled) {
+    background-color: #8997db;
+    color: #FFF; }
+
+.badge-tag {
+  background-color: #77767b;
+  color: #FFF; }
+  .badge-tag:hover, .badge-tag:active, .badge-tag:focus, a:hover > .badge-tag, a:active > .badge-tag, a:focus > .badge-tag, .badge-tag:not(.disabled):not(:disabled):hover, .badge-tag:not(.disabled):not(:disabled):active, .badge-tag:not(.disabled):not(:disabled):focus, a:hover > .badge-tag:not(.disabled):not(:disabled), a:active > .badge-tag:not(.disabled):not(:disabled), a:focus > .badge-tag:not(.disabled):not(:disabled) {
+    background-color: #9e9da1;
+    color: #FFF; }
+
 /*
  *  6 - Blog Elements ( _blog.scss )
  *  
@@ -1209,116 +1223,91 @@ a.list-group-item:hover {
   margin-bottom: 1.333em; }
 
 /* 2.1 - Previews */
-.previews-section {
-  display: flex;
-  align-content: flex-start;
-  flex-wrap: wrap; }
-
 .preview-container {
-  margin-bottom: 1em;
-  padding: 0.4em;
-  width: 100%; }
-
-@media (min-width: 992px) {
-  .prev-col-2 .preview-container {
-    width: 50%; }
-  .prev-col-3 .preview-container {
-    width: 33%; }
-  .prev-col-4 .preview-container {
-    width: 25%; } }
-
-.card-preview {
-  border-radius: 0px 0px 0px 0px;
-  width: 100%;
-  margin: auto;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-.preview-link:hover {
-  text-decoration: none !important; }
-
-.preview-item {
-  height: 200px;
-  overflow: hidden;
-  font-size: 0.9em;
-  line-height: 1.5em !important;
-  padding: 0.2em;
-  text-align: justify;
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.4);
-  position: relative;
   display: flex;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-  justify-content: center; }
-
-.preview-content {
-  max-height: 200px; }
-
-.preview-content > p {
-  width: 100%;
-  margin: auto; }
-
-.preview-content > p.p-img {
-  text-align: center;
-  margin: auto;
-  padding: auto;
-  display: block;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  margin-bottom: 1em;
+  padding: 0;
   width: 100%; }
+  .preview-container .preview {
+    width: 48%;
+    height: 220px; }
 
-.preview-content > p > img {
-  max-width: 100%;
-  height: auto;
-  vertical-align: middle;
+.preview {
   margin: auto;
-  text-align: center; }
-
-.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
-  margin-bottom: 0px;
-  max-width: 100%;
-  display: none; }
-
-.preview-item h1 {
-  display: none; }
+  margin-bottom: 1em; }
+  .preview-link {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    text-decoration: none !important; }
+    .preview-link:hover .preview-item {
+      background-size: 133% auto;
+      background-position: center center; }
+  .preview-item {
+    height: 100%;
+    width: 100%;
+    background-size: 100% auto;
+    background-position: center center;
+    transition: background-size .5s; }
 
 .preview-overlay {
   height: 100%;
   width: 100%;
-  opacity: 0;
-  top: 0;
-  left: 0;
-  position: absolute;
+  opacity: 1;
   padding: 0;
-  transition: opacity .5s;
+  transition: background .5s;
   color: #FFF;
-  background-color: rgba(0, 0, 0, 0.5);
-  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
-  backdrop-filter: none; }
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+  color: white !important;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%); }
+  .preview-overlay:hover {
+    opacity: 1; }
+    .preview-overlay:hover h1, .preview-overlay:hover h2 {
+      opacity: 1;
+      color: #FFF; }
+    .preview-overlay:hover .badge {
+      background-color: #7585d5; }
+  .preview-overlay .badge {
+    background-color: #4e63c9; }
+  .preview-overlay h1, .preview-overlay h2 {
+    max-width: 100%;
+    margin: auto;
+    margin-bottom: 0px;
+    text-align: left;
+    display: block;
+    font-size: 2em;
+    transition: opacity .5s;
+    text-shadow: 1px 1px 0px black;
+    opacity: 0.6;
+    padding: 0.25em;
+    color: #FFF; }
 
-.preview-overlay h1 {
-  max-width: 100%;
-  padding-top: 0.3em;
-  margin: auto;
-  margin-bottom: 0px;
-  text-align: center;
-  display: block;
-  font-size: 2em;
-  color: white; }
+.preview-item .preview-content {
+  height: 100%;
+  width: 100%;
+  background-size: 100% auto;
+  background-position: center center;
+  transition: background-size .5s; }
 
-.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 {
-  color: white;
-  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); }
+.preview-item:hover .preview-content {
+  background-size: 133% auto;
+  background-position: center center; }
 
-.preview-item:hover .preview-overlay {
-  opacity: .9;
-  transition: opacity .5s;
-  backdrop-filter: blur(2px); }
-
-.comment-text {
-  margin-top: 0.8em; }
-
-.card-preview time {
-  margin-bottom: 0.4em;
-  display: block; }
+.preview-categories {
+  padding: 0.5em; }
+  .preview-categories .badge {
+    font-size: 1em;
+    text-shadow: none; }
 
 /* 2.1.1 - Article list */
 .list-article {