diff --git a/components/footer.html b/components/footer.html
index 406c58e..4ec7ed6 100644
--- a/components/footer.html
+++ b/components/footer.html
@@ -1,5 +1,12 @@
 <div id="footer">
-    <p>footer</p>
-    <p>Color Palette based on https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2</p>
-    <p>And : https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097</p>
+    <div class="footer-container">
+        <h1>Suivez-moi</h1>
+    </div>
+    <div class="footer-container">
+        <h1>Informations</h1>
+        <p>Color Palette based on <a href="https://colorhunt.co/palette/4b4a5aa55540e79a58e1d5d2">this one</a> and <a href="https://colorhunt.co/palette/2d24245c3d2eb85c38e0c097">this one</a></p>
+    </div>
+    <div class="footer-container">
+        <h1>Newsletter</h1>
+    </div>
 </div>
\ No newline at end of file
diff --git a/css/footer.css b/css/footer.css
index 9bfdcd1..031522a 100644
--- a/css/footer.css
+++ b/css/footer.css
@@ -1,6 +1,16 @@
 #footer
 {
+    display: grid;
+    grid-gap: 0px;
     height: 30rem;
+    grid-template-columns: repeat(3, 33.3%);
     background-color: var(--color-dark);
     color: var(--color-white);
+    overflow: clip;
+}
+
+.footer-container
+{
+    padding: 1rem 2rem;
+    word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 75fc258..7500a06 100644
--- a/css/index.css
+++ b/css/index.css
@@ -59,6 +59,8 @@
   color: black;
   width: 100%;
   margin: 2rem 2rem;
+  word-wrap: break-word;
+  overflow: clip;
 }
 
 .description-img {