diff --git a/assets/images/logo-darkmode.png b/assets/images/logo-darkmode.png
index c85cca9..eb6c936 100644
Binary files a/assets/images/logo-darkmode.png and b/assets/images/logo-darkmode.png differ
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 6940b19..f3144fe 100755
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -1,6 +1,6 @@
 ///// HOMEPAGE
 
-/// Chill colors
+/// Chill brand colors
 $chill-blue: #334d5c;
 $chill-green: #43b29d;
 $chill-beige: #d3c7b1;
@@ -10,41 +10,66 @@ $chill-orange: #e89463;
 $chill-lightgray: #efefef;
 $chill-yellow: #f1d275;
 
+/// Other custom colors
+$bg-dark-blue: #0d242e;
+$bg-light-blue: #a0dcff;
+$btn-orange: #f46839;
+$text-green: #56c4aa;
+$icon-red: #f0384d;
+$icon-yellow: #fcc958;
+
+// Pattern
+// hugo needs to precompile images in public dir, and make it automatically with images called from content.
+// here we need to use it in css, then need to generate it, calling it first from a content md file.
+@mixin apply-bgpattern-01() {
+    background-repeat: repeat;
+    background-position: bottom center;
+    background-image: url('../images/bg/dessin-3.png'); 
+}
+
 
 // Theme Custom sections
 header.header {
-    background-color: $chill-blue;
+    background-color: $bg-dark-blue;
 }
 main > section {
-    &:first-child {
-        background-color: $chill-blue;
+    &.hero {
+        background-color: $bg-dark-blue;
+        @include apply-bgpattern-01();
+        h1 {
+            color: $text-green;
+        }
+        p {
+            color: white;
+            font-weight: bolder;
+        }
     }
     &.section-1 {
+        background-color: $bg-light-blue;
     }
     &.section-2 {
     }
     &.section-3 {
+        background-color: $text-green;
     }
     &.section-4 {
     }
     &.section-5 {
+        background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-6 {
-        background-color: $chill-blue;
-        background-repeat: repeat;
-        background-position: bottom center;
-        background-image: url('../images/bg/dessin-3.png'); 
-        /* hugoplate needs to compile images in public, and make it automatically for images called from content.
-           we need to call first image from content md files, if we need to use it in css
-        */
+        background-color: $bg-dark-blue;
+        @include apply-bgpattern-01();        
     }
     &.section-7 {
+        background-color: $bg-light-blue;
     }
 }
 
 // Change bulletlists rendering in flex bloc
 section.section-1,
-section.section-6 {
+section.section-5,
+section.section-7 {
     .container .row {
         & > div {
             &:last-child {
@@ -69,4 +94,16 @@ section.section-6 {
             }
         }    
     }
+}
+
+// Dark context (homepage header, hero, footer)
+.dark {
+
+    // Overwrite primary button design
+    .btn-primary {
+        background-color: $btn-orange;
+        color: white;
+        border: 1px solid $btn-orange;
+        border-radius: 2em;
+    }
 }
\ No newline at end of file
diff --git a/config/_default/params.toml b/config/_default/params.toml
index 6fa62df..94cbcd6 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -1,31 +1,43 @@
 #################### default parameters ################################
 # favicon
 favicon = "images/favicon.png"
+
 # logo
 logo = "images/logo.png"
 logo_darkmode = "images/logo-darkmode.png"
+
 # use `px` or `x` with logo_width, example: "100px".
 # Note: logo_width is not work with .svg file
 logo_width = "160px"
 logo_height = "32px"
+
 # if logo_webp set false, will not generate WEBP version of logo | default is true
 logo_webp = true
+
 # logo text will only show when logo is missing.
 logo_text = "Hugoplate"
+
 # navbar fixed to top
-navbar_fixed = true
+navbar_fixed = false
+
 # theme-mode
-theme_switcher = true
-theme_default = "dark" # available options [light/dark/system]
+# available options [light/dark/system]
+theme_switcher = false
+theme_default = "light" 
+
 # Main Sections
 mainSections = ["blog"]
+
 # contact form action
 contact_form_action = "#" # contact form works with [https://airform.io/] or [https://formspree.io]
+
 # google tag manager, see https://developers.google.com/tag-manager/
-google_tag_manager = "" # example: G-XXXXXXXXXX
-google_adsense = ""     # example: ca-pub-xxxxxxxxxxxxxxxx
+# google_tag_manager = "" # example: G-XXXXXXXXXX
+# google_adsense = ""     # example: ca-pub-xxxxxxxxxxxxxxxx
+
 # custom script on header, example: custom_script= "<script>console.log(\"Hello World\")</script>"
 custom_script = ""
+
 # copyright
 copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
 
diff --git a/content/francais/_index.md b/content/francais/_index.md
index 2b7c157..73a1b68 100755
--- a/content/francais/_index.md
+++ b/content/francais/_index.md
@@ -1,9 +1,10 @@
 ---
 # Banner
 banner:
+  class: dark
+  image: "/images/banner.png"
   title: "Le compagnon du travailleur social"
   content: "CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social."
-  image: "/images/banner.png"
   button:
     enable: true
     label: "Essayer la démo"
@@ -27,6 +28,10 @@ features:
     image: "/images/service-20.png"
     title: 
     content: "CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées."
+    button:
+      enable: false
+      label: "Test button style"
+      link: "#"
 
   - 
     class: section-3
@@ -43,7 +48,7 @@ features:
 
   - 
     class: section-4
-    image: "/images/service-20.png"
+    image: "/images/service-3.png"
     title:
     content: "
     Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer."
@@ -53,18 +58,7 @@ features:
       link: "start/user"
 
   - 
-    class: section-5
-    image: "/images/service-30.png"
-    title: 
-    content: "
-    **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**  
-    <br><br>
-    CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain. 
-    <br><br>
-    "
-
-  - 
-    class: section-6
+    class: section-5 dark
     image: "/images/service-20.png"
     title: 
     content: 
@@ -74,9 +68,20 @@ features:
     - "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus."
     - "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
 
+  - 
+    class: section-6
+    image: "/images/service-30.png"
+    title: 
+    content: "
+    **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.**  
+    <br><br>
+    CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain. 
+    <br><br>
+    "
+
   - 
     class: section-7
-    image: "/images/service-3.png" 
+    image: "/images/service-30.png" 
     title: "Ce qu'il faut retenir"
     content:
     bulletpoints: 
diff --git a/data/theme.json b/data/theme.json
index c838223..d4ff439 100644
--- a/data/theme.json
+++ b/data/theme.json
@@ -18,8 +18,8 @@
       "theme_color": {
         "primary": "#fff",
         "body": "#1c1c1c",
-        "border": "#3E3E3E",
-        "theme_light": "#222222",
+        "border": "#ffffff09",
+        "theme_light": "#0d242e",
         "theme_dark": ""
       },
       "text_color": {
@@ -31,14 +31,12 @@
   },
   "fonts": {
     "font_family": {
-      "primary": "Heebo:wght@400;600",
-      "primary_type": "sans-serif",
-      "secondary": "Signika:wght@500;700",
-      "secondary_type": "sans-serif"
+      "primary": "OpenSans:wght@300;400;500;600;700;800",
+      "primary_type": "sans-serif"
     },
     "font_size": {
-      "base": "16",
-      "scale": "1.250"
+      "base": "15",
+      "scale": "1.25"
     }
   }
 }
diff --git a/themes/hugoplate/assets/scss/buttons.scss b/themes/hugoplate/assets/scss/buttons.scss
index e75043f..ae20a38 100755
--- a/themes/hugoplate/assets/scss/buttons.scss
+++ b/themes/hugoplate/assets/scss/buttons.scss
@@ -7,9 +7,11 @@
 }
 
 .btn-primary {
-  @apply border-primary bg-primary dark:border-darkmode-primary dark:text-dark text-white dark:bg-white;
+  @apply border-primary text-white bg-primary 
+    dark:border-darkmode-primary dark:text-dark dark:bg-white;
 }
 
 .btn-outline-primary {
-  @apply border-dark text-dark hover:bg-dark dark:hover:text-dark bg-transparent hover:text-white dark:border-white dark:text-white dark:hover:bg-white;
+  @apply text-dark bg-transparent border-dark hover:bg-dark hover:text-white 
+    dark:text-white dark:border-white dark:hover:text-dark dark:hover:bg-white;
 }
diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html
index f8777bf..fd49061 100755
--- a/themes/hugoplate/layouts/index.html
+++ b/themes/hugoplate/layouts/index.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
   <!-- Banner -->
   {{ with .Params.banner }}
-    <section class="section pt-14">
+    <section class="section pt-14 hero {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row justify-center">
           <div class="lg:col-7 mb-8 text-center">
@@ -31,7 +31,7 @@
 
   <!-- Features -->
   {{ range $i, $e:= .Params.features }}
-    <section class="section-sm {{ with .class }}{{ . }}{{ end }} {{ if (modBool $i 2) }}bg-gradient{{ end }}">
+    <section class="section-sm sn-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
       <div class="container">
         <div class="row items-center justify-between">
           <div
diff --git a/themes/hugoplate/layouts/partials/essentials/footer.html b/themes/hugoplate/layouts/partials/essentials/footer.html
index b5f912f..df04c54 100755
--- a/themes/hugoplate/layouts/partials/essentials/footer.html
+++ b/themes/hugoplate/layouts/partials/essentials/footer.html
@@ -1,3 +1,4 @@
+<div class="dark">
 <footer class="bg-theme-light dark:bg-darkmode-theme-light">
   <div class="container">
     <div class="row items-center py-10">
@@ -55,3 +56,4 @@
     </div>
   </div>
 </footer>
+</div>
diff --git a/themes/hugoplate/layouts/partials/essentials/header.html b/themes/hugoplate/layouts/partials/essentials/header.html
index 56bf1f4..cdd1600 100755
--- a/themes/hugoplate/layouts/partials/essentials/header.html
+++ b/themes/hugoplate/layouts/partials/essentials/header.html
@@ -1,5 +1,5 @@
 <header
-  class="header {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
+  class="header dark {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
   <nav class="navbar container">
     <!-- logo -->
     <div class="order-0">
@@ -126,7 +126,7 @@
       {{ if site.Params.navigation_button.enable }}
         <a
           href="{{ site.Params.navigation_button.link | relLangURL }}"
-          class="btn btn-outline-primary btn-sm hidden lg:inline-block">
+          class="btn btn-primary btn-sm hidden lg:inline-block">
           {{ site.Params.navigation_button.label }}
         </a>
       {{ end }}