diff --git a/index.html b/index.html
index a234c9b..f5a41c6 100644
--- a/index.html
+++ b/index.html
@@ -30,26 +30,57 @@
     </div>
   </header>
 
-    <!-- GRILLE -->
+  <!-- GRILLE -->
 
-    <div class=" grid-section">
-      <section class="grid1">
-        <ul id="mosaic">
-          <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm still searchin'</strong><br>Meryll Hardt</span></a></li>
-          <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les sourcils</strong><br>Olivier Bertrand</span></a></li>
-          <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
-        </ul>
-      </section>
-      <section class="grid2">
-        <ul id="list">
+  <div class=" grid-section">
+    <section class="grid1">
+      <ul id="mosaic">
+        <li class="item"><a href="memoires/m1.html"><img src="memoires/memoire_1.jpg" alt=""><span><strong>Yeah I'm
+                still searchin'</strong><br>Meryll Hardt</span></a></li>
+        <li class="item"><a href=""><img src="memoires/memoire_2.png" alt=""><span><strong>Froncer les
+                sourcils</strong><br>Olivier Bertrand</span></a></li>
+        <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre
+                des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
+        <li class="item"><a href=""><img src="memoires/memoire_3.png" alt=""><span><strong>Design Spéculatif: La guerre
+                des imaginaires</strong><br>ANTOINE PUEL</span></a></li>
+      </ul>
+    </section>
+    <section class="grid2">
+      <div class="list">
+        <ul id="memoire">
           <li><a href="">2021</a></li>
           <li><a href="">2020</a></li>
           <li><a href="">2019</a></li>
           <li><a href="">2018</a></li>
           <li><a href="">2017</a></li>
         </ul>
-      </section>
-    </div>
+        <hr>
+        <ul id="tag">
+          <li><a href="">edition</a></li>
+          <li><a href="">web2print</a></li>
+          <li><a href="">jardin</a></li>
+          <li><a href="">architecture</a></li>
+          <li><a href="">lgbtquia+</a></li>
+        </ul>
+        <hr>
+        <ul id="orientation">
+          <li><a href="">2021</a></li>
+          <li><a href="">2020</a></li>
+          <li><a href="">2019</a></li>
+          <li><a href="">2018</a></li>
+          <li><a href="">2017</a></li>
+        </ul>
+        <hr>
+        <ul id="ap">
+          <li><a href="">2021</a></li>
+          <li><a href="">2020</a></li>
+          <li><a href="">2019</a></li>
+          <li><a href="">2018</a></li>
+          <li><a href="">2017</a></li>
+        </ul>
+      </div>
+    </section>
+  </div>
 
 </body>
 
diff --git a/style.css b/style.css
index 3ba7dc6..f4d84e3 100644
--- a/style.css
+++ b/style.css
@@ -5,16 +5,25 @@
 
   body {
     background-color: white;
+    margin: 0;
   }
 
-  /* audio,
+  /* RESET */
+  audio,
   canvas,
   iframe,
   img,
   svg,
   video {
     vertical-align: middle;
-  } */
+  }
+
+  ul,
+  li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 
   /* PARAMÈTRE DE BASE DE BOUTTON */
   .button {
@@ -59,7 +68,6 @@
     position: inherit;
     width: 100vw;
     left: 0;
-    /* background-color: rgb(255, 255, 255, 0.75%); */
     background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 25%);
   }
 
@@ -99,7 +107,8 @@
     font-size: 1rem;
   }
 
-  form input {
+  form input,
+  select {
     position: relative;
     border-color: #c104fc;
     border-radius: 5px;
@@ -108,20 +117,13 @@
     padding: 0.5rem;
     width: auto;
     overflow: visible;
-  }
-
-  form select {
-    position: relative;
-    border-color: #c104fc;
-    border-radius: 5px;
-    border-style: solid;
-    margin: 1rem;
-    padding: 0.5rem;
+    outline: none;
     background-color: white;
   }
 
-  select {
-    background: orange;
+  form input:focus,
+  select:focus {
+    border: 3px solid rgba(77, 168, 112, 1);
   }
 
   #enter input {
@@ -130,6 +132,17 @@
     font-weight: bold;
     padding: 1.2rem;
     border-radius: 16px;
+    background-color: none;
+    color: rgb(193, 4, 252);
+    border: 1px solid rgb(193, 4, 252);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  #enter input:hover {
+    background-color: rgb(193, 4, 252);
+    color: white;
   }
 
   form .boutton {
@@ -155,56 +168,51 @@
 
 
   /* GRILLE HOMEPAGE */
-  .grid-section {
-    position: relative;
-    display: grid;
-    /* margin-top:20vh; */
-    margin-right: 1vw;
-    grid-template-columns: repeat(5, 1fr);
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-  }
 
   .grid-section {
     top: 15vh;
-    padding: 1rem;
-    /* display: block; */
-  }
-
-  ul,
-  li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+    position: relative;
+    display: grid;
+    /* grid-auto-rows: minmax(100px, auto); */
   }
 
   /* MOSAIC MEMOIRE */
 
   .grid1 {
-    grid-column: 1 / 5;
-    grid-row: 1 / 12;
+    position: relative;
+    grid-column: 1 / 6;
+    width: 100%;
+    margin: none;
+    padding: 1rem;
+    left: 0;
+    /* margin-right: 20vw; */
   }
 
   #mosaic ul {
     -webkit-flex-direction: row;
     flex-direction: row;
     align-items: flex-start;
+    flex-wrap: nowrap;
+    /* default value; can be omitted */
   }
 
   #mosaic li {
+    /* display: flex; */
     float: left;
     overflow: hidden;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    width: 33.333333333%;
-    position: relative;
+    max-width: 23%;
+    /* position: relative; */
     overflow: hidden;
     padding: 1rem;
+    margin: 0.5rem;
   }
 
   #mosaic img {
     max-width: 100%;
+    border-radius: 16px;
   }
 
   #mosaic a {
@@ -227,31 +235,43 @@
     border-radius: 16px;
   }
 
-  /* LISTE ANNÉE */
+  /* LISTE ANNÉE, tag, etc */
 
   .grid2 {
-    grid-column: 5 / 5;
-    grid-row: 1 / 12;
-    position: fixed;
+    position: relative;
+    display: flex;
+    grid-column: 6/ 6;
     right: 0;
+    padding: 2rem;
+    font-size: 0.8rem;
+    /* overflow: auto; */
+    justify-items: left;
+    height: 100vh;
+
+  }
+
+  .list ul {
+    margin: 1rem;
+    height: auto;
+    width: 100%;
+    align-items: center;
+  }
+
+  .list li {
+    /* -webkit-flex-direction: row;
+    flex-direction: row;
+    align-self: flex-start;
+    float: right; */
+    /* display: block; */
+    width: fit-content;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     margin: 1rem;
   }
 
-  #list ul {
-    flex-direction: column;
-    padding: 0 5rem 0 5rem;
-    width: 10vw;
-  }
-
-
-  #list a {
-    /* -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; */
-    /* float: left; */
-    display: block;
-    width: fit-content;
-    padding: 0.3rem;
+  .list a {
+    padding: 0.4rem;
     background-color: #c104fc;
     color: white;
     border-radius: 12px;
@@ -260,8 +280,14 @@
     text-decoration: none;
     font-weight: bold;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
   }
 
-  #list a:hover {
+  .list a:hover {
     color: rgba(77, 168, 112, 1);
+  }
+
+  .list hr{
+    color: #c104fc;
+    width: 50%;
   }
\ No newline at end of file