diff --git a/src/assets/img/footer-logo.png b/src/assets/img/footer-logo.png
new file mode 100644
index 0000000..53af1fa
Binary files /dev/null and b/src/assets/img/footer-logo.png differ
diff --git a/src/assets/img/social.png b/src/assets/img/social.png
new file mode 100644
index 0000000..9fbd365
Binary files /dev/null and b/src/assets/img/social.png differ
diff --git a/src/lib/css/content.scss b/src/lib/css/content.scss
index 53a8698..0f11c8c 100644
--- a/src/lib/css/content.scss
+++ b/src/lib/css/content.scss
@@ -9,7 +9,7 @@ body {
 .content {
     margin: 0 auto;
     padding: 0 var(--space-small);
-    max-width: 1100px;
+    max-width: var(--width);
 }
 
 %card {
diff --git a/src/lib/css/typo.scss b/src/lib/css/typo.scss
index 3a05e73..4af81e5 100644
--- a/src/lib/css/typo.scss
+++ b/src/lib/css/typo.scss
@@ -64,6 +64,10 @@ p {
     margin: 0 0 var(--space-medium) 0;
 }
 
+a {
+    color: var(--color-link);
+}
+
 @media ($mobile-breakpoint) {
     h1, h2, h3 {
         margin: 0 0 var(--space-medium) 0;
diff --git a/src/lib/css/variables.scss b/src/lib/css/variables.scss
index f3f783c..44e35ef 100644
--- a/src/lib/css/variables.scss
+++ b/src/lib/css/variables.scss
@@ -13,6 +13,8 @@ $mobile-breakpoint: "max-width: 768px";
     --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
     --color-on-dark: #f2a6ac;
 
+    --color-link: var(--color-primary);
+
     --space-xsmall: 5px;
     --space-small: 10px;
     --space-medium: 20px;
diff --git a/src/pages/index.html b/src/pages/index.html
index 6e5ed2a..1135558 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -21,6 +21,7 @@
             {% include "pages/index/games.html" %}
             {% include "pages/index/news.html" %}
         </div>
+        {% include "pages/index/footer.html" %}
     </body>
 </html>
 
diff --git a/src/pages/index/_style.scss b/src/pages/index/_style.scss
index 700d359..c4db82c 100644
--- a/src/pages/index/_style.scss
+++ b/src/pages/index/_style.scss
@@ -1,3 +1,4 @@
+@import 'footer.scss';
 @import 'games.scss';
 @import 'news.scss';
 @import 'presentation.scss';
diff --git a/src/pages/index/footer.html b/src/pages/index/footer.html
new file mode 100644
index 0000000..bd32398
--- /dev/null
+++ b/src/pages/index/footer.html
@@ -0,0 +1,12 @@
+<div class="footer">
+    <div class="footer--content">
+        <img class="footer--logo" src="/img/footer-logo.png">
+        <div class="footer--links">
+            <a href="mailto:contact@frog-collective.org">
+                {{ gettext("Contact") }}
+            </a>
+            <img src="/img/social.png"></img>
+        </div>
+    </div>
+</div>
+
diff --git a/src/pages/index/footer.scss b/src/pages/index/footer.scss
new file mode 100644
index 0000000..4bd1dea
--- /dev/null
+++ b/src/pages/index/footer.scss
@@ -0,0 +1,38 @@
+.footer {
+    background-image: url("/img/background-black-red.jpg");
+    color: white;
+    font-size: 0.925rem;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &--content {
+        margin: 0 auto;
+        padding: var(--space-medium) 0;
+        max-width: var(--width);
+
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+
+        @media($mobile-breakpoint) {
+            flex-direction: column;
+            justify-content: center;
+            gap: var(--space-large);
+        }
+    }
+
+    &--logo {
+        width: 100px;
+    }
+
+    &--links {
+        flex: 1 1 1px;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+    }
+
+}