diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00c91cf..3bb77b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@
 - [x] **[FO]** drapeau US -> UK
 - [x] **[BO/FO]** Footer: "Découvrez nos autres marques" passe dans settings et i18n
 - Sur les produits:
-  - [ ] **[FO]** Sur le header et footer: Couleur de la **Range** en BG 
+  - [x] **[FO]** Sur le header et footer: Couleur de la **Range** en BG 
   - [ ] **[FO]** Sur la modal: plus de color et title centré  
 - [x] **[FO]** Align flex center vertical et horizontal pour les views (brands.index -> home, ranges.index, products.index)
 
diff --git a/components/layout/AppFooter.vue b/components/layout/AppFooter.vue
index 887dd14..eea303d 100644
--- a/components/layout/AppFooter.vue
+++ b/components/layout/AppFooter.vue
@@ -3,7 +3,7 @@
     id="footer"
     ref="footer"
     class="container-fluid flex-grow-0"
-    :style="`background-color: ${activeBrand?.color} !important`"
+    :style="`background-color: ${activeRange ? activeRange.color : activeBrand?.color} !important`"
   >
     <div v-if="route.name !== 'index'" class="row">
       <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
@@ -93,6 +93,7 @@ export default defineComponent({
     route: RouteLocationNormalizedLoaded;
     brands: Array<TypeBrand>;
     activeBrand: TypeBrand|null;
+    activeRange: TypeRange|null;
     modules: Array<{
       name: string;
     }>;
@@ -108,6 +109,7 @@ export default defineComponent({
       },
       brands: [],
       activeBrand: null,
+      activeRange: null,
       modules: [Scrollbar],
     };
   },
@@ -118,6 +120,7 @@ export default defineComponent({
         useAppStore().setActiveBrand(null);
       }
       this.activeBrand = useAppStore().activeBrand;
+      this.activeRange = useAppStore().activeRange;
     },
   },
   mounted() {
@@ -125,6 +128,7 @@ export default defineComponent({
     window.ipcRendererObject.getAppInfo().then((appInfo) => {this.appInfo = appInfo;});
     this.brands = useAppStore().data.brands();
     this.activeBrand = useAppStore().activeBrand;
+    this.activeRange = useAppStore().activeRange;
     const { locale } = useAppStore().getI18n();
     this.locale = locale;
   },
diff --git a/components/layout/AppHeader.vue b/components/layout/AppHeader.vue
index 00e9869..84f6497 100644
--- a/components/layout/AppHeader.vue
+++ b/components/layout/AppHeader.vue
@@ -3,7 +3,7 @@
   <nav
     id="top-navbar"
     class="navbar navbar-expand-lg position-relative"
-    :style="`background-color: ${activeBrand?.color} !important`"
+    :style="`background-color: ${activeRange ? activeRange.color : activeBrand?.color} !important`"
   >
     <div class="container-fluid">
       <!-- UNE MARQUE EST SELECTIONNEE -->
@@ -34,12 +34,11 @@
           <span
             :class="{...{
               'title': true,
-              'ps-md-5 d-inline-block px-5 py-3 rounded text-capitalize shadow': true,
+              'ps-md-5 d-inline-block px-5 py-3 rounded text-capitalize': true,
               'text-dark': getContrastYIQ(activeRange.color) === '#000000',
               'text-light': getContrastYIQ(activeRange.color) === '#FFFFFF',
             }, ...rangeFont(activeRange.font_id)}"
             :style="{
-              'background-color': activeRange.color,
               'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(activeRange.color), 0.8)}`
             }"
           >