diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b026a5..094d5ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,13 +4,13 @@
 
 ### Evo - Bugfix à faire
 
-- [ ] **[FO]** Rajouter la Feature manquante : si une seule gamme -> afficher directement les produits de la gamme dans ranges.index (pour le header et footer)
+- [x] **[FO]** Rajouter la Feature manquante : si une seule gamme -> afficher directement les produits de la gamme dans ranges.index (pour le header et footer)
 - [x] **[BO]** Rajouter status sur Brands,Ranges,Products avec labels si non publiés (prise en compte des ascendants)
 - [x] **[BO/FO]** Booleans sur Brands et Ranges pour définir si on affiche les enfant sur une étagere ou non (avec labels et prise en compte des ascendants)
 - Sur la home :
   - [x] **[BO/FO]** Rajouter une phrase de sous-titre I18N en dessous du logo LDC
   - [ ] **[FO]** Masquer le footer de la home
-  - [ ] **[FO]** Layout Brands 2 par 2 avec Logo et en dessous title
+  - [x] **[FO]** Layout Brands 2 par 2 avec Logo et en dessous title
 - [x] **[FO]** Changer ordre langues FR|NL|EN
 - [x] **[FO]** drapeau US -> UK
 - [x] **[BO/FO]** Footer: "Découvrez nos autres marques" passe dans settings et i18n
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 87b53be..eba3f07 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -19,3 +19,12 @@ $line-default-height-base: 1.5;
 
 // * TOAST
 $toast-max-width: 950px;
+
+// * Containers
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1520px
+);
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index c0094e5..0ed6ff3 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -23,12 +23,11 @@
         z-index: 1;
         right: 0;
         bottom: -3.1rem;
-        left: calc(50% - 2rem);
-        width: calc(150% + 4rem); /* IE9+ */
+        left: -2rem;
+        width: calc(100% + 4rem); /* IE9+ */
         height: 0.6rem;
         background: #686868;
         content: '';
-        transform: translateX(-50%);
     }
 }
 
diff --git a/components/ProductDescriptionModal.vue b/components/ProductDescriptionModal.vue
index a96489d..bab568c 100644
--- a/components/ProductDescriptionModal.vue
+++ b/components/ProductDescriptionModal.vue
@@ -96,7 +96,7 @@ export default defineComponent({
       this.$nextTick(() => {
         if(this.show) {
           this.modal.show();
-        } else {
+        } else if(this.modal.hide) {
           this.modal.hide();
         }
       });
@@ -115,7 +115,9 @@ export default defineComponent({
     });
   },
   beforeUnmount() {
-    this.modal.hide();
+    if(this.modal.hide) {
+      this.modal.hide();
+    }
   },
   methods: {
     t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
diff --git a/components/ProductList.vue b/components/ProductList.vue
index 12ea9d0..7bce087 100644
--- a/components/ProductList.vue
+++ b/components/ProductList.vue
@@ -1,13 +1,21 @@
 <template>
   <div class="container justify-content-center d-flex flex-column">
     <div v-if="range.products" ref="rangeList" class="row justify-content-around">
-      <template
-        v-for="(product, productIndex) of range.products"
+      <div
+        v-for="(productPair, productIndex) of chunkInefficient(range.products, 2)"
         :key="productIndex"
+        :class="{
+          'row justify-content-center': true,
+          'shelf': displayShelves
+        }"
       >
-        <div class="col-12 col-md-6 product text-center">
+        <div
+          v-for="(product, productPairIndex) of productPair"
+          :key="productPairIndex"
+          class="'col-12 col-md-6 product text-center"
+        >
           <button
-            class="d-inline-block btn rounded bg-body position-relative"
+            class="d-inline-block btn bg-body position-relative"
             :title="t('more_about_this_product')"
             @click.stop="showProduct(product, $event)"
           >
@@ -44,7 +52,7 @@
             </div>
           </button>
         </div>
-      </template>
+      </div>
     </div>
     <div v-else class="row">
       <div class="col">
@@ -88,16 +96,33 @@ export default defineComponent({
   },
   data(): {
     route: RouteLocationNormalizedLoaded;
+    displayShelves: boolean;
   } {
     return {
       route: useRoute(),
+      displayShelves: this.range.shelf
     };
   },
+  watch: {
+    range() {
+      this.displayShelves = this.range.shelf;
+    }
+  },
   mounted() {
     this.$nextTick(bsTooltips.methods.initTooltips);
     this.$nextTick(this.applySameHeight);
   },
   methods: {
+    chunkInefficient(products: Array<TypeProduct>, chunkSize: number):Array<Array<TypeProduct>> {
+      const out:Array<Array<TypeProduct>> = [];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      products.forEach((elem: TypeProduct, i: number) => {
+        if (i % chunkSize) {
+          out.push(products.slice(i, i + chunkSize));
+        }
+      });
+      return out;
+    },
     t(text: string, params: Record<string, string> = {}, localeToUse: string | null = null): string {
       return ToolboxHelper.trans(text, params, localeToUse);
     },
@@ -156,16 +181,13 @@ export default defineComponent({
 
 .product {
   transition: all 0.2s ease-out allow-discrete;
-  @include rfs(1.5rem, padding-top);
-  @include rfs(1.5rem, padding-bottom);
+  @include rfs(3.5rem, padding-top);
 
   @include media-breakpoint-up(md) {
-    @include rfs(2.5rem, padding-top);
-    @include rfs(2.5rem, padding-bottom);
+    @include rfs(4.5rem, padding-top);
   }
   @include media-breakpoint-up(xxl) {
-    @include rfs(4rem, padding-top);
-    @include rfs(4rem, padding-bottom);
+    @include rfs(6rem, padding-top);
   }
 
   .product-title {
@@ -181,16 +203,6 @@ export default defineComponent({
       @include rfs(6rem, padding-bottom);
     }
   }
-  > button {
-    @include rfs(1.5rem, padding-bottom);
-
-    @include media-breakpoint-up(md) {
-      @include rfs(3rem, padding-bottom);
-    }
-    @include media-breakpoint-up(xxl) {
-      @include rfs(6rem, padding-bottom);
-    }
-  }
 }
 </style>
 
diff --git a/pages/brands/[slug].vue b/pages/brands/[slug].vue
index 277382d..9d6ad86 100644
--- a/pages/brands/[slug].vue
+++ b/pages/brands/[slug].vue
@@ -1,51 +1,58 @@
 <template>
   <div class="page-brands-show d-flex">
     <div class="container justify-content-center d-flex flex-column">
-      <div v-if="brand.ranges" class="row justify-content-center">
+      <template v-if="brand.ranges">
         <div
-          v-for="(range, rangeIndex) of brand.ranges"
-          :key="rangeIndex"
+          v-for="(rangePair, rangePairIndex) of chunkInefficientCustom(brand.ranges, 2)"
+          :key="rangePairIndex"
           :class="{
-            'col-12 text-center my-5 py-5': true,
-            'col-md-6': range.width === 1
+            'row justify-content-center mt-5 pt-5': true,
+            'mb-5 pb-5': !displayShelves,
+            'shelf': displayShelves
           }"
         >
-          <button
-            :class="{
-              'd-inline-block btn position-relative': true,
-            }"
-            :title="t('view_range_products', {'range_name': transField(range, 'name')})"
-            data-bs-toggle="tooltip"
-            @click.stop="gotoRange(range)"
+          <div
+            v-for="(range, rangeIndex) of rangePair"
+            :key="rangeIndex"
+            class="col text-center"
           >
-            <div>
-              <img
-                class="img-fluid"
-                :src="`/data/${range.picture}`"
-                :alt="t('ranges_logo', {'range_name': transField(range, 'name')})"
-                :title="t('ranges_logo', {'range_name': transField(range, 'name')})"
-              >
-            </div>
-            <span
+            <button
               :class="{
-                ...{
-                  'range-title fs-2 fw-bold mt-5 d-inline-block px-5 py-3 rounded shadow text-capitalize animate__animated': true,
-                  'text-dark': getContrastYIQ(range.color) === '#000000',
-                  'text-light': getContrastYIQ(range.color) === '#FFFFFF',
-                },
-                ...titleAnimations(rangeIndex),
-                ...rangeFont(range.font_id)
-              }"
-              :style="{
-                'background-color': range.color,
-                'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(range.color), 0.8)}`,
+                'd-inline-block btn position-relative': true,
               }"
+              :title="t('view_range_products', {'range_name': transField(range, 'name')})"
+              data-bs-toggle="tooltip"
+              @click.stop="gotoRange(range)"
             >
-              {{ transField(range, 'name') }}
-            </span>
-          </button>
+              <div>
+                <img
+                  class="img-fluid"
+                  :src="`/data/${range.picture}`"
+                  :alt="t('ranges_logo', {'range_name': transField(range, 'name')})"
+                  :title="t('ranges_logo', {'range_name': transField(range, 'name')})"
+                >
+              </div>
+              <span
+                :class="{
+                  ...{
+                    'range-title fs-2 fw-bold mt-5 d-inline-block px-5 py-3 rounded shadow text-capitalize animate__animated': true,
+                    'text-dark': getContrastYIQ(range.color) === '#000000',
+                    'text-light': getContrastYIQ(range.color) === '#FFFFFF',
+                  },
+                  ...titleAnimations(rangeIndex),
+                  ...rangeFont(range.font_id)
+                }"
+                :style="{
+                  'background-color': range.color,
+                  'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(range.color), 0.8)}`,
+                }"
+              >
+                {{ transField(range, 'name') }}
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
+      </template>
       <div v-else class="row">
         <div class="col">
           <span>{{ t('no_ranges_available') }}</span>
@@ -74,6 +81,7 @@ export default defineComponent({
     animateTimeout: NodeJS.Timeout|undefined;
     animateIndex: number|null;
     animations: Array<string>;
+    displayShelves: boolean;
   } {
     return {
       appState: {} as AppState,
@@ -81,7 +89,8 @@ export default defineComponent({
       brand: {} as TypeBrand,
       animateTimeout: undefined,
       animateIndex: null,
-      animations: ["heartBeat", "tada", "shakeX", "rubberBand"]
+      animations: ["heartBeat", "tada", "shakeX", "rubberBand"],
+      displayShelves: false
     };
   },
   beforeMount() {
@@ -94,6 +103,7 @@ export default defineComponent({
       return ;
     }
     this.brand = brand;
+    this.displayShelves = this.brand.shelf;
 
     const firstRange = this.brand.ranges.at(0);
 
@@ -123,6 +133,26 @@ export default defineComponent({
     clearTimeout(this.animateTimeout);
   },
   methods: {
+    chunkInefficientCustom(ranges: Array<TypeRange>, chunkSize: number):Array<Array<TypeRange>> {
+      const out: Array<Array<TypeRange>> = [];
+      let row: Array<TypeRange> = [];
+      ranges.forEach((range: TypeRange, i: number) => {
+        if (range.width === 2) {
+          if(row.length) {
+            out.push(row);
+            row = [];
+          }
+          out.push([range]);
+          return;
+        }
+        row.push(range);
+        if (i % chunkSize) {
+          out.push(row);
+          row = [];
+        }
+      });
+      return out;
+    },
     t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
       return ToolboxHelper.trans(text, params, localeToUse);
     },
diff --git a/pages/ranges/[slug].vue b/pages/ranges/[slug].vue
index c04ac6a..33a4558 100644
--- a/pages/ranges/[slug].vue
+++ b/pages/ranges/[slug].vue
@@ -47,8 +47,7 @@ export default defineComponent({
       activeProduct: null
     };
   },
-  mounted() {
-    this.$nextTick(() => bsTooltips.methods.initTooltips());
+  beforeMount() {
     const range = useAppStore().activeRange;
     if (!range) {
       Toast.toast("range", ToastTypeEnum.error, this.t("error_occured"));
@@ -57,6 +56,9 @@ export default defineComponent({
     }
     this.range = range;
   },
+  mounted() {
+    this.$nextTick(() => bsTooltips.methods.initTooltips());
+  },
   methods: {
     t(text: string, params: Record<string, string> = {}, localeToUse: string | null = null): string {
       return ToolboxHelper.trans(text, params, localeToUse);