diff --git a/assets/css/style.css b/assets/css/style.css
index 5af72e8..ccf290a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -801,16 +801,41 @@ hr.-even {
 
 /* footer - Start */
 footer {
-    margin-top: 2px;
     background-color: var(--wtf-footer-grey);
     color: white;
-    padding: 3% 1%;
+    padding: 0 0 3% 0;
+    display: grid;
+    grid-template-rows: 46px auto;
+    grid-template-columns: auto 68px 15%;
+}
+
+.footer__wrapper {
+    grid-column: 1 / span 3;
     display: flex;
     flex-direction: row;
     justify-content: center;
+    padding-top: 3%;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
-.footer__wrapper, .footer__nav {
+.footer__top_bar_left {
+    background-color: var(--wtf-light-grey);
+}
+
+.footer__top_bar_mid {
+    background-image: url("../images/footer_triangles.svg");
+}
+
+.footer__top_bar_right {
+    background-color: var(--wtf-footer-grey);
+}
+
+.footer__content_box {
+
+}
+
+.footer__nav {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -1464,4 +1489,28 @@ footer {
         max-width: 450px;
     }
     /* homepage - end */
+
+    /* footer - start */
+    footer {
+        grid-template-rows: 23px auto;
+        grid-template-columns: auto 34px 15%;
+    }
+
+    .footer__wrapper {
+        padding: 6% 0%;
+    }
+    .footer__nav {
+        flex-direction: column;
+    }
+
+    .footer__navitem {
+        margin: 1rem 0;
+        padding: 0;
+        order: 2;
+    }
+
+    .footer__navitem.-second {
+        order: 1;
+    }
+    /* footer - end */
 }
diff --git a/assets/images/footer_triangles.svg b/assets/images/footer_triangles.svg
new file mode 100644
index 0000000..814a516
--- /dev/null
+++ b/assets/images/footer_triangles.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 68 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.829268,0,0,0.836364,-311.805,-398.945)">
+        <g id="bottom-left-corner" serif:id="bottom left corner">
+            <path d="M458,532L458,477L376,532L458,532Z" style="fill:#344b5d;"/>
+        </g>
+    </g>
+    <g transform="matrix(-0.829268,-8.68929e-19,-8.68929e-19,-0.836364,379.805,444.945)">
+        <g id="bottom-left-corner1" serif:id="bottom left corner">
+            <path d="M458,532L458,477L376,532L458,532Z" style="fill:#edefeb;"/>
+        </g>
+    </g>
+</svg>
diff --git a/templates/layout.html b/templates/layout.html
index 3e2e71c..77165f9 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -74,31 +74,34 @@ __        ____________________
     </main>
 
     <footer>
-        <div class="footer__wrapper">
-            <ul class="footer__nav">
-                <li class="footer__navitem">
-                    <p>folgt uns auf:</p>
-                    <a href="https://chaos.social/@HackerGeno">
-                      <img alt="Mastodon Logo" class="social-logo" src="{{ '/images/mastodon_logo.svg'|url }}"/>
-                    </a>
-                    
-                </li>
-                <li class="footer__navitem">
-                    WTF Kooperative eG<br/>
-                    Forsmannstr. 14b<br/>
-                    22303 Hamburg<br/>
-                    <a class="footer__navlink" href="mailto:info@wtf-eg.de">info@wtf-eg.de</a><br/>
-                    <br/>
-                    Registergericht: AG Hamburg<br/>
-                    Registernummer: GnR 1113<br/>
-                </li>
-                <li class="footer__navitem">
-                  <a class="footer__navlink" href="{{ '/impressum'|url }}">Impressum</a> | <a class="footer__navlink" href="{{ '/datenschutz'|url }}">Datenschutzerklärung</a> <br/>
+      <div class="footer__top_bar_left"></div>
+      <div class="footer__top_bar_mid"></div>
+      <div class="footer__top_bar_right"></div>
+      <div class="footer__wrapper">
+        <ul class="footer__nav">
+            <li class="footer__navitem -first">
+                <p>folgt uns auf:</p>
+                <a href="https://chaos.social/@HackerGeno">
+                  <img alt="Mastodon Logo" class="social-logo" src="{{ '/images/mastodon_logo.svg'|url }}"/>
+                </a>
 
-                  © 2021 WTF Kooperative eG
-                </li>
-            </ul>
-        </div>
+            </li>
+            <li class="footer__navitem -second">
+                WTF Kooperative eG<br/>
+                Forsmannstr. 14b<br/>
+                22303 Hamburg<br/>
+                <a class="footer__navlink" href="mailto:info@wtf-eg.de">info@wtf-eg.de</a><br/>
+                <br/>
+                Registergericht: AG Hamburg<br/>
+                Registernummer: GnR 1113<br/>
+            </li>
+            <li class="footer__navitem -third">
+              <a class="footer__navlink" href="{{ '/impressum'|url }}">Impressum</a> | <a class="footer__navlink" href="{{ '/datenschutz'|url }}">Datenschutzerklärung</a> <br/>
+
+              © 2021 WTF Kooperative eG
+            </li>
+        </ul>
+      </div>
     </footer>
     <script type="text/javascript" src="{{ '/js/nav_toggle.js'|url }}"></script>
 </body>