diff --git a/img/logo mastodon.png b/img/logo mastodon.png
new file mode 100644
index 0000000..2ab1ce2
Binary files /dev/null and b/img/logo mastodon.png differ
diff --git a/img/logo twitch.png b/img/logo twitch.png
new file mode 100644
index 0000000..0cdc85c
Binary files /dev/null and b/img/logo twitch.png differ
diff --git a/index.html b/index.html
index d84e781..798af18 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,11 @@
                 <a href="https://fr.wikipedia.org/wiki/%C3%89tudes_d%C3%A9coloniales">Décolonialisme</a>
             </div>
         </div>
+        <div class="footer">
+                    <ul class="social-links">
+                        <li><a href="https://corneill.es/@t4lianah" target="_blank"><img src="img/logo mastodon.png" alt="Mastodon"></a></li>
+                    </ul>        
+            </div>
     </div>
 </body>
 </html>
diff --git a/style.css b/style.css
index e96167f..cc530c9 100644
--- a/style.css
+++ b/style.css
@@ -28,6 +28,7 @@ body {
     color: white;
     background-color: #9F0A0A;
     background-size: contain;
+    z-index: 1;
   }
   body .site_content .vertical_banner .category {
     display: flex;
@@ -56,5 +57,27 @@ body {
   body p {
     text-align: left;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  }
+  .footer {
+    background-color: #9F0A0A;
+    padding: 20px;
+    text-align: center;
+    color: white;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+  .social-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .social-links li {
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+  .social-links a img {
+    width: 40px;
+    height: 40px;
   }
     /*# sourceMappingURL=style.css.map 
\ No newline at end of file