diff --git a/plugins/dynamiques-blocks/src/dernieres-dynamiques/block.json b/plugins/dynamiques-blocks/src/dernieres-dynamiques/block.json
index bf8a79e..ab95d1e 100644
--- a/plugins/dynamiques-blocks/src/dernieres-dynamiques/block.json
+++ b/plugins/dynamiques-blocks/src/dernieres-dynamiques/block.json
@@ -9,7 +9,11 @@
 	"description": "Example block scaffolded with Create Block tool.",
 	"example": {},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"background": true,
+			"text": true
+		}
 	},
 	"textdomain": "dernieres-dynamiques",
 	"editorScript": "file:./index.js",
@@ -21,6 +25,10 @@
 		"displayType": {
 			"type": "string",
 			"default": "grid"
+		},
+		"showTableOfContents": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }
\ No newline at end of file
diff --git a/plugins/dynamiques-blocks/src/dernieres-dynamiques/edit.js b/plugins/dynamiques-blocks/src/dernieres-dynamiques/edit.js
index b120297..bc6c524 100644
--- a/plugins/dynamiques-blocks/src/dernieres-dynamiques/edit.js
+++ b/plugins/dynamiques-blocks/src/dernieres-dynamiques/edit.js
@@ -11,12 +11,16 @@ import "./editor.scss";
 import ServerSideRender from "@wordpress/server-side-render";
 
 export default function Edit({ attributes, setAttributes }) {
-	const { displayType } = attributes;
+	const { displayType, showTableOfContents = true } = attributes;
 
 	function onDisplayTypeChange(value) {
 		setAttributes({ displayType: value });
 	}
 
+	function onShowTableOfContentsChange(value) {
+		setAttributes({ showTableOfContents: !showTableOfContents });
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -31,6 +35,11 @@ export default function Edit({ attributes, setAttributes }) {
 						<ToggleGroupControlOption label="Slider" value="slider" />
 						<ToggleGroupControlOption label="Grille" value="grid" />
 					</ToggleGroupControl>
+					<CheckboxControl
+						label="Afficher la table des matières"
+						checked={showTableOfContents}
+						onChange={onShowTableOfContentsChange}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div {...useBlockProps({ className: "alignfull" })}>
diff --git a/plugins/dynamiques-blocks/src/dernieres-dynamiques/render.php b/plugins/dynamiques-blocks/src/dernieres-dynamiques/render.php
index 69c4f55..22b4873 100644
--- a/plugins/dynamiques-blocks/src/dernieres-dynamiques/render.php
+++ b/plugins/dynamiques-blocks/src/dernieres-dynamiques/render.php
@@ -1,6 +1,13 @@
 <?php
 $displayType = $attributes['displayType'] ?? 'grid';
 $variantLocation = $attributes['variantLocation'] ?? 'carhop';
+$showTableOfContents = $attributes['showTableOfContents'] ?? true;
+$backgroundColor = $attributes['backgroundColor'] ?? null;
+$backgroundColorHex = get_color_hex_from_slug($backgroundColor) ?? null;
+
+$hasLightBackground = is_color_light($backgroundColorHex);
+$backgroundColorClass = $hasLightBackground ? 'block-dernieres-dynamiques--has-light-bg' : 'block-dernieres-dynamiques--has-dark-bg';
+
 
 $current_blog_id = get_current_blog_id();
 switch_to_blog(2);
@@ -23,7 +30,7 @@ $issue_related_articles =  get_field('articles', $last_issue->ID);
 ?>
 
 
-<section class="block-dernieres-dynamiques content-section block-dernieres-dynamiques--<?php echo $variantLocation; ?> alignfull">
+<section <?php echo get_block_wrapper_attributes(array('class' => 'block-dernieres-dynamiques content-section block-dernieres-dynamiques--' . $variantLocation . ' alignfull ' . $backgroundColorClass)); ?>>
 	<div class="block-dernieres-dynamiques__inner">
 		<div class="block-dernieres-dynamiques__header">
 			<h2 class="block-title">
@@ -84,80 +91,82 @@ $issue_related_articles =  get_field('articles', $last_issue->ID);
 			</div>
 		</div>
 
-		<div class="related-articles">
-			<h3 class="related-articles__title">
-				Table des matières
-			</h3>
+		<?php if ($showTableOfContents) : ?>
+
+			<div class="related-articles">
+				<h3 class="related-articles__title">
+					Table des matières
+				</h3>
 
 
-			<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
+				<div class="article-caroussel article-caroussel--<?php echo $displayType; ?>">
 
-				<?php if ($displayType === 'grid') : ?>
+					<?php if ($displayType === 'grid') : ?>
 
-					<?php foreach ($issue_related_articles as $article) : ?>
-						<?php
-						get_template_part('template-parts/dynamiques/article-card', null, array(
-							'ID' => $article->ID,
+						<?php foreach ($issue_related_articles as $article) : ?>
+							<?php
+							get_template_part('template-parts/dynamiques/article-card', null, array(
+								'ID' => $article->ID,
 
-						));
-						?>
-					<?php endforeach; ?>
-					<!-- <button class="related-articles__show-all">
+							));
+							?>
+						<?php endforeach; ?>
+						<!-- <button class="related-articles__show-all">
 						Tout afficher
 					</button> -->
-				<?php else : ?>
+					<?php else : ?>
 
-					<div class="article-caroussel__slider">
-						<?php if ($issue_related_articles && is_array($issue_related_articles)) : ?>
+						<div class="article-caroussel__slider">
+							<?php if ($issue_related_articles && is_array($issue_related_articles)) : ?>
 
 
-							<div class="swiper dernieres-dynamiques-swiper">
-								<div class="swiper-wrapper">
-									<?php foreach ($issue_related_articles as $article) : ?>
+								<div class="swiper dernieres-dynamiques-swiper">
+									<div class="swiper-wrapper">
+										<?php foreach ($issue_related_articles as $article) : ?>
 
-										<?php get_template_part('template-parts/dynamiques/article-card', null, array(
-											'ID' => $article->ID,
-											'isSwiperSlide' => true,
-											'showCover' => true,
-										)) ?>
-
-									<?php endforeach; ?>
-								</div>
-
-								<div class="swiper-pagination-fraction"></div>
-								<div class="swiper-pagination"></div>
-
-								<div class="swiper-controls">
-									<div class="swiper-button-prev">
-										<?php
-										$previous_arrow_icon = get_template_directory() . '/resources/img/elements/carhop-slider-previous.svg';
-										if (file_exists($previous_arrow_icon)) {
-											echo file_get_contents($previous_arrow_icon);
-										}
-										?>
+											<?php get_template_part('template-parts/dynamiques/article-card', null, array(
+												'ID' => $article->ID,
+												'isSwiperSlide' => true,
+												'showCover' => true,
+											)) ?>
 
+										<?php endforeach; ?>
 									</div>
-									<div class="swiper-button-next">
-										<?php
-										$next_arrow_icon = get_template_directory() . '/resources/img/elements/carhop-slider-next.svg';
-										if (file_exists($next_arrow_icon)) {
-											echo file_get_contents($next_arrow_icon);
-										}
-										?>
+
+									<div class="swiper-pagination-fraction"></div>
+									<div class="swiper-pagination"></div>
+
+									<div class="swiper-controls">
+										<div class="swiper-button-prev">
+											<?php
+											$previous_arrow_icon = get_template_directory() . '/resources/img/elements/carhop-slider-previous.svg';
+											if (file_exists($previous_arrow_icon)) {
+												echo file_get_contents($previous_arrow_icon);
+											}
+											?>
+
+										</div>
+										<div class="swiper-button-next">
+											<?php
+											$next_arrow_icon = get_template_directory() . '/resources/img/elements/carhop-slider-next.svg';
+											if (file_exists($next_arrow_icon)) {
+												echo file_get_contents($next_arrow_icon);
+											}
+											?>
+										</div>
 									</div>
 								</div>
-							</div>
 
 
-						<?php endif; ?>
-					</div>
-				<?php endif; ?>
+							<?php endif; ?>
+						</div>
+					<?php endif; ?>
+				</div>
+
+
+
 			</div>
-
-
-
-		</div>
-
+		<?php endif; ?>
 
 	</div>
 </section>