diff --git a/css/app.css b/css/app.css
index 34f0508..f28b410 100644
--- a/css/app.css
+++ b/css/app.css
@@ -715,6 +715,61 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 30 30 / var(--tw-bg-opacity));
+}
+
+.bg-acoustique-coproprietes {
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 94 242 / var(--tw-bg-opacity));
+}
+
+.bg-acoustique-coproprietes-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 241 255 / var(--tw-bg-opacity));
+}
+
+.bg-energies-urbanisme {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 126 80 / var(--tw-bg-opacity));
+}
+
+.bg-energies-urbanisme-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 255 240 / var(--tw-bg-opacity));
+}
+
+.bg-isolation-quotidien {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 69 3 / var(--tw-bg-opacity));
+}
+
+.bg-isolation-quotidien-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 236 / var(--tw-bg-opacity));
+}
+
+.bg-patrimoine-renovation {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 47 247 / var(--tw-bg-opacity));
+}
+
+.bg-patrimoine-renovation-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 253 / var(--tw-bg-opacity));
+}
+
+.bg-location {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 0 43 / var(--tw-bg-opacity));
+}
+
+.bg-location-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 231 / var(--tw-bg-opacity));
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -784,6 +839,66 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-primary {
+  --tw-text-opacity: 1;
+  color: rgb(47 1 84 / var(--tw-text-opacity));
+}
+
+.text-secondary {
+  --tw-text-opacity: 1;
+  color: rgb(223 30 30 / var(--tw-text-opacity));
+}
+
+.text-acoustique-coproprietes {
+  --tw-text-opacity: 1;
+  color: rgb(36 94 242 / var(--tw-text-opacity));
+}
+
+.text-acoustique-coproprietes-light {
+  --tw-text-opacity: 1;
+  color: rgb(223 241 255 / var(--tw-text-opacity));
+}
+
+.text-energies-urbanisme {
+  --tw-text-opacity: 1;
+  color: rgb(2 126 80 / var(--tw-text-opacity));
+}
+
+.text-energies-urbanisme-light {
+  --tw-text-opacity: 1;
+  color: rgb(227 255 240 / var(--tw-text-opacity));
+}
+
+.text-isolation-quotidien {
+  --tw-text-opacity: 1;
+  color: rgb(194 69 3 / var(--tw-text-opacity));
+}
+
+.text-isolation-quotidien-light {
+  --tw-text-opacity: 1;
+  color: rgb(255 251 236 / var(--tw-text-opacity));
+}
+
+.text-patrimoine-renovation {
+  --tw-text-opacity: 1;
+  color: rgb(139 47 247 / var(--tw-text-opacity));
+}
+
+.text-patrimoine-renovation-light {
+  --tw-text-opacity: 1;
+  color: rgb(255 229 253 / var(--tw-text-opacity));
+}
+
+.text-location {
+  --tw-text-opacity: 1;
+  color: rgb(223 0 43 / var(--tw-text-opacity));
+}
+
+.text-location-light {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 231 / var(--tw-text-opacity));
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -855,6 +970,31 @@ body:not(.wp-admin) {
   font-weight: 400;
 }
 
+.filter-acoustique-coproprietes {
+  filter: invert(27%) sepia(88%) saturate(1302%)
+    hue-rotate(206deg) brightness(105%) contrast(114%);
+}
+
+.filter-energies-urbanisme {
+  filter: invert(28%) sepia(89%) saturate(1188%)
+    hue-rotate(131deg) brightness(95%) contrast(98%);
+}
+
+.filter-isolation-quotidien {
+  filter: invert(21%) sepia(94%) saturate(3059%)
+    hue-rotate(26deg) brightness(98%) contrast(98%);
+}
+
+.filter-patrimoine {
+  filter: invert(25%) sepia(79%) saturate(6075%)
+    hue-rotate(263deg) brightness(99%) contrast(96%);
+}
+
+.filter-location {
+  filter: invert(13%) sepia(71%) saturate(4425%)
+    hue-rotate(338deg) brightness(109%) contrast(117%);
+}
+
 /* ########### COMPONENTS ############ */
 
 .post-card {
@@ -990,23 +1130,12 @@ body:not(.wp-admin) {
 }
 
 .primary-menu-container #primary-menu ul {
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
   padding-right: 0px;
 }
 
 @media (min-width: 960px) {
   .primary-menu-container #primary-menu ul {
     display: flex;
-    -moz-column-gap: 1rem;
-         column-gap: 1rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .primary-menu-container #primary-menu ul {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
   }
 }
 
@@ -1025,20 +1154,19 @@ body:not(.wp-admin) {
 }
 
 .primary-menu-container #primary-menu li.menu-item {
+  border-radius: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
   text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   font-weight: 500;
 }
 
-.primary-menu-container #primary-menu li.menu-item:hover > a, 
+.primary-menu-container #primary-menu li.menu-item:hover, 
       .primary-menu-container #primary-menu li.menu-item a:focus {
   cursor: pointer;
-  --tw-text-opacity: 1;
-  color: rgb(223 30 30 / var(--tw-text-opacity));
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
-  text-underline-offset: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .primary-menu-container #primary-menu li.menu-item a:focus {
@@ -1393,6 +1521,69 @@ article > *:not(.entry-content),
 
 /* Home */
 
+.home-header {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1440px;
+  padding-left: 4rem;
+  padding-right: 4rem;
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.home-header__titling {
+  max-width: 580px;
+}
+
+.home-header__title {
+  padding-bottom: 1.5rem;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.home-header__scroll-down-indicator {
+  margin-top: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 1 84 / var(--tw-bg-opacity));
+  width: 80px;
+  height: 80px;
+}
+
+.home-header__scroll-down-indicator__arrow {
+  -webkit-animation: bouncingArrow 1s infinite alternate
+        cubic-bezier(0.01, 0.61, 0.67, 0.99);
+          animation: bouncingArrow 1s infinite alternate
+        cubic-bezier(0.01, 0.61, 0.67, 0.99);
+  /* cubic-bezier(0.01, 0.61, 0.39, 1); */
+  /* cubic-bezier(0.18, 0.89, 0.3, 1); */
+}
+
+@-webkit-keyframes bouncingArrow {
+  0% {
+    transform: translateY(4px);
+  }
+
+  100% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes bouncingArrow {
+  0% {
+    transform: translateY(4px);
+  }
+
+  100% {
+    transform: translateY(-6px);
+  }
+}
+
 .section_latest_news .section_titling {
   margin-left: auto;
   margin-right: auto;
@@ -1412,6 +1603,233 @@ article > *:not(.entry-content),
   padding-bottom: 4rem;
 }
 
+.section-show-thematiques .thematiques-container {
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  max-width: 1280px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2rem;
+  row-gap: 8rem;
+  padding-top: 4rem;
+}
+
+.section-show-thematiques .card-thematique {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 1.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 2rem;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+}
+
+.section-show-thematiques .card-thematique__thumbnail {
+  width: 100%;
+  align-self: flex-end;
+  max-height: 250px;
+  width: auto;
+  margin-top: -110px;
+  margin-right: 0px;
+}
+
+.section-show-thematiques .card-thematique__title {
+  padding-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+.section-show-thematiques .card-thematique__descritpion {
+}
+
+.section-show-thematiques .card-thematique__cta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 2rem;
+  font-weight: 700;
+}
+
+.section-show-thematiques .card-thematique__cta::after {
+  position: absolute;
+  content: var(--tw-content);
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.section-show-thematiques .card-thematique__cta:hover {
+  opacity: 1;
+}
+
+.section-show-thematiques .card-thematique__cta {
+  transition: font-weight 0.3s ease-in-out;
+}
+
+.section-show-thematiques .card-thematique__cta .cta_arrow_button {
+  display: block;
+  width: 50px;
+  height: 50px;
+}
+
+.section-show-thematiques .card-thematique:hover {
+  transform: scale(1.02) translateY(-10px);
+  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
+}
+
+.section-show-thematiques .card-thematique:hover .cta_arrow_button {
+  opacity: 1;
+}
+
+.section-show-thematiques .card-thematique.card-acoustique:hover .cta_arrow_button,  .section-show-thematiques .card-thematique.card-petites-coproprietes:hover .cta_arrow_button {
+  filter: invert(27%) sepia(88%) saturate(1302%)
+    hue-rotate(206deg) brightness(105%) contrast(114%);
+}
+
+.section-show-thematiques .card-thematique.card-au-quotidien:hover .cta_arrow_button,  .section-show-thematiques .card-thematique.card-isolation:hover .cta_arrow_button {
+  filter: invert(21%) sepia(94%) saturate(3059%)
+    hue-rotate(26deg) brightness(98%) contrast(98%);
+}
+
+.section-show-thematiques .card-thematique.card-energies:hover .cta_arrow_button,  .section-show-thematiques .card-thematique.card-urbanisme:hover .cta_arrow_button {
+  filter: invert(28%) sepia(89%) saturate(1188%)
+    hue-rotate(131deg) brightness(95%) contrast(98%);
+}
+
+.section-show-thematiques .card-thematique.card-location:hover .cta_arrow_button {
+  filter: invert(13%) sepia(71%) saturate(4425%)
+    hue-rotate(338deg) brightness(109%) contrast(117%);
+}
+
+.section-show-thematiques .card-thematique.card-patrimoine:hover .cta_arrow_button {
+  filter: invert(25%) sepia(79%) saturate(6075%)
+    hue-rotate(263deg) brightness(99%) contrast(96%);
+}
+
+.hover\:bg-primary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 1 84 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 30 30 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-acoustique-coproprietes:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 94 242 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-acoustique-coproprietes-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 241 255 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-energies-urbanisme:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 126 80 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-energies-urbanisme-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 255 240 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-isolation-quotidien:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 69 3 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-isolation-quotidien-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 236 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-patrimoine-renovation:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 47 247 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-patrimoine-renovation-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 253 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-location:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 0 43 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-location-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 231 / var(--tw-bg-opacity));
+}
+
+.hover\:text-primary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(47 1 84 / var(--tw-text-opacity));
+}
+
+.hover\:text-secondary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 30 30 / var(--tw-text-opacity));
+}
+
+.hover\:text-acoustique-coproprietes:hover {
+  --tw-text-opacity: 1;
+  color: rgb(36 94 242 / var(--tw-text-opacity));
+}
+
+.hover\:text-acoustique-coproprietes-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 241 255 / var(--tw-text-opacity));
+}
+
+.hover\:text-energies-urbanisme:hover {
+  --tw-text-opacity: 1;
+  color: rgb(2 126 80 / var(--tw-text-opacity));
+}
+
+.hover\:text-energies-urbanisme-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(227 255 240 / var(--tw-text-opacity));
+}
+
+.hover\:text-isolation-quotidien:hover {
+  --tw-text-opacity: 1;
+  color: rgb(194 69 3 / var(--tw-text-opacity));
+}
+
+.hover\:text-isolation-quotidien-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 251 236 / var(--tw-text-opacity));
+}
+
+.hover\:text-patrimoine-renovation:hover {
+  --tw-text-opacity: 1;
+  color: rgb(139 47 247 / var(--tw-text-opacity));
+}
+
+.hover\:text-patrimoine-renovation-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 229 253 / var(--tw-text-opacity));
+}
+
+.hover\:text-location:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 0 43 / var(--tw-text-opacity));
+}
+
+.hover\:text-location-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 231 / var(--tw-text-opacity));
+}
+
 @media (min-width: 782px) {
   .md\:my-6 {
     margin-top: 1.5rem;
diff --git a/css/editor-style.css b/css/editor-style.css
index 2d040bb..ea87ad3 100644
--- a/css/editor-style.css
+++ b/css/editor-style.css
@@ -162,6 +162,61 @@
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
+.bg-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 30 30 / var(--tw-bg-opacity))
+}
+
+.bg-acoustique-coproprietes {
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 94 242 / var(--tw-bg-opacity))
+}
+
+.bg-acoustique-coproprietes-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 241 255 / var(--tw-bg-opacity))
+}
+
+.bg-energies-urbanisme {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 126 80 / var(--tw-bg-opacity))
+}
+
+.bg-energies-urbanisme-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 255 240 / var(--tw-bg-opacity))
+}
+
+.bg-isolation-quotidien {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 69 3 / var(--tw-bg-opacity))
+}
+
+.bg-isolation-quotidien-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 236 / var(--tw-bg-opacity))
+}
+
+.bg-patrimoine-renovation {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 47 247 / var(--tw-bg-opacity))
+}
+
+.bg-patrimoine-renovation-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 253 / var(--tw-bg-opacity))
+}
+
+.bg-location {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 0 43 / var(--tw-bg-opacity))
+}
+
+.bg-location-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 231 / var(--tw-bg-opacity))
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem
@@ -231,6 +286,66 @@
   color: rgb(255 255 255 / var(--tw-text-opacity))
 }
 
+.text-isolation-quotidien {
+  --tw-text-opacity: 1;
+  color: rgb(194 69 3 / var(--tw-text-opacity))
+}
+
+.text-primary {
+  --tw-text-opacity: 1;
+  color: rgb(47 1 84 / var(--tw-text-opacity))
+}
+
+.text-secondary {
+  --tw-text-opacity: 1;
+  color: rgb(223 30 30 / var(--tw-text-opacity))
+}
+
+.text-acoustique-coproprietes {
+  --tw-text-opacity: 1;
+  color: rgb(36 94 242 / var(--tw-text-opacity))
+}
+
+.text-acoustique-coproprietes-light {
+  --tw-text-opacity: 1;
+  color: rgb(223 241 255 / var(--tw-text-opacity))
+}
+
+.text-energies-urbanisme {
+  --tw-text-opacity: 1;
+  color: rgb(2 126 80 / var(--tw-text-opacity))
+}
+
+.text-energies-urbanisme-light {
+  --tw-text-opacity: 1;
+  color: rgb(227 255 240 / var(--tw-text-opacity))
+}
+
+.text-isolation-quotidien-light {
+  --tw-text-opacity: 1;
+  color: rgb(255 251 236 / var(--tw-text-opacity))
+}
+
+.text-patrimoine-renovation {
+  --tw-text-opacity: 1;
+  color: rgb(139 47 247 / var(--tw-text-opacity))
+}
+
+.text-patrimoine-renovation-light {
+  --tw-text-opacity: 1;
+  color: rgb(255 229 253 / var(--tw-text-opacity))
+}
+
+.text-location {
+  --tw-text-opacity: 1;
+  color: rgb(223 0 43 / var(--tw-text-opacity))
+}
+
+.text-location-light {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 231 / var(--tw-text-opacity))
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
@@ -325,6 +440,126 @@ body {
   max-width: 782px
 }
 
+.hover\:bg-primary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(47 1 84 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 30 30 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-acoustique-coproprietes:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(36 94 242 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-acoustique-coproprietes-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 241 255 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-energies-urbanisme:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 126 80 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-energies-urbanisme-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(227 255 240 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-isolation-quotidien:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 69 3 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-isolation-quotidien-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 236 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-patrimoine-renovation:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 47 247 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-patrimoine-renovation-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 229 253 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-location:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(223 0 43 / var(--tw-bg-opacity))
+}
+
+.hover\:bg-location-light:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 231 / var(--tw-bg-opacity))
+}
+
+.hover\:text-primary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(47 1 84 / var(--tw-text-opacity))
+}
+
+.hover\:text-secondary:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 30 30 / var(--tw-text-opacity))
+}
+
+.hover\:text-acoustique-coproprietes:hover {
+  --tw-text-opacity: 1;
+  color: rgb(36 94 242 / var(--tw-text-opacity))
+}
+
+.hover\:text-acoustique-coproprietes-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 241 255 / var(--tw-text-opacity))
+}
+
+.hover\:text-energies-urbanisme:hover {
+  --tw-text-opacity: 1;
+  color: rgb(2 126 80 / var(--tw-text-opacity))
+}
+
+.hover\:text-energies-urbanisme-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(227 255 240 / var(--tw-text-opacity))
+}
+
+.hover\:text-isolation-quotidien:hover {
+  --tw-text-opacity: 1;
+  color: rgb(194 69 3 / var(--tw-text-opacity))
+}
+
+.hover\:text-isolation-quotidien-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 251 236 / var(--tw-text-opacity))
+}
+
+.hover\:text-patrimoine-renovation:hover {
+  --tw-text-opacity: 1;
+  color: rgb(139 47 247 / var(--tw-text-opacity))
+}
+
+.hover\:text-patrimoine-renovation-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 229 253 / var(--tw-text-opacity))
+}
+
+.hover\:text-location:hover {
+  --tw-text-opacity: 1;
+  color: rgb(223 0 43 / var(--tw-text-opacity))
+}
+
+.hover\:text-location-light:hover {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 231 / var(--tw-text-opacity))
+}
+
 @media (min-width: 782px) {
   .md\:my-6 {
     margin-top: 1.5rem;
diff --git a/functions.php b/functions.php
index 023075d..ce6e5be 100644
--- a/functions.php
+++ b/functions.php
@@ -7,7 +7,7 @@ require_once(__DIR__ . '/includes/post_types.php');
 require_once(__DIR__ . '/includes/admin.php');
 require_once(__DIR__ . '/includes/logos.php');
 require_once(__DIR__ . '/includes/taxonomy.php');
+require_once(__DIR__ . '/includes/utilities.php');
 
 // require_once(__DIR__ . '/includes/widget.php');
-// require_once( __DIR__ . '/includes/errorlog.php');
 // require_once( __DIR__ . '/includes/logos.php');
\ No newline at end of file
diff --git a/includes/blocks.php b/includes/blocks.php
index 3b771d6..a7d556a 100755
--- a/includes/blocks.php
+++ b/includes/blocks.php
@@ -34,6 +34,7 @@ function mywp_register_acf_blocks()
 	}
 	register_block_type(get_template_directory() . '/template-blocks/home/home-header');
 	register_block_type(get_template_directory() . '/template-blocks/home/latest-news');
+	register_block_type(get_template_directory() . '/template-blocks/home/show-thematiques');
 }
 add_action('init', 'mywp_register_acf_blocks');
 
diff --git a/includes/utilities.php b/includes/utilities.php
new file mode 100644
index 0000000..ecd9ea5
--- /dev/null
+++ b/includes/utilities.php
@@ -0,0 +1,29 @@
+<?php
+function getThematiqueFamilySlug($thematique_slug)
+{
+
+	switch ($thematique_slug) {
+		case "energie":
+		case "urbanisme":
+			return "energies-urbanisme";
+
+		case "acoustique":
+		case "petites-coproprietes":
+			return "acoustique-coproprietes";
+
+		case "isolation":
+		case "au-quotidien":
+			return "isolation-quotidien";
+
+		case "energies":
+		case "urbanisme":
+			return "energies-urbanisme";
+
+		case "patrimoine":
+		case "renovation":
+			return "patrimoine-renovation";
+
+		case "location":
+			return "location";
+	}
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index 2b53ad1..c63e7ea 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,6 +6,7 @@
 
 /* ########### BASE ############ */
 @import './base/typography.css';
+@import './base/thematiques-colors.css';
 
 /* ########### COMPONENTS ############ */
 @import './components/cta.css';
@@ -23,3 +24,4 @@
 /* Home */
 @import '../../template-blocks/home/home-header/home-header.css';
 @import '../../template-blocks/home/latest-news/latest-news.css';
+@import '../../template-blocks/home/show-thematiques/show-thematiques.css';
diff --git a/resources/css/base/thematiques-colors.css b/resources/css/base/thematiques-colors.css
new file mode 100644
index 0000000..6a30fc5
--- /dev/null
+++ b/resources/css/base/thematiques-colors.css
@@ -0,0 +1,20 @@
+.filter-acoustique-coproprietes {
+  filter: invert(27%) sepia(88%) saturate(1302%)
+    hue-rotate(206deg) brightness(105%) contrast(114%);
+}
+.filter-energies-urbanisme {
+  filter: invert(28%) sepia(89%) saturate(1188%)
+    hue-rotate(131deg) brightness(95%) contrast(98%);
+}
+.filter-isolation-quotidien {
+  filter: invert(21%) sepia(94%) saturate(3059%)
+    hue-rotate(26deg) brightness(98%) contrast(98%);
+}
+.filter-patrimoine {
+  filter: invert(25%) sepia(79%) saturate(6075%)
+    hue-rotate(263deg) brightness(99%) contrast(96%);
+}
+.filter-location {
+  filter: invert(13%) sepia(71%) saturate(4425%)
+    hue-rotate(338deg) brightness(109%) contrast(117%);
+}
diff --git a/resources/css/layout/header.css b/resources/css/layout/header.css
index 92f6770..6d0d3d9 100644
--- a/resources/css/layout/header.css
+++ b/resources/css/layout/header.css
@@ -24,9 +24,7 @@
 
     ul {
       @apply lg:flex 
-			gap-x-2 
-			lg:gap-x-4 
-			xl:gap-x-8
+	
 			pr-0;
     }
 
@@ -42,15 +40,16 @@
 
     li.menu-item {
       @apply font-medium 
-			text-sm
-			text-center;
+			
+			text-center
+      px-4
+      py-2
+      rounded-xl;
 
-      &:hover > a,
+      &:hover,
       a:focus {
-        @apply cursor-pointer
-				underline
-				underline-offset-8
-				text-secondary;
+        @apply cursor-pointer;
+        background-color: rgba(255, 255, 255, 0.1);
       }
       a:focus {
         text-decoration: none;
diff --git a/resources/svg/arrow-down-white.svg b/resources/svg/arrow-down-white.svg
new file mode 100644
index 0000000..591f745
--- /dev/null
+++ b/resources/svg/arrow-down-white.svg
@@ -0,0 +1,11 @@
+<svg id="fleche-animation-scroll" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.591" height="36.712" viewBox="0 0 24.591 36.712">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_773" data-name="Rectangle 773" width="24.591" height="36.712" fill="none" stroke="#fff" stroke-width="2"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_3060" data-name="Groupe 3060" clip-path="url(#clip-path)">
+    <line id="Ligne_1913" data-name="Ligne 1913" y2="33.552" transform="translate(12.295 1.58)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Tracé_11381" data-name="Tracé 11381" d="M1,15.452,11.715,26.167,22.43,15.452" transform="translate(0.58 8.965)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/resources/svg/arrow-right-circle.svg b/resources/svg/arrow-right-circle.svg
new file mode 100644
index 0000000..3c793de
--- /dev/null
+++ b/resources/svg/arrow-right-circle.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" viewBox="0 0 47 47">
+  <g id="Groupe_3134" data-name="Groupe 3134" transform="translate(-260.842 -459)">
+    <g id="Groupe_1270" data-name="Groupe 1270" transform="translate(274.771 475.82)">
+      <line id="Ligne_6" data-name="Ligne 6" x2="19.821" transform="translate(0 6.33)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Tracé_162" data-name="Tracé 162" d="M104.818,82.8l6.33-6.33-6.33-6.33" transform="translate(-91.328 -70.142)" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+    <g id="Ellipse_202" data-name="Ellipse 202" transform="translate(260.842 459)" fill="none" stroke="#000" stroke-width="2">
+      <circle cx="23.5" cy="23.5" r="23.5" stroke="none"/>
+      <circle cx="23.5" cy="23.5" r="22.5" fill="none"/>
+    </g>
+  </g>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d316ea..9d00474 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,36 +1,97 @@
 const theme = require('./theme.json');
-const tailpress = require("@jeffreyvr/tailwindcss-tailpress");
+const tailpress = require('@jeffreyvr/tailwindcss-tailpress');
 
 module.exports = {
-    content: [
-        './*.php',
-        './**/*.php',
-        './resources/css/*.css',
-        './resources/js/*.js',
-        './safelist.txt'
-    ],
-    theme: {
-        container: {
-            padding: {
-                DEFAULT: '1rem',
-                sm: '2rem',
-                lg: '0rem'
-            },
-        },
-        extend: {
-            colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
-            fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme))
-        },
-        screens: {
-            'xs': '480px',
-            'sm': '600px',
-            'md': '782px',
-            'lg': tailpress.theme('settings.layout.contentSize', theme),
-            'xl': tailpress.theme('settings.layout.wideSize', theme),
-            '2xl': '1440px'
-        }
+  content: [
+    './*.php',
+    './**/*.php',
+    './resources/css/*.css',
+    './resources/js/*.js',
+    './safelist.txt',
+  ],
+  safelist: [
+    'bg-primary',
+    'text-primary',
+    'bg-secondary',
+    'text-secondary',
+    'bg-acoustique-coproprietes',
+    'text-acoustique-coproprietes',
+    'bg-acoustique-coproprietes-light',
+    'text-acoustique-coproprietes-light',
+    'bg-energies-urbanisme',
+    'text-energies-urbanisme',
+    'bg-energies-urbanisme-light',
+    'text-energies-urbanisme-light',
+    'bg-isolation-quotidien',
+    'text-isolation-quotidien',
+    'bg-isolation-quotidien-light',
+    'text-isolation-quotidien-light',
+    'bg-patrimoine-renovation',
+    'text-patrimoine-renovation',
+    'bg-patrimoine-renovation-light',
+    'text-patrimoine-renovation-light',
+    'bg-location',
+    'text-location',
+    'bg-location-light',
+    'text-location-light',
+    'hover:bg-primary',
+    'hover:text-primary',
+    'hover:bg-secondary',
+    'hover:text-secondary',
+    'hover:bg-acoustique-coproprietes',
+    'hover:text-acoustique-coproprietes',
+    'hover:bg-acoustique-coproprietes-light',
+    'hover:text-acoustique-coproprietes-light',
+    'hover:bg-energies-urbanisme',
+    'hover:text-energies-urbanisme',
+    'hover:bg-energies-urbanisme-light',
+    'hover:text-energies-urbanisme-light',
+    'hover:bg-isolation-quotidien',
+    'hover:text-isolation-quotidien',
+    'hover:bg-isolation-quotidien-light',
+    'hover:text-isolation-quotidien-light',
+    'hover:bg-patrimoine-renovation',
+    'hover:text-patrimoine-renovation',
+    'hover:bg-patrimoine-renovation-light',
+    'hover:text-patrimoine-renovation-light',
+    'hover:bg-location',
+    'hover:text-location',
+    'hover:bg-location-light',
+    'hover:text-location-light',
+  ],
+  theme: {
+    container: {
+      padding: {
+        DEFAULT: '1rem',
+        sm: '2rem',
+        lg: '0rem',
+      },
     },
-    plugins: [
-        tailpress.tailwind
-    ]
+    extend: {
+      colors: tailpress.colorMapper(
+        tailpress.theme('settings.color.palette', theme)
+      ),
+      fontSize: tailpress.fontSizeMapper(
+        tailpress.theme(
+          'settings.typography.fontSizes',
+          theme
+        )
+      ),
+    },
+    screens: {
+      xs: '480px',
+      sm: '600px',
+      md: '782px',
+      lg: tailpress.theme(
+        'settings.layout.contentSize',
+        theme
+      ),
+      xl: tailpress.theme(
+        'settings.layout.wideSize',
+        theme
+      ),
+      '2xl': '1440px',
+    },
+  },
+  plugins: [tailpress.tailwind],
 };
diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css
index e69de29..bb4f30f 100755
--- a/template-blocks/home/home-header/home-header.css
+++ b/template-blocks/home/home-header/home-header.css
@@ -0,0 +1,31 @@
+.home-header {
+  @apply max-w-screen-2xl mx-auto px-16 py-32;
+
+  &__titling {
+    @apply max-w-[580px];
+  }
+  &__title {
+    @apply text-4xl font-medium pb-6;
+    line-height: 1.2;
+  }
+
+  &__scroll-down-indicator {
+    @apply bg-primary rounded-full flex justify-center items-center mt-6;
+    width: 80px;
+    height: 80px;
+    &__arrow {
+      animation: bouncingArrow 1s infinite alternate
+        cubic-bezier(0.01, 0.61, 0.67, 0.99);
+      /* cubic-bezier(0.01, 0.61, 0.39, 1); */
+      /* cubic-bezier(0.18, 0.89, 0.3, 1); */
+    }
+  }
+}
+@keyframes bouncingArrow {
+  0% {
+    transform: translateY(4px);
+  }
+  100% {
+    transform: translateY(-6px);
+  }
+}
diff --git a/template-blocks/home/home-header/home-header.php b/template-blocks/home/home-header/home-header.php
index d8127e0..9567d00 100755
--- a/template-blocks/home/home-header/home-header.php
+++ b/template-blocks/home/home-header/home-header.php
@@ -5,12 +5,14 @@ $home_header = get_field('home_header_datas');
 
 
 <section class="home-header header_top">
-	<h1>qsdqsdd</h1>
-	<div class="home-header__content">
+	<div class="home-header__titling">
 		<h1 class="home-header__title">
 			<?php echo $home_header['title'] ?>
 		</h1>
-
+		<p><?php echo $home_header['description'] ?></p>
+		<div class="home-header__scroll-down-indicator">
+			<img class="home-header__scroll-down-indicator__arrow" src='<?php echo get_template_directory_uri() ?>/resources/svg/arrow-down-white.svg' alt=''>
+		</div>
 
 	</div>
 </section>
\ No newline at end of file
diff --git a/template-blocks/home/show-thematiques/block.json b/template-blocks/home/show-thematiques/block.json
new file mode 100644
index 0000000..b4b2106
--- /dev/null
+++ b/template-blocks/home/show-thematiques/block.json
@@ -0,0 +1,17 @@
+{
+	"name": "acf/show-thematiques",
+	"title": "Home | Thématiques",
+	"category": "homegrade-pages",
+	"multiple": false,
+	"icon": {
+		"foreground": "#DF1E1E",
+		"src": "schedule"
+	},
+	"keywords": [
+		"Thématiques"
+	],
+	"acf": {
+		"mode": "auto",
+		"renderTemplate": "show-thematiques.php"
+	}
+}
\ No newline at end of file
diff --git a/template-blocks/home/show-thematiques/show-thematiques.css b/template-blocks/home/show-thematiques/show-thematiques.css
new file mode 100755
index 0000000..56714ff
--- /dev/null
+++ b/template-blocks/home/show-thematiques/show-thematiques.css
@@ -0,0 +1,85 @@
+.section-show-thematiques {
+  .thematiques-container {
+    @apply grid 
+    grid-cols-3
+    gap-8
+    gap-y-32
+    max-w-screen-xl
+    mx-auto
+    pt-16;
+  }
+
+  .card-thematique {
+    @apply bg-white flex flex-col p-8 rounded-3xl relative;
+    transition: all 0.3s ease-in-out;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+
+    &__thumbnail {
+      @apply w-full self-end;
+      max-height: 250px;
+      width: auto;
+      margin-top: -110px;
+      margin-right: 0px;
+    }
+    &__title {
+      @apply text-lg font-bold pb-4;
+    }
+    &__descritpion {
+    }
+
+    &__cta {
+      @apply after:absolute 
+      after:inset-0
+      font-bold
+      hover:opacity-100
+      pt-8
+      flex
+      items-center
+      justify-between;
+      transition: font-weight 0.3s ease-in-out;
+      .cta_arrow_button {
+        @apply block;
+        width: 50px;
+        height: 50px;
+      }
+    }
+
+    &:hover {
+      transform: scale(1.02) translateY(-10px);
+      box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15);
+
+      .cta_arrow_button {
+        opacity: 1;
+      }
+    }
+
+    &.card-acoustique:hover,
+    &.card-petites-coproprietes:hover {
+      .cta_arrow_button {
+        @apply filter-acoustique-coproprietes;
+      }
+    }
+    &.card-au-quotidien:hover,
+    &.card-isolation:hover {
+      .cta_arrow_button {
+        @apply filter-isolation-quotidien;
+      }
+    }
+    &.card-energies:hover,
+    &.card-urbanisme:hover {
+      .cta_arrow_button {
+        @apply filter-energies-urbanisme;
+      }
+    }
+    &.card-location:hover {
+      .cta_arrow_button {
+        @apply filter-location;
+      }
+    }
+    &.card-patrimoine:hover {
+      .cta_arrow_button {
+        @apply filter-patrimoine;
+      }
+    }
+  }
+}
diff --git a/template-blocks/home/show-thematiques/show-thematiques.php b/template-blocks/home/show-thematiques/show-thematiques.php
new file mode 100755
index 0000000..fda54ad
--- /dev/null
+++ b/template-blocks/home/show-thematiques/show-thematiques.php
@@ -0,0 +1,44 @@
+<?php
+$block_titling_datas = get_field('block_titling_datas');
+
+
+$terms = get_terms(array(
+	'taxonomy' => 'thematiques',
+	'parent' => 0,
+	'hide_empty' => false,
+));
+
+
+?>
+
+<section class="section-show-thematiques">
+	<div class="section_titling">
+		<h2 class="section_titling__title"><?php echo $block_titling_datas['title'] ?></h2>
+		<h3 class="section_titling__subtitle"><?php echo $block_titling_datas['subtitle'] ?></h3>
+	</div>
+
+	<div class="thematiques-container">
+		<?php foreach ($terms as $term) : ?>
+			<?php
+
+			$taxonomy_picture = get_field('taxonomy_pictures', $term);
+			$color = getThematiqueFamilySlug($term->slug);
+			?>
+			<div class="card-thematique card-<?php echo $term->slug ?>">
+				<img class="card-thematique__thumbnail" src="<?php echo $taxonomy_picture['illustration_s']['sizes']['medium'] ?>" alt="">
+				<h4 class="card-thematique__title text-<?php echo getThematiqueFamilySlug($term->slug) ?>"><?php echo $term->name ?></h4>
+				<p class="card-thematique__description"><?php echo $term->description ?></p>
+
+				<a class="card-thematique__cta hover:text-<?php echo getThematiqueFamilySlug($term->slug) ?>" href="<?php echo get_term_link($term) ?> ">
+					En savoir plus
+					<div class="cta_arrow_button">
+						<img src='<?php echo get_template_directory_uri() ?>/resources/svg/arrow-right-circle.svg' alt=''>
+					</div>
+				</a>
+			</div>
+		<?php endforeach; ?>
+
+
+	</div>
+
+</section>
\ No newline at end of file