diff --git a/src/routes/partenaires/+page.svelte b/src/routes/partenaires/+page.svelte
index ae91408..eb16eac 100644
--- a/src/routes/partenaires/+page.svelte
+++ b/src/routes/partenaires/+page.svelte
@@ -1,4 +1,80 @@
 <script lang="ts">
 </script>
 
-Partenaires
+<div class="container">
+	<article>
+		<header>Platine</header>
+		<div class="partenaires" id="platine">
+			<img src="https://via.placeholder.com/400" alt="" />
+			<img src="https://via.placeholder.com/400" alt="" />
+		</div>
+	</article>
+	<article>
+		<header>Or</header>
+		<div class="partenaires" id="or">
+			<img src="https://via.placeholder.com/400" alt="Atocas de l'érable" />
+			<img src="https://via.placeholder.com/400" alt="Jit Laser" />
+			<img src="https://via.placeholder.com/600" alt="Machinex" />
+			<img src="https://via.placeholder.com/400" alt="USNR" />
+		</div>
+	</article>
+	<article>
+		<header>Argent</header>
+		<div class="partenaires" id="argent">
+			<img src="https://via.placeholder.com/400" alt="Amex" />
+			<img src="https://via.placeholder.com/400" alt="Batteries Expert" />
+			<img src="https://via.placeholder.com/400" alt="Boisdaction" />
+			<img src="https://via.placeholder.com/400" alt="Carbotech" />
+			<img src="https://via.placeholder.com/400" alt="Festival du boeuf" />
+			<img src="https://via.placeholder.com/400" alt="MRC de l'érable" />
+			<img src="https://via.placeholder.com/400" alt="Robovic" />
+			<img src="https://via.placeholder.com/400" alt="Ville de Plessisville" />
+		</div>
+	</article>
+	<article>
+		<header>Bronze</header>
+		<div class="partenaires" id="bronze">
+			<img src="https://via.placeholder.com/400" alt="Home Dépot" />
+			<img src="https://via.placeholder.com/400" alt="Manoir du Lac William" />
+		</div>
+	</article>
+</div>
+
+<style lang="scss">
+	.partenaires {
+		display: grid;
+		column-gap: 10px;
+		row-gap: 10px;
+		align-items: stretch;
+		justify-items: stretch;
+		margin-inline: auto;
+
+		&#platine {
+			grid-template-columns: repeat(1, 1fr);
+		}
+		&#or {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		&#argent {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		&#bronze {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		@media (min-width: 576px) {
+			&#platine {
+				grid-template-columns: repeat(2, 1fr);
+			}
+			&#or {
+				grid-template-columns: repeat(3, 1fr);
+			}
+			&#argent {
+				grid-template-columns: repeat(4, 1fr);
+			}
+			&#bronze {
+				grid-template-columns: repeat(5, 1fr);
+			}
+		}
+	}
+</style>