diff --git a/source/components/rule/Algorithm.css b/source/components/rule/Algorithm.css
index 42d1b1053..64feb8f03 100644
--- a/source/components/rule/Algorithm.css
+++ b/source/components/rule/Algorithm.css
@@ -112,13 +112,6 @@
 	margin-right: 0.6em;
 }
 
-.maximum .description,
-.composanteName {
-	font-weight: 500;
-	margin-bottom: 0.4em;
-	margin-left: 1em;
-}
-
 .leaf .situationValue {
 	text-align: center;
 }
@@ -145,10 +138,6 @@
 	margin-top: 0.6em;
 }
 
-.composantes .composanteName::first-letter {
-	text-transform: capitalize;
-}
-
 .mecanism {
 	border: 1px solid;
 	max-width: 100%;
diff --git a/source/engine/mecanismViews/Composantes.css b/source/engine/mecanismViews/Composantes.css
index 575aae937..7bd637ecc 100644
--- a/source/engine/mecanismViews/Composantes.css
+++ b/source/engine/mecanismViews/Composantes.css
@@ -3,16 +3,8 @@
 	counter-reset: li;
 	padding-left: 1em;
 }
-
-.composantes > ol > li.composante::before {
-	counter-increment: li;
-}
-.composantes > ol > li.composante::before {
-	content: counter(li) ')';
-	color: grey;
-	display: inline-block;
-	width: 1em;
-	margin-left: -1em;
+.composantes > ol > li > ul > li {
+	list-style-type: none;
 }
 
 .composantes .composanteAttributes {
diff --git a/source/engine/mecanismViews/Composantes.js b/source/engine/mecanismViews/Composantes.js
index ba44b47fc..45f331ddf 100644
--- a/source/engine/mecanismViews/Composantes.js
+++ b/source/engine/mecanismViews/Composantes.js
@@ -6,6 +6,7 @@ import { Trans } from 'react-i18next'
 import { toPairs } from 'ramda'
 import writtenNumbers from '../../locales/writtenNumbers.yaml'
 import withLanguage from 'Components/utils/withLanguage'
+import colours from 'Engine/mecanismViews/colours'
 
 let Comp = withLanguage(function Composantes({
 	language,
@@ -29,11 +30,25 @@ let Comp = withLanguage(function Composantes({
 					</p>
 					<ol>
 						{explanation.map(c => [
-							<li className="composante" key={JSON.stringify(c.composante)}>
-								<ul className="composanteAttributes">
+							<li
+								className="composante"
+								css={`
+									margin-bottom: 1em;
+								`}
+								key={JSON.stringify(c.composante)}>
+								<ul
+									className="composanteAttributes"
+									css={`
+										border-left: 4px solid ${colours('composantes')};
+										li > span:first-child {
+										}
+									`}>
 									{toPairs(c.composante).map(([k, v]) => (
 										<li key={k} className="composanteName">
-											<span>
+											<span
+												css={`
+													color: ${colours('composantes')};
+												`}>
 												<Trans>{k}</Trans>:{' '}
 											</span>
 											<span>
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index fe2ba75f9..bc9a5dbd4 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -2100,11 +2100,11 @@
 
       composantes:
         - attributs:
-            composante: base
+            nom: base
           taux: 4%
 
         - attributs:
-            composante: contribution exceptionnelle temporaire
+            nom: contribution exceptionnelle temporaire
           description: |
             Instaurée le 1er octobre 2017, applicable jusqu’au 30 septembre 2020 au plus tard.
           taux: 0.05%
@@ -2396,15 +2396,15 @@
       assiette: cotisations . assiette
       composantes:
         - attributs:
-            composante: maladie, maternité, invalidité, décès
+            nom: maladie, maternité, invalidité, décès
             dû par: employeur
           taux: taux employeur
         - attributs:
-            composante: maladie, maternité, invalidité, décès
+            nom: maladie, maternité, invalidité, décès
             dû par: salarié
           taux: taux salarié
         - attributs:
-            composante: Contribution Solidarité Autonomie
+            nom: Contribution Solidarité Autonomie
             abbréviation: CSA
             dû par: employeur
           références: