diff --git a/template-parts/articles/index-panel.php b/template-parts/articles/index-panel.php
new file mode 100644
index 0000000..34a6225
--- /dev/null
+++ b/template-parts/articles/index-panel.php
@@ -0,0 +1,34 @@
+<?php ?>
+<div class="index-panel">
+	<div class="index-panel__header">
+		<button class="focus" data-index="sommaire" aria-selected="true" aria-controls="sommaire-index">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-resume.svg" alt="">
+			Résumé
+		</button>
+		<button class="focus" data-index="footnotes" aria-selected="false" aria-controls="footnotes-index">
+			<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/resources/img/icons/carhop-notes.svg" alt="">
+			Notes de bas de page
+		</button>
+	</div>
+
+	<div class="index-panel__content">
+		<ul data-index="sommaire" class="sommaire-index" aria-hidden="false">
+			<?php
+			$sommaire = build_sommaire_from_content(get_the_ID());
+
+			foreach ($sommaire as $chapter) {
+				echo '<li><a href="#' . $chapter['anchor'] . '">' . $chapter['title'] . '</a></li>';
+			}
+			?>
+		</ul>
+		<ul id="footnotes-index" data-index="footnotes" class="footnotes-index" aria-hidden="true">
+			<?php
+			$footnotes = build_footnotes_index_from_content(get_the_content());
+			?>
+
+			<?php foreach ($footnotes as $footnote) : ?>
+				<li><a href="#footnote-<?php echo $footnote['anchorID']; ?>" class="footnote-reference-item"><?php echo $footnote['content']; ?></a></li>
+			<?php endforeach; ?>
+	</div>
+
+</div>
\ No newline at end of file