diff --git a/app/assets/images/en-charge-old.jpg b/app/assets/images/en-charge-old.jpg
new file mode 100644
index 0000000..a8e21a6
Binary files /dev/null and b/app/assets/images/en-charge-old.jpg differ
diff --git a/app/assets/images/en-charge.jpg b/app/assets/images/en-charge.jpg
index a8e21a6..998acb7 100644
Binary files a/app/assets/images/en-charge.jpg and b/app/assets/images/en-charge.jpg differ
diff --git a/app/assets/stylesheets/kluk.css b/app/assets/stylesheets/kluk.css
index 429222c..932895d 100644
--- a/app/assets/stylesheets/kluk.css
+++ b/app/assets/stylesheets/kluk.css
@@ -16,10 +16,25 @@ body {
   font-style: normal;
 }
 
+main {
+  height: 100vh;
+}
+
+.tracker {
+  align-content: center;
+}
+
+.logs {
+  height: 60vh;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
 .current-day {
   background-color: white;
   position: sticky;
-  top: 0
+  top: 0;
+  align-content: center;
 }
 
 .bar-afond {
diff --git a/app/javascript/controllers/mood_controller.js b/app/javascript/controllers/mood_controller.js
index c17d717..e56ef0b 100644
--- a/app/javascript/controllers/mood_controller.js
+++ b/app/javascript/controllers/mood_controller.js
@@ -1,16 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = [ "image", "day", "dayMobile", "mode" ]
+  static targets = [ "image", "modeDay", "modeDayMobile" ]
 
   updateDayInfo(event) {
     const image = this.imageTarget;
-    const day = this.dayTarget;
-    const dayMobile = this.dayMobileTarget;
-    const mode = this.modeTarget;
+    const modeDay = this.modeDayTarget;
+    const modeDayMobile = this.modeDayMobileTarget;
+    const modeDayContent = event.target.dataset.day + ' :  ' + event.target.dataset.mode;
     image.src = event.target.dataset.image;
-    day.textContent = event.target.dataset.day;
-    dayMobile.textContent = event.target.dataset.day;
-    mode.textContent = event.target.dataset.mode;
+    modeDayMobile.textContent = modeDayContent;
+    modeDay.textContent = modeDayContent;
   }
 }
diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb
index 942dbca..23efccd 100644
--- a/app/views/moods/index.html.erb
+++ b/app/views/moods/index.html.erb
@@ -1,49 +1,57 @@
 <main data-controller="mood" class="columns m-auto">
-  <section class="is-hidden-mobile mode section column m-auto">
-    <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
-  </section>
-  <section class="is-hidden-tablet section column m-auto current-day">
-    <h1 class="title is-1 is-spaced">Comment ça KLUK ?</h1>
-    <div class="block subtitle" data-mood-target="mode"><%= @mode %></div>
-    <div class="block subtitle" data-mood-target="dayMobile">Aujourd'hui</div>
-  </section>
-  <section class="tracker section column has-background-primary-light my-0 mx-auto">
-    <h1 class="title is-1 mt-6 is-hidden-mobile">Comment ça KLUK ?</h1>
-    <div class="subtitle is-hidden-mobile" data-mood-target="day">Aujourd'hui</div>
-    <div class="is-flex is-flex-wrap-wrap mb-5 ">
-      <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 class="current-day column">
+    <section class="m-4">
+      <h1 class="title is-3 is-spaced">Comment ça KLUK ?</h1>
+      <div class="is-hidden-tablet mb-4">
+        <div class="" data-mood-target="modeDayMobile">Aujourd'hui</div>
       </div>
+      <figure class="image is-hidden-mobile has-ratio ">
+        <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
+      </figure>
+    </section>
+  </div>
+  <section class="section column has-background-primary-light is-flex is-flex-direction-column is-justify-content-space-around">
+    <div class="is-hidden-mobile mb-4">
+      <div class="title is-3" data-mood-target="modeDay">Aujourd'hui</div>
     </div>
-    <div class="is-flex is-flex-wrap-wrap">
-      <% @mood_log.each do |week| %>
-        <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
-          <% week.each do |d| %>
-            <% if d[1] %>
-              <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
-            <% else %>
-              <div class="day"></div>
-            <% end %>
+    <div class="tracker">
+      <div class="legend is-flex is-flex-wrap-wrap mb-5">
+        <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>
+      </div>
+      <div class="logs">
+        <div class="is-flex is-flex-wrap-wrap">
+          <% @mood_log.each do |week| %>
+            <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
+              <% week.each do |d| %>
+                <% if d[1] %>
+                  <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+                <% else %>
+                  <div class="day"></div>
+                <% end %>
+              <% end %>
+            </div>
           <% end %>
         </div>
-      <% end %>
+      </div>
     </div>
   </section>
 </main>