diff --git a/app/static/css/assiduites.css b/app/static/css/assiduites.css
index 088df3f66..7623736c0 100644
--- a/app/static/css/assiduites.css
+++ b/app/static/css/assiduites.css
@@ -730,31 +730,11 @@ tr.row-justificatif.non_valide td.assi-type {
   background-color: var(--color-defaut) !important;
 }
 
-.color.est_just.sans_etat::before {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  background-color: var(--color-justi) !important;
-  right: 0;
-}
-
-.color.invalide::before {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  right: 0;
+.color.invalide {
   background-color: var(--color-justi-invalide) !important;
 }
 
-.color.attente::before,
-.color.modifie::before {
-  content: "";
-  position: absolute;
-  width: 25%;
-  height: 100%;
-  right: 0;
+.color.attente {
   background: repeating-linear-gradient(to bottom,
       var(--color-justi-attente-stripe) 0px,
       var(--color-justi-attente-stripe) 4px,
@@ -762,6 +742,10 @@ tr.row-justificatif.non_valide td.assi-type {
       var(--color-justi-attente) 7px) !important;
 }
 
+.color.est_just {
+  background-color: var(--color-justi) !important;
+}
+
 #gtrcontent .pdp {
   display: none;
 }
diff --git a/app/templates/assiduites/pages/calendrier_assi_etud.j2 b/app/templates/assiduites/pages/calendrier_assi_etud.j2
index 3c3de3a4b..a3f2c93ec 100644
--- a/app/templates/assiduites/pages/calendrier_assi_etud.j2
+++ b/app/templates/assiduites/pages/calendrier_assi_etud.j2
@@ -75,36 +75,7 @@ Calendrier de l'assiduité
 
         <div class="help">
             <h3>Calendrier</h3>
-            <p>Code couleur</p>
-            <ul class="couleurs">
-                <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
-                </li>
-                <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
-                </li>
-                <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la
-                    période
-                </li>
-                <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
-                </li>
-
-                <li><span title="Quart Bleu" class="est_just demo"></span> &rightarrow; la période est couverte par un
-                    justificatif valide</li>
-                <li><span title="Justif. non valide" class="invalide demo"></span> &rightarrow; la période est
-                    couverte par un justificatif non valide
-                </li>
-                <li><span title="Justif. en attente" class="attente demo"></span> &rightarrow; la période
-                    a un justificatif en attente de validation
-                </li>
-            </ul>
-
-
-            <p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
+            {% include "assiduites/widgets/legende_couleur.j2" %}
         </div>
         <ul class="couleurs print">
             <li><span title="Vert" class="present demo"></span> présence
@@ -180,21 +151,8 @@ Calendrier de l'assiduité
             justify-content: start;
         }
 
-        .demo.invalide {
-            background-color: var(--color-justi-invalide) !important;
-        }
-
-        .demo.attente {
-            background: repeating-linear-gradient(to bottom,
-                    var(--color-justi-attente-stripe) 0px,
-                    var(--color-justi-attente-stripe) 4px,
-                    var(--color-justi-attente) 4px,
-                    var(--color-justi-attente) 7px) !important;
-        }
-
-        .demo.est_just {
-            background-color: var(--color-justi) !important;
-        }
+        
+        
 
 
         .demi .day.nonwork>span {
diff --git a/app/templates/assiduites/pages/signal_assiduites_group.j2 b/app/templates/assiduites/pages/signal_assiduites_group.j2
index 68e8e6fa3..2f46b07ae 100644
--- a/app/templates/assiduites/pages/signal_assiduites_group.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_group.j2
@@ -178,6 +178,11 @@
         </p>
     </div>
 
+    <div class="help">
+        <h3>Calendrier</h3>
+        {% include "assiduites/widgets/legende_couleur.j2" %}
+    </div>
+
     {% include "assiduites/widgets/toast.j2" %}
     {% include "assiduites/widgets/alert.j2" %}
     {% include "assiduites/widgets/prompt.j2" %}
diff --git a/app/templates/assiduites/widgets/legende_couleur.j2 b/app/templates/assiduites/widgets/legende_couleur.j2
index 7ceaba7d8..5a39d41ad 100644
--- a/app/templates/assiduites/widgets/legende_couleur.j2
+++ b/app/templates/assiduites/widgets/legende_couleur.j2
@@ -1,12 +1,28 @@
-<li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la période
-</li>
-<li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la période
-</li>
-<li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la période
-</li>
+<p>Code couleur</p>
+<ul class="couleurs">
+    <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la
+        période
+    </li>
+    <li><span title="Bleu clair" class="nonwork demo"></span> &rightarrow; la période n'est pas travaillée
+    </li>
+    <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la
+        période
+    </li>
+    <li><span title="Rose" class="demo color absent est_just"></span> &rightarrow; absence justifiée
+    </li>
+    <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la
+        période
+    </li>
+    <li><span title="Jaune clair" class="demo color retard est_just"></span> &rightarrow; retard justifié
+    </li>
 
-<li><span title="Hachure Bleue" class="justified demo"></span> &rightarrow; l'assiduité est justifiée par un
-    justificatif valide</li>
-<li><span title="Hachure Rouge" class="invalid_justified demo"></span> &rightarrow; l'assiduité est
-    justifiée par un justificatif non valide / en attente de validation
-</li>
\ No newline at end of file
+    <li><span title="Quart Bleu" class="est_just demo color"></span> &rightarrow; la période est couverte par un
+        justificatif valide</li>
+    <li><span title="Justif. non valide" class="invalide demo color "></span> &rightarrow; la période est
+        couverte par un justificatif non valide
+    </li>
+    <li><span title="Justif. en attente" class="attente demo color"></span> &rightarrow; la période
+        a un justificatif en attente de validation
+    </li>
+</ul>
+<p>Vous pouvez passer le curseur sur les jours colorés afin de voir les informations supplémentaires</p>
diff --git a/app/templates/assiduites/widgets/minitimeline.j2 b/app/templates/assiduites/widgets/minitimeline.j2
index 8a6b4d117..1e2efdeef 100644
--- a/app/templates/assiduites/widgets/minitimeline.j2
+++ b/app/templates/assiduites/widgets/minitimeline.j2
@@ -74,7 +74,13 @@
                 setupAssiduiteBubble(block, assiduité);
             }
 
-            // TODO: ajout couleur justificatif
+            // ajout couleur justificatif
+            const justificatifs = assiduité.justificatifs || [];
+            const justified = justificatifs.some(
+                (justificatif) => justificatif.etat === "VALIDE"
+            )
+
+            if(justified) block.classList.add("est_just");
 
             block.classList.add(assiduité.etat.toLowerCase());
             if(assiduité.etat != "CRENEAU") block.classList.add("color");