diff --git a/public/main.css b/public/main.css
index 522e99b..4f622b6 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,6 +1,8 @@
 body {
   margin: 0px;
-  font: 1.8rem "Fira Sans", sans-serif;
+  font-family: "Sour Gummy", sans-serif;
+  font-weight: 350;
+  font-style: normal;
 }
 
 .mode {
@@ -15,6 +17,7 @@ body {
 .title {
   grid-area: title;
   margin: 30px;
+  font-size: 2rem;
 }
 
 .legend .bar-creatif {
@@ -89,9 +92,10 @@ main {
     grid-area: tracker;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 2fr 6fr 1fr;
+    grid-template-rows: 2fr 1fr 6fr 1fr;
     grid-template-areas:
       "title title"
+      "info-day info-day"
       "moods moods"
       ". legend";
     background-color: lightgoldenrodyellow;
@@ -107,6 +111,10 @@ main {
     margin: 30px;
   }
 
+  .info-day {
+    grid-area: info-day;
+    margin: 30px;
+  }
 
   .info {
     grid-area: info;
@@ -127,6 +135,7 @@ main {
   max-height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .legend {
diff --git a/views/index.erb b/views/index.erb
index 2220953..c903c97 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -3,21 +3,22 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="main.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Delius&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
   <script type="module">
     import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
     window.Stimulus = Application.start()
 
     Stimulus.register("mood", class extends Controller {
-      static targets = [ "image" ]
+      static targets = [ "image", "info" ]
 
-      showMode(event) {
-        const image = this.imageTarget
+      updateDayInfo(event) {
+        const image = this.imageTarget;
+        const infoDay = this.infoTarget;
         image.src = event.target.dataset.mode + ".jpg"
-      }
-
-      showCurrent() {
-        const image = this.imageTarget
-        image.src = "<%= @mode %>.jpg"
+        infoDay.textContent = event.target.dataset.day;
       }
 
     })
@@ -31,13 +32,14 @@
     <div class="title">
       <h1>Comment il va le Robi ?</h1>
     </div>
+    <div class="info-day" data-mood-target="info">Aujourd'hui</div>
     <div class="moods">
       <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#showMode" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
+                <div data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
               <% else %>
                 <div class="day"></div>
               <% end %>