diff --git a/local/media/images/selection/potimarroncarottecoupeepommedeterreepluchee-1.jpg b/local/media/images/selection/potimarroncarottecoupeepommedeterreepluchee-1.jpg
new file mode 100644
index 00000000..e2d4d9ae
Binary files /dev/null and b/local/media/images/selection/potimarroncarottecoupeepommedeterreepluchee-1.jpg differ
diff --git a/local/modules/HookProduitsSaison/Config/config.xml b/local/modules/HookProduitsSaison/Config/config.xml
index d568dc2a..0d85931e 100644
--- a/local/modules/HookProduitsSaison/Config/config.xml
+++ b/local/modules/HookProduitsSaison/Config/config.xml
@@ -6,8 +6,12 @@
 
     <hooks>
         <hook id="hookproduitssaison.hook.front">
+            <tag name="hook.event_listener" event="main.head-bottom" templates="css:assets/css/styles.css"/>
             <tag name="hook.event_listener" event="home.body" templates="render:home-body.html" />
         </hook>
+        <hook id="hookproduitssaison.hook.js" class="HookProduitsSaison\Hook\FrontHook" scope="request">
+            <tag name="hook.event_listener" event="main.javascript-initialization" type="front"/>
+        </hook>
     </hooks>
 
 </config>
diff --git a/local/modules/HookProduitsSaison/Hook/FrontHook.php b/local/modules/HookProduitsSaison/Hook/FrontHook.php
new file mode 100644
index 00000000..62d42ec1
--- /dev/null
+++ b/local/modules/HookProduitsSaison/Hook/FrontHook.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace HookProduitsSaison\Hook;
+
+use Thelia\Core\Event\Hook\HookRenderEvent;
+use Thelia\Core\Hook\BaseHook;
+
+/**
+ * Class FrontHook
+ * @package HookProduitsSaison\Hook
+ */
+class FrontHook extends BaseHook
+{
+
+    public function onMainJavascriptInitialization(HookRenderEvent $event)
+    {
+        $event->add(
+            $this->render('home-body-js.html')
+        );
+    }
+
+}
diff --git a/local/modules/HookProduitsSaison/I18n/fr_FR.php b/local/modules/HookProduitsSaison/I18n/fr_FR.php
index 37086245..426eb229 100644
--- a/local/modules/HookProduitsSaison/I18n/fr_FR.php
+++ b/local/modules/HookProduitsSaison/I18n/fr_FR.php
@@ -1,4 +1,5 @@
 <?php
 return array(
     // 'an english string' => 'La traduction française de la chaine',
+    'Our selection' => 'Notre sélection de produits',
 );
diff --git a/local/modules/HookProduitsSaison/templates/frontOffice/default/assets/css/styles.css b/local/modules/HookProduitsSaison/templates/frontOffice/default/assets/css/styles.css
new file mode 100644
index 00000000..8e7bfcb7
--- /dev/null
+++ b/local/modules/HookProduitsSaison/templates/frontOffice/default/assets/css/styles.css
@@ -0,0 +1,34 @@
+#section-produits-saison {
+    width: 95%;
+    text-align: center;
+    margin: auto;
+}
+
+div.category-choice {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+div.category-choice > ul {
+    list-style: none;
+    display: inline-flex;
+    padding-inline-start: 0px !important;
+}
+
+div.category-choice > ul li {
+    width: auto;
+    margin: 2px;
+    padding: 5px 20px;
+    border: 1px solid #95c11e;
+    border-radius: 5px;
+    cursor: pointer;
+
+    background-color: white;
+    color: #95c11e;
+}
+div.category-choice > ul li.active {
+    background-color: #95c11e;
+    color: white;
+}
diff --git a/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body-js.html b/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body-js.html
new file mode 100644
index 00000000..94e701b8
--- /dev/null
+++ b/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body-js.html
@@ -0,0 +1,19 @@
+<script>
+
+  $(document).ready(function() {
+      $("div.category-choice ul li:first").addClass('active');
+      $("#section-produits-saison div.products-content:not(:first)").hide();
+  });
+
+  $("div.category-choice ul li").click(function() {
+      var self = this.id;
+
+      $("div.category-choice ul li").siblings().removeClass('active');
+      $(this).addClass('active');
+
+      $("#section-produits-saison div.products-content").hide();
+      $("#section-produits-saison div.products-content[id="+ self +"]").show();
+  });
+
+</script>
+
diff --git a/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body.html b/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body.html
index 8271ba6e..0ff0206e 100644
--- a/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body.html
+++ b/local/modules/HookProduitsSaison/templates/frontOffice/default/home-body.html
@@ -1,56 +1,43 @@
-{ifloop rel="produits_saison"}
-<section id="produits-saison">
+<section id="section-produits-saison" class="grid">
     <div class="products-heading">
         <h2>{intl l="Our selection" d="hookproduitssaison"}</h2>
     </div>
-    <div class="products-content">
-        <ul class="list-unstyled products-grid row">
-            {loop name="produits_saison" type="selection_container" code="fruits"}
-            <li class="item col-md-3 col-sm-4">
-                <article itemscope itemtype="http://schema.org/Product">
 
-                    COUNT = {$SELECTION_COUNT}
-{*
-                    {loop type="image" name="selection_image" lang="$edit_language_id" source="selection" source_id=$SELECTION_CONTAINER_ID width="70" height="50" resize_mode="borders" limit="1" visible="true"}
-                    <img class="img-thumbnail" src="{$IMAGE_URL nofilter}" href="">
-                    {/loop}
-*}
-
-<!--                    -->
-<!--                    <a href="{$URL}" itemprop="url" tabindex="-1" class="product-image overlay">-->
-<!--                        {ifloop rel="image_product_new" }-->
-<!--                        <img itemprop="image" class="img-responsive center-block"-->
-<!--                        {loop name="image_product_new" type="image" limit="1" product="{$ID}" force_return="true" width="280" height="196" resize_mode="borders"}-->
-<!--                        src="{$IMAGE_URL}"-->
-<!--                        {/loop}-->
-<!--                        alt="Product #{$LOOP_COUNT}" >-->
-<!--                        {/ifloop}-->
-<!--                        {elseloop rel="image_product_new"}-->
-<!--                        <img itemprop="image" class="img-responsive center-block" src="{image file='assets/dist/img/280x196.png'}" alt="Product #{$LOOP_COUNT}">-->
-<!--                        {/elseloop}-->
-<!--                    </a>-->
-
-<!--                    <a href="{$URL}" class="product-info">-->
-<!--                        <h3 class="name"><span itemprop="name">{$TITLE}</span></h3>-->
-<!--                        <div class="short-description" itemprop="description">{$CHAPO}</div>-->
-
-<!--                        <div class="product-price">-->
-<!--                            <div class="price-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">-->
-<!--                                {loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}-->
-<!--                                <meta itemprop="category" content="{$TITLE}">-->
-<!--                                {/loop}-->
-<!--                                <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition">-->
-<!--                                <meta itemprop="priceCurrency" content="{currency attr="code"}">-->
-<!--                                <link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />-->
-<!--                                <span class="regular-price"><span itemprop="price" class="price">{format_money number=$BEST_TAXED_PRICE}</span></span>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                    </a>-->
-
-                </article>
-            </li>
+    <div class="category-choice">
+        <ul>
+        {loop name="categories_loop" type="category" visible="yes"}
+            {loop name="pre_selection_$TITLE" type="selection_list" code="$TITLE" without_container="true"}
+                {if $LOOP_COUNT > 0}
+                    <li id="{$TITLE}">{$TITLE}</li>
+                {/if}
             {/loop}
+        {/loop}
         </ul>
     </div>
+
+    {loop name="categories_loop" type="category" visible="yes"}
+        {ifloop rel="selection_$TITLE"}
+            {loop name="selection_$TITLE" type="selection_list" code="$TITLE" without_container="true"}
+            <div class="products-content" id="{$TITLE}">
+                <ul class="products-grid list-unstyled row">
+                    {loop type="selection_product_related" name="selection_products" selection_id=$SELECTION_ID}
+                        {loop name="product_loop" type="product" id=$PRODUCT_ID limit="1"}
+                            {include file="includes/single-product.html" colClass="col-md-3 col-sm-4" product_id=$PRODUCT_ID hasBtn=false hasDescription=false width="218" height="146"}
+                        {/loop}
+                    {/loop}
+                </ul>
+            </div>
+            {/loop}
+        {/ifloop}
+    {/loop}
+
+
+{*
+    {loop name="selection_cont1" type="selection_container" code="cont-1" without_container="false"}
+        {loop name="selection_loop" type="selection_list" container_id=$SELECTION_CONTAINER_ID}
+           <a href="{$SELECTION_URL}">{$SELECTION_TITLE}</a>
+        {/loop}
+    {/loop}
+*}
+
 </section>
-{/ifloop}
diff --git a/templates/frontOffice/custom/assets/dist/css/custom.min.css b/templates/frontOffice/custom/assets/dist/css/custom.min.css
index 57d1b123..5d616684 100644
--- a/templates/frontOffice/custom/assets/dist/css/custom.min.css
+++ b/templates/frontOffice/custom/assets/dist/css/custom.min.css
@@ -1 +1 @@
-@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.nav>li{text-transform:uppercase;font-size:1.72rem}.navbar-customer{display:flex;flex-direction:column;text-align:center}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-radius:5px;border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}#search-button{padding-top:15px;padding-bottom:0}#search-button>input[type=search]{display:none}#search-button:hover>input[type=search]{display:inline-flex}
\ No newline at end of file
+@font-face{font-family:sofia_prolight;src:url(../fonts/sofiapro/sofiapro-light-webfont.woff2) format('woff2'),url(../fonts/sofiapro/sofiapro-light-webfont.woff) format('woff');font-weight:400;font-style:normal}aside.col-left,div.product-options,footer.footer-info,section.category-description,ul.pager{display:none}html{font-family:sofia_prolight,sans-serif!important}#products-new .overlay:after,#products-offer .overlay:after,#products-upsell .overlay:after,body{font-family:sofia_prolight,'Open Sans',sans-serif!important}div.container{width:90%!important}@media (min-width:992px){.header__main{width:90%}}@media (min-width:768px){.header__content{flex-direction:column}}.header__content{display:flex}.header__main{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.header__secondary{display:inline-flex}.overlay:before{background-color:rgba(128,189,138,.4)}.navbar-default{background-color:transparent}.navbar li>a.home:before{display:none}.navbar li{font-size:1.72rem}.nav>li{text-transform:uppercase}.navbar-customer{display:flex;flex-direction:column;text-align:center}.navbar-customer>li>a{text-transform:none}.header__content .container-fluid{padding-left:0;padding-right:0}.navbar-form .form-control{width:150px}.logo-boutique{width:160px}.navbar{margin-bottom:0}.glyphicon,a{color:#95c11e}.btn{border-radius:5px;border-color:#95c11e;border-left:1px solid #95c11e}.btn-default{color:#3c3c3b;background-color:#fff}.btn-default:active,.btn-default:focus,.btn-default:hover{color:#fff;background-color:#3c3c3b;text-decoration:none}.btn-primary{background-color:#95c11e;color:#fff}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#fff;border-color:#95c11e;color:#95c11e}.btn-primary[disabled]:focus,.btn-primary[disabled]:hover{background-color:#95c11e;border-color:#95c11e;color:#fff}.btn-link:focus,.btn-link:hover{color:#95c11e}.navbar-default .navbar-nav>li>a{color:#3c3c3b}.nav>li>a:focus,.nav>li>a:hover,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{background-color:#95c11e;color:#fff}.breadcrumb{text-align:center;font-size:large;margin-bottom:30px}.checkout-progress .btn-step.active{background:#95c11e}.toolbar .amount{color:#95c11e}.grid #category-products .item>article .product-info .name{height:1.5em}.product-title,.product-title:active,.product-title:hover{text-decoration:none;color:#3c3c3b}.price,.table-cart tbody td.subprice .price,.table-cart thead th.subprice,.table-order tbody td.subprice .price,.table-order thead th.subprice{color:#95c11e}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{background-color:#95c11e;border-color:#95c11e}.products-heading{text-transform:uppercase;text-align:center}.products-heading>h2{color:#3c3c3b;font-weight:900}#search-button{padding-top:15px;padding-bottom:0}#search-button>input[type=search]{display:none}#search-button:hover>input[type=search]{display:inline-flex}
\ No newline at end of file
diff --git a/templates/frontOffice/custom/assets/src/css/custom.css b/templates/frontOffice/custom/assets/src/css/custom.css
index 7ea9721e..f1a917de 100644
--- a/templates/frontOffice/custom/assets/src/css/custom.css
+++ b/templates/frontOffice/custom/assets/src/css/custom.css
@@ -72,9 +72,12 @@ div.container {
 .navbar li>a.home:before {
     display: none;
 }
+.navbar li {
+    font-size: 1.72rem;
+}
+
 .nav>li {
     text-transform: uppercase;
-    font-size: 1.72rem;
 }
 .navbar-customer {
     display: flex;
@@ -183,6 +186,14 @@ div.container {
     color : #95c11e;
 }
 
+.products-heading {
+    text-transform: uppercase;
+    text-align: center;
+}
+.products-heading > h2{
+    color: #3c3c3b;
+    font-weight: 900;
+}
 
 #search-button {
     padding-top: 15px;
diff --git a/templates/frontOffice/custom/includes/single-product.html b/templates/frontOffice/custom/includes/single-product.html
index 53c22bcb..b9fd08fd 100644
--- a/templates/frontOffice/custom/includes/single-product.html
+++ b/templates/frontOffice/custom/includes/single-product.html
@@ -19,7 +19,6 @@
                 <img itemprop="image" src="{image file='assets/dist/img/218x146.png'}" class="img-responsive" alt="{$productTitle}">
             {/elseloop}
         </a>
-
         <div class="product-info col-sm-6">
             <a href="{$URL nofilter}" class="product-title"><h2 class="name"><span itemprop="name">{$productTitle}</span></h2></a>
             {if $hasDescription}