diff --git a/demo-components.php b/demo-components.php
index dbfec3c..47dbe7b 100644
--- a/demo-components.php
+++ b/demo-components.php
@@ -1,8 +1,70 @@
-<?php get_header(); ?>
+<?php get_header('demo-components'); ?>
 
-<div class="demo-components">
+<section class="demo-components-home">
+	<h1>Content system & Design system | Documentation</h1>
+	<h2>Bienvenue dans la documentation Homegrade</h2>
 
-	<section class="buttons component">
+	<p>Vous trouverez ici une Liste de composants du design system Homegrade</p>
+
+	<div class="buttons">
+		<a class="cta cta--white cta--button cta--shadowed" href="#blocks-components">Blocks de contenu</a>
+		<a class="cta cta--white cta--button cta--shadowed" href="#css-components">Composants css</a>
+	</div>
+</section>
+
+<!-- BLOCKS COMPONENTS -->
+<section id="blocks-components" class="demo-components">
+	<div class="demo-components__section-title">
+		<h2 class="">Block components</h2>
+		<h3>Blocks de contenu</h3>
+		<p>Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu</p>
+	</div>
+	<article class="component">
+
+		<div class="component-explanation">
+			<h2 class="component-explanation__title">Content page header</h2>
+			<p class="component-explanation__description">Un header qui s'insère en haut de page</p>
+			<div class="component-explanation__options">
+				<h3>Options & Variantes</h3>
+				<ul>
+					<li class="component-explanation__option">
+						<h4 class="component-explanation__option-title">Call to action</h4>
+						<p class="component-explanation__option-description">
+							Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"</p>
+
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="block-content-page-header wp-block-homegrade-content-blocks-content-page-header">
+			<div class="block-content-page-header__content">
+				<h1>Qui sommes-nous ?</h1>
+				<h2>Plus de 40 conseillers en rénovation </h2>
+				<p>Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de l’art… <strong>en formation continue</strong> ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.<br><br>Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers l’excellence. </p>
+				<a class="block-content-page-header__cta-link" href="www.exemple.com">Voir l’équipe de direction de Homegrade</a>
+			</div>
+
+			<img decoding="async" class="block-content-page-header__page-icon" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade-icone-de-page-qui-sommes-nous.svg" alt="">
+
+		</div>
+
+	</article>
+
+
+</section>
+
+<!-- CSS COMPONENTS -->
+
+<section id="css-components" class="demo-components">
+	<div class="demo-components__section-title">
+		<h2>CSS components</h2>
+		<h3>Composants CSS</h3>
+		<p>Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages </p>
+
+	</div>
+
+	<!-- BOUTONS -->
+	<article class="buttons component">
 		<div class="component-explanation">
 			<h2 class="component-explanation__title">Boutons</h2>
 			<p class="component-explanation__description">différent boutons</p>
@@ -15,9 +77,14 @@
 			<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>
 
 		</div>
-	</section>
+	</article>
 
-	<section id="heading-box" class="component">
+	<!-- HEADING BOX -->
+	<article id="heading-box" class="component">
+		<div class="component-explanation">
+			<h2 class="component-explanation__title">Heading Box</h2>
+			<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
+		</div>
 		<?php
 		get_template_part("template-components/heading-box", null, array(
 			"title" => "Heading Box",
@@ -27,44 +94,39 @@
 			)
 		));
 		?>
+
+	</article>
+
+	<!-- NEWS HEADING BOX -->
+	<article id="news-heading-box" class="component">
 		<div class="component-explanation">
-			<h2 class="component-explanation__title">Heading Box</h2>
+			<h2 class="component-explanation__title">News Heading Box</h2>
 			<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
 		</div>
-	</section>
+		<?php
+		get_template_part("template-components/news-heading-box", null, array(
+			"news_type" => array(get_term(88, "news-type")),
+			"title" => "Boite de titrage News",
+			"thumbnail" => get_the_post_thumbnail(2271, "full", array('class' => 'news-heading-box__thumbnail')),
+			"published" => get_the_date()
+		));
+		?>
 
-	<?php
-	get_template_part('template-components/post-conseils/chapter-header');
+	</article>
 
-
-	?>
-
-</div>
+	<article id="chapter-header" class="component">
+		<div class="component-explanation">
+			<h2 class="component-explanation__title">Chapter Header</h2>
+			<p class="component-explanation__description">Pour le heading des chapitres conseils</p>
+		</div>
+		<?php get_template_part('template-components/post-conseils/chapter-header'); ?>
+	</article>
 
 
 
+</section>
 
-<!-- Slider main container -->
-<div class=" swiper">
-	<!-- Additional required wrapper -->
-	<div class="swiper-wrapper">
-		<!-- Slides -->
-		<div class="swiper-slide">Slide 1</div>
-		<div class="swiper-slide">Slide 2</div>
-		<div class="swiper-slide">Slide 3</div>
-		...
-	</div>
-	<!-- If we need pagination -->
-	<div class="swiper-pagination"></div>
-
-	<!-- If we need navigation buttons -->
-	<div class="swiper-button-prev"></div>
-
-
-	<!-- If we need scrollbar -->
-	<div class="swiper-scrollbar"></div>
-</div>
 
 
 <?php
-get_footer();
+get_footer('demo-components');
diff --git a/footer-demo-components.php b/footer-demo-components.php
new file mode 100644
index 0000000..d34c1bb
--- /dev/null
+++ b/footer-demo-components.php
@@ -0,0 +1,18 @@
+</main>
+
+<?php do_action('tailpress_content_end'); ?>
+
+
+<?php do_action('tailpress_content_after'); ?>
+
+
+
+</div>
+
+<?php wp_footer(); ?>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/header-demo-components.php b/header-demo-components.php
new file mode 100644
index 0000000..7766be8
--- /dev/null
+++ b/header-demo-components.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+
+<head>
+	<meta charset="<?php bloginfo('charset'); ?>">
+	<meta name="viewport" content="width=device-width">
+	<link rel="profile" href="http://gmpg.org/xfn/11">
+	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
+	<?php wp_head(); ?>
+
+</head>
+
+<body <?php body_class(); ?>>
+	<?php
+	do_action('tailpress_site_before');
+	global $post;
+	?>
+
+	<div id="page-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
+
+		<div class="skiplinks" aria-label="<?php echo __('Accès rapide', 'homegrade-theme__texte-fonctionnel') ?>">
+			<a href="#content" class="skiplinks__link"><?php echo __('Contenu', 'homegrade-theme__texte-fonctionnel') ?></a>
+		</div>
+		<ul class="skiplinks">
+			<li></li>
+		</ul>
+
+		<?php do_action('tailpress_header'); ?>
+
+		<header id="main-header">
+
+
+
+
+		</header>
+
+
+		<?php if (is_front_page()) { ?>
+
+		<?php } ?>
+
+		<?php do_action('tailpress_content_start'); ?>
+
+
+		<?php
+
+		$thematique = get_the_terms(get_the_ID(), 'thematiques')[0];
+		$thematiqueParent = getParentThematique($thematique);
+		$thematiqueColorSlug = getThematiqueFamilySlug($thematiqueParent->slug);
+		?>
+
+		<main id="content" class="site-content flex-grow">
\ No newline at end of file
diff --git a/resources/css/pages/demo-components.css b/resources/css/pages/demo-components.css
index 1f87450..d28f0a2 100644
--- a/resources/css/pages/demo-components.css
+++ b/resources/css/pages/demo-components.css
@@ -1,14 +1,81 @@
+.demo-components-home {
+  @apply bg-secondary container px-8 mx-auto py-12 my-12 rounded-3xl;
+  @apply text-white text-center;
+  h1 {
+    @apply text-base font-bold tracking-wider uppercase;
+    letter-spacing: 0.15em;
+  }
+  h2 {
+    @apply text-5xl font-bold tracking-wide max-w-3xl mx-auto py-8;
+  }
+  p {
+    @apply text-lg font-medium tracking-wider;
+  }
+  .cta--white:hover {
+    @apply bg-primary;
+  }
+  .buttons {
+    @apply flex justify-center mx-auto mt-8 gap-4;
+  }
+}
+
 .demo-components {
+  @apply homegrade-page-container;
+
+  &__section-title {
+    @apply text-white
+     text-6xl
+    text-center 
+    bg-secondary
+    flex
+    flex-col 
+    justify-center
+    items-center py-8;
+    height: 100vh;
+    max-width: 100vw;
+    margin: 2rem calc(50% - 50vw);
+
+    h2 {
+      @apply text-lg uppercase font-bold tracking-wide my-0;
+    }
+    h3 {
+      @apply text-6xl font-bold tracking-wide my-0 mt-4;
+    }
+    p {
+      @apply text-xl max-w-2xl mt-6 tracking-wide font-medium;
+      line-height: 1.4;
+    }
+  }
   .component {
-    @apply border-b    border-neutral-400 py-32;
+    @apply border-b border-neutral-300 py-16;
+    > * {
+      @apply !max-w-full w-full mx-auto;
+    }
   }
   .component-explanation {
-    @apply max-w-screen-lg mx-auto px-8 text-center py-6;
+    @apply py-6 text-center pb-16;
     &__title {
-      @apply text-3xl font-bold text-center pb-2;
+      @apply text-3xl font-bold  pb-2 text-secondary;
     }
     &__description {
-      @apply text-neutral-500 text-lg font-medium mx-auto pt-0 max-w-lg mx-auto;
+      @apply text-neutral-500 text-base font-medium pt-0 max-w-lg mx-auto;
+    }
+    &__options {
+      @apply mt-4 font-bold;
+      h3 {
+        @apply m-0 uppercase text-sm pt-4 text-secondary  tracking-wide;
+      }
+    }
+    &__option {
+      @apply py-4;
+    }
+
+    &__option-title {
+      @apply text-neutral-900 text-base !font-bold;
+    }
+
+    &__option-description {
+      @apply text-neutral-500 text-base font-medium pt-0 max-w-sm mx-auto;
     }
   }
   .buttons {
@@ -17,4 +84,16 @@
       @apply flex justify-center gap-8;
     }
   }
+
+  #chapter-header .post-conseils-chapter-header {
+    @apply bg-energies-urbanisme-light;
+  }
+}
+
+#blocks-components {
+  @apply pb-64;
+  .block-content-page-header {
+    @apply px-16 rounded-3xl;
+    @apply shadowed bg-white;
+  }
 }