diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css
index 659dea5..9dc978f 100644
--- a/app/assets/stylesheets/kluk.css
+++ b/app/assets/stylesheets/kluk.css
@@ -42,32 +42,7 @@ main {
   align-content: center;
 }
 
-.bar-afond {
-  background: black;
-  width: 10px;
-  height: 10px;
-}
-
-.bar-creatif {
-  background: red;
-  width: 10px;
-  height: 10px;
-}
-
-.bar-frigo {
-  background: gray;
-  width: 10px;
-  height: 10px;
-}
-
-.bar-croisiere {
-  background: green;
-  width: 10px;
-  height: 10px;
-}
-
-.bar-en-charge {
-  background: orange;
+.bar {
   width: 10px;
   height: 10px;
 }
diff --git a/app/models/user.rb b/app/models/user.rb
index fe92d95..156f55a 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -2,6 +2,7 @@ class User < ApplicationRecord
   has_secure_password
   has_many :sessions, dependent: :destroy
   has_many :moods, -> { order "recorded_at" }
+  has_many :modes
 
   normalizes :email_address, with: ->(e) { e.strip.downcase }
 
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index 5e0bc10..0063f55 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -12,26 +12,12 @@
         <div class="is-flex is-align-items-center mr-4">
           <div class=""><strong>Légende</strong></div>
         </div>
-        <div class="is-flex is-align-items-center mr-4">
-          <div class="bar-frigo mr-1"></div>
-          <div class="">Triste</div>
-        </div>
-        <div class="is-flex is-align-items-center mr-4">
-          <div class="bar-en-charge mr-1"></div>
-          <div class="">En charge</div>
-        </div>
-        <div class="is-flex is-align-items-center mr-4">
-          <div class="bar-croisiere mr-1"></div>
-          <div class="">Croisiere</div>
-        </div>
-        <div class="is-flex is-align-items-center mr-4">
-          <div class="bar-creatif mr-1"></div>
-          <div>Creatif</div>
-        </div>
-        <div class="is-flex is-align-items-center mr-4">
-          <div class="bar-afond mr-1"></div>
-          <div class="">A fond</div>
-        </div>
+        <% @user.modes.each do |mode| %>
+          <div class="is-flex is-align-items-center mr-4">
+            <div class="bar mr-1" style="<%= style_for_mode(mode) %>"></div>
+            <div class=""><%= mode.label %></div>
+          </div>
+        <% end %>
       </div>
       <div class="container mb-4 p-3 has-background-white day-info">
         <div class="title is-4">