diff --git a/app/assets/images/a-fond.jpg b/app/assets/images/a-fond.jpg
new file mode 100644
index 0000000..756b311
Binary files /dev/null and b/app/assets/images/a-fond.jpg differ
diff --git a/app/assets/images/afond.jpg b/app/assets/images/afond.jpg
new file mode 100644
index 0000000..756b311
Binary files /dev/null and b/app/assets/images/afond.jpg differ
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index a959d5d..9fc2e7f 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -31,6 +31,13 @@ body {
   font-size: 2rem;
 }
 
+.legend .bar-afond {
+  background: black;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+
 .legend .bar-creatif {
   background: red;
   width: 10px;
@@ -192,6 +199,9 @@ main {
 .croisiere {
   background-color: green;
 }
+.afond {
+  background-color: black;
+}
 
 .info {
   margin: 30px;
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index 2978ff9..4a952ab 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -39,6 +39,10 @@
         <div class="bar-creatif"></div>
         <div class="bar-explain">Créatif</div>
       </div>
+      <div class="legend-afond">
+        <div class="bar-afond"></div>
+        <div class="bar-explain">A fond</div>
+      </div>
     </div>
   </div>
 </main>