diff --git a/Assets/css.css b/Assets/css.css
index 19ef578..a51b91e 100644
--- a/Assets/css.css
+++ b/Assets/css.css
@@ -168,3 +168,31 @@ div#slider figure {
 /*============================================*/
 
 
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    background-color: rgb(187, 187, 187);
+}
+
+.flex-container>div {
+    box-shadow: 0.3vw 0.3vw 2px grey;
+    width: 20%;
+    margin: 1vw;
+    text-align: center;
+    font-size: 30px;
+}
+
+.flex-container>div>img{
+    width: 85%;
+}
+
+.flex-container>div>p{
+    font-size: 0px;
+}
+
+.flex-container>div:hover p{
+    font-size: 40px;
+    transition-duration: 0.2s;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 65cea39..b5fc444 100644
--- a/index.html
+++ b/index.html
@@ -32,14 +32,17 @@
             <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
         </figure>
 	</div>
-	
-	<div class="flex-container">
-		<div>Robot Nao</div>
-		<div>Robot Valkyrie</div>
-		<div>Robot Terminator</div>
-		<div>Robot x</div>
-		<div>Robot y</div>
-	</div>
+    
+    <div class="content">
+        <div class="flex-container">
+            <div><img src="Assets/Images/Produits/nao.png" alt><p>Nao</p></div>
+            <div><img src="Assets/Images/Produits/valkyrie.png" alt><p>Valkyrie</p></div>
+            <div><img src="Assets/Images/Produits/soldat.png" alt><p>Soldat</p></div>
+            <div><img src="Assets/Images/Produits/r2d2.png" alt><p>R2D2</p></div>
+            <div><img src="Assets/Images/Produits/pepper.png" alt><p>Pepper</p></div>
+            <div><img src="Assets/Images/Produits/terminator.png" alt><p>Terminator</p></div>
+        </div>
+    </div>
 
 </body>