diff --git a/docs/projects_square/cube3d_tour_with_map_square.gif b/docs/projects_square/cube3d_tour_with_map_square.gif
new file mode 100644
index 0000000..2383622
Binary files /dev/null and b/docs/projects_square/cube3d_tour_with_map_square.gif differ
diff --git a/docs/projects_square/fdf_pyramide_loop_square_2_light.gif b/docs/projects_square/fdf_pyramide_loop_square_2_light.gif
new file mode 100644
index 0000000..23e8aa9
Binary files /dev/null and b/docs/projects_square/fdf_pyramide_loop_square_2_light.gif differ
diff --git a/docs/projects_square/kosmopolit_square.gif b/docs/projects_square/kosmopolit_square.gif
new file mode 100644
index 0000000..afce8ef
Binary files /dev/null and b/docs/projects_square/kosmopolit_square.gif differ
diff --git a/docs/projects_square/ljdp_map_clusters_square_light.gif b/docs/projects_square/ljdp_map_clusters_square_light.gif
new file mode 100644
index 0000000..424d0ac
Binary files /dev/null and b/docs/projects_square/ljdp_map_clusters_square_light.gif differ
diff --git a/index.html b/index.html
index c155682..9eb26c3 100644
--- a/index.html
+++ b/index.html
@@ -150,20 +150,27 @@
 
 			<h2 class="margin_bottom_big">quelques exemples de projets réalisés :</h2>
 
-			<figure class="project">
-				<img src="./docs/projects/fdf_pyramide_2.gif"/>
-				<figcaption>description</figcaption>
-			</figure>
+			<div class="projects_grid">
+				<figure class="project">
+					<img src="./docs/projects_square/fdf_pyramide_loop_square_2_light.gif"/>
+					<figcaption>description</figcaption>
+				</figure>
 
-			<figure class="project">
-				<img src="./docs/projects/cube3d_raycasting.gif"/>
-				<figcaption>description</figcaption>
-			</figure>
+				<figure class="project">
+					<img src="./docs/projects_square/cube3d_tour_with_map_square.gif"/>
+					<figcaption>description</figcaption>
+				</figure>
 
-			<figure class="project">
-				<img src="./docs/projects/ljdp_map_clusters.gif"/>
-				<figcaption>description</figcaption>
-			</figure>
+				<figure class="project">
+					<img src="./docs/projects_square/ljdp_map_clusters_square_light.gif"/>
+					<figcaption>description</figcaption>
+				</figure>
+
+				<figure class="project">
+					<img src="./docs/projects_square/kosmopolit_square.gif"/>
+					<figcaption>description</figcaption>
+				</figure>
+			</div>
 
 <!--
 			<article class="project">
diff --git a/styles/elements/projects.css b/styles/elements/projects.css
index b148957..ee8a6d8 100644
--- a/styles/elements/projects.css
+++ b/styles/elements/projects.css
@@ -2,7 +2,15 @@
 	header {
 		height: 300px;
 	}
-	figure {
+	.projects_grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, auto));
+		grid-gap: 20px;
+		figure {
+			figcaption {
+				text-align: left;
+			}
+		}
 	}
 	article {
 		display: grid;