diff --git a/src/components/code/ValueItem.astro b/src/components/code/ValueItem.astro
new file mode 100644
index 0000000..1c99ed0
--- /dev/null
+++ b/src/components/code/ValueItem.astro
@@ -0,0 +1,7 @@
+---
+---
+
+<li class="flex items-start gap-4">
+  <span class="w-4 h-0.5 bg-purple-400/60 mt-3 flex-shrink-0"></span>
+  <span><slot /></span>
+</li>
diff --git a/src/pages/code/index.astro b/src/pages/code/index.astro
index 403e22a..f7c7910 100644
--- a/src/pages/code/index.astro
+++ b/src/pages/code/index.astro
@@ -5,6 +5,7 @@ import Layout from "../../layouts/main.astro";
 import Link from "../../components/Link.astro";
 import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.astro";
 import ProjectCard from "../../components/code/ProjectCard.astro";
+import ValueItem from "../../components/code/ValueItem.astro";
 import { getProjectBaseSlug, getProjectsBasePath } from "../../utils/i18n";
 import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
 
@@ -146,27 +147,12 @@ function formatMonth(dateStr: string) {
 
     <div class="mb-16">
       <h2 class="text-2xl font-bold text-white  mb-6">Valeurs & Approche</h2>
-      <ul class="space-y-3 text-white/60">
-        <li class="flex items-start gap-3">
-          <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
-          <span>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
-          <span>L'utilité sociale du développeur</span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
-          <span>Être fier de son travail, mais sans égo</span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
-          <span>Approche <strong class="text-white">Domain Driven Design</strong></span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
-          <span>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</span>
-        </li>
+      <ul class="space-y-4 text-white/80">
+        <ValueItem>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></ValueItem>
+        <ValueItem>L'utilité sociale du développeur</ValueItem>
+        <ValueItem>Être fier de son travail, mais sans égo</ValueItem>
+        <ValueItem>Approche <strong class="text-white">Domain Driven Design</strong></ValueItem>
+        <ValueItem>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</ValueItem>
       </ul>
     </div>