diff --git a/mood.rb b/mood.rb
index bb3faee..0932b18 100644
--- a/mood.rb
+++ b/mood.rb
@@ -23,6 +23,6 @@ class Mood < ActiveRecord::Base
       log_mood << [ current_date.to_s, current_mode ]
       current_date += 1
     end
-    log_mood.each_slice(7).to_a.last(54)
+    log_mood.each_slice(7).to_a.last(52)
   end
 end
diff --git a/public/main.css b/public/main.css
index c6e11ee..b910771 100644
--- a/public/main.css
+++ b/public/main.css
@@ -24,12 +24,30 @@ body {
 
 .legend {
   grid-area: legend;
-  margin: 30px;
+  margin: 4px;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
-
 .info {
   grid-area: info;
 }
+.legend .bar-creatif {
+  background: red;
+  width: 10px;
+  height: 10px;
+  margin-left: 20px;
+}
+.legend .bar-frigo {
+  background: gray;
+  width: 10px;
+  height: 10px;
+  margin-left: 15px;
+}
+.legend .bar-explain {
+  padding-left: 3px;
+}
 
 main {
   display: block;
@@ -56,6 +74,7 @@ main {
   main {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
     grid-template-areas: "mode tracker";
     align-items: center;
     justify-content: center;
@@ -69,13 +88,17 @@ main {
     grid-area: tracker;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: repeat(2, 1fr) repeat(4, 1fr) repeat(3, 1fr);
     grid-template-areas:
+      "title title"
       "title title"
       "moods moods"
       "moods moods"
       "moods moods"
-      "info legend";
+      "moods moods"
+      ". legend"
+      "info info"
+      "info info";
     background-color: lightgoldenrodyellow;
     align-items: center;
     justify-content: center;
@@ -89,14 +112,6 @@ main {
     margin: 30px;
   }
 
-  .moods {
-    grid-area: moods;
-    margin: 30px;
-  }
-
-  .legend {
-    grid-area: legend;
-  }
 
   .info {
     grid-area: info;
@@ -113,19 +128,31 @@ main {
   }
 }
 .moods {
+  grid-area: moods;
+  margin: 30px;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.legend {
+  align-self: flex-end;
+}
+.log {
+  align-self: flex-end;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  justify-content: flex-start;
+  overflow: hidden;
 }
-.moods .week {
+.moods .log .week {
   display: flex;
   flex-direction: column;
   justify-items: start;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
-.moods .day {
+.moods .log .day {
   border: 1px;
   margin: 4px;
   min-width: 15px;
diff --git a/views/index.erb b/views/index.erb
index 340f740..3d49f33 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -32,23 +32,40 @@
       <h1>Comment il va le Robi ?</h1>
     </div>
     <div class="moods">
-      <% @mood_log.each do |week| %>
-        <div class="week">
-          <% week.each do |d| %>
-            <% if d[1] %>
-              <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
-            <% else %>
-              <div class="day"></div>
+      <div class="log">
+        <% @mood_log.each do |week| %>
+          <div class="week">
+            <% week.each do |d| %>
+              <% if d[1] %>
+                <div data-mode="<%= d[1] %>" data-action="mouseover->mood#showMode mouseleave->mood#showCurrent" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+              <% else %>
+                <div class="day"></div>
+              <% end %>
             <% end %>
-          <% end %>
-        </div>
-      <% end %>
+          </div>
+        <% end %>
+      </div>
     </div>
     <div class="legend">
-      Ici la légende
+      <div class="legend-mood">
+        <div class="bar-creatif"></div>
+        <div class="bar-explain">mode créatif</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-frigo"></div>
+        <div class="bar-explain">triste comme un frigo vide</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-croisiere"></div>
+        <div class="bar-explain">mode croisiere</div>
+      </div>
+      <div class="legend-mood">
+        <div class="bar-frigo"></div>
+        <div class="bar-explain">triste comme un frigo vide</div>
+      </div>
     </div>
     <div class="info">
       <div class="current-day">20 mai 2025</div>
     </div>
-  </div
+    </div>
 </main>