diff --git a/src/lib/nav.html b/src/lib/nav.html
index ac868cc..c86d4e8 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -14,6 +14,7 @@
       <a href="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
       <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
       <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
+      <a href="#contact" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--links">
       {% with class_prefix="nav-bar" %}
diff --git a/src/lib/social_links.html b/src/lib/social_links.html
index 82c983d..434e9e4 100644
--- a/src/lib/social_links.html
+++ b/src/lib/social_links.html
@@ -4,7 +4,6 @@
   </a>
 {% endmacro %}
 
-{{ social_link(gettext('Mail'), 'mail-fill.svg', 'mailto:contact@frog-collective.com') }}
 {{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
 {{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@FrogCoGames') }}
 {{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}
diff --git a/src/pages/index.html b/src/pages/index.html
index 3f70646..1b08b04 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -23,6 +23,7 @@
             {% include "pages/index/presentation.html" %}
             {% include "pages/index/games.html" %}
             {% include "pages/index/news.html" %}
+            {% include "pages/index/contact.html" %}
         </div>
         {% include "pages/index/footer.html" %}
     </body>
diff --git a/src/pages/index/_style.scss b/src/pages/index/_style.scss
index c4db82c..e2c06f9 100644
--- a/src/pages/index/_style.scss
+++ b/src/pages/index/_style.scss
@@ -2,3 +2,4 @@
 @import 'games.scss';
 @import 'news.scss';
 @import 'presentation.scss';
+@import 'contact.scss';
diff --git a/src/pages/index/contact.html b/src/pages/index/contact.html
new file mode 100644
index 0000000..b70b37c
--- /dev/null
+++ b/src/pages/index/contact.html
@@ -0,0 +1,22 @@
+{% from "lib/section.html" import section %}
+
+{% call section(
+  gettext("Contact"),
+  "contact",
+  "/img/section-collective.png",
+  title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_active = "/img/section-collective-active.png",
+  title_picture_offset = "50px"
+  ) %}
+<div class="contact--content">
+  <p>
+    {% trans %}
+      If you want to contact us about our games, for business inquiries, press or anything else please click on the button below. 
+    {% endtrans %}
+  </p>
+  <a class="contact--button" href="mailto:contact@frog-collective.com">
+    <img class="contact--button-icon" src="/img/mail-fill.svg"></img>
+    Contact Us
+  </a>
+</div>
+{% endcall %}
diff --git a/src/pages/index/contact.scss b/src/pages/index/contact.scss
new file mode 100644
index 0000000..2dd5bc1
--- /dev/null
+++ b/src/pages/index/contact.scss
@@ -0,0 +1,21 @@
+.contact {
+
+    &--content {
+        @extend %card;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &--button {
+        @extend %button;
+        align-self: center;
+        align-items: center;
+        display: flex;
+    }
+
+    &--button-icon {
+        width: 2.2em;
+        filter: invert(100%);
+        padding-right: var(--space-small);
+    }
+}