diff --git a/public/main.css b/public/main.css
index e39d63e..c6e11ee 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,59 +3,133 @@ body {
   font: 1.8rem "Fira Sans", sans-serif;
 }
 
-main {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
+.mode {
+  grid-area: mode;
+  height: 50vh;
 }
 
-.mode {
-  height: 100vh;
+.tracker {
+  grid-area: tracker;
+}
+
+.title {
+  grid-area: title;
+  margin: 30px;
+}
+
+.moods {
+  grid-area: moods;
+  margin: 30px;
+}
+
+.legend {
+  grid-area: legend;
+  margin: 30px;
+}
+
+.info {
+  grid-area: info;
+}
+
+main {
+  display: block;
+  grid-template-rows: 1fr 1fr;
+  grid-template-areas:
+    "mode"
+    "tracker";
+  align-items: center;
+  justify-content: center;
 }
 .mode img {
   height: 100%;
   width:100%;
-  // min-width: 527px;
   object-fit: contain;
 }
 .tracker {
-  display: flex;
-  flex: 1 527px;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  background-color: lightgoldenrodyellow;
-  height: 100vh;
-  width: 100%;
+  grid-area: tracker;
 }
-
-.info h1 {
-  margin-bottom: 40px;
+.title h1 {
   font-weight: 350;
 }
-.tracks {
+
+@media (min-width: 1000px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "mode tracker";
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mode {
+    height: 100vh;
+    grid-area: mode;
+  }
+  .tracker {
+    grid-area: tracker;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "title title"
+      "moods moods"
+      "moods moods"
+      "moods moods"
+      "info legend";
+    background-color: lightgoldenrodyellow;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100%;
+    gap: 45px;
+  }
+
+  .title {
+    grid-area: title;
+    margin: 30px;
+  }
+
+  .moods {
+    grid-area: moods;
+    margin: 30px;
+  }
+
+  .legend {
+    grid-area: legend;
+  }
+
+  .info {
+    grid-area: info;
+  }
+
+  .mode img {
+    height: 100%;
+    width:100%;
+    // min-width: 527px;
+    object-fit: contain;
+  }
+  .title h1 {
+    font-weight: 350;
+  }
+}
+.moods {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
-  margin: 30px;
 }
-.week {
+.moods .week {
   display: flex;
   flex-direction: column;
   justify-items: start;
   flex-wrap: wrap;
   margin-bottom: 20px;
-  
 }
-
-.day {
+.moods .day {
   border: 1px;
   margin: 4px;
-  min-width: 20px;
-  min-height: 20px;
+  min-width: 15px;
+  min-height: 15px;
 }
 .creatif {
   background-color: red;
@@ -69,3 +143,7 @@ main {
 .croisiere {
   background-color: green;
 }
+
+.info {
+  margin: 30px;
+}
diff --git a/views/index.erb b/views/index.erb
index 20949d8..340f740 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -28,11 +28,10 @@
     <img data-mood-target="image" src="<%= @mode %>.png">
   </div>
   <div class="tracker">
-    <div class="info">
+    <div class="title">
       <h1>Comment il va le Robi ?</h1>
     </div>
-    <div class="tracks">
-
+    <div class="moods">
       <% @mood_log.each do |week| %>
         <div class="week">
           <% week.each do |d| %>
@@ -45,5 +44,11 @@
         </div>
       <% end %>
     </div>
-  </div>
+    <div class="legend">
+      Ici la légende
+    </div>
+    <div class="info">
+      <div class="current-day">20 mai 2025</div>
+    </div>
+  </div
 </main>