diff --git a/frontend/media/arrow-right.svg b/frontend/media/arrow-right.svg
new file mode 100644
index 0000000..13f0a28
--- /dev/null
+++ b/frontend/media/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" fill="#fff"/>
+</svg>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 05c476c..286b579 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Footer from "./lib/components/Footer.svelte"
     import Header from "./lib/components/Menu/Header.svelte"
     import Menu from "./lib/components/Menu/Menu.svelte"
     import { location } from "./store"
@@ -23,14 +24,20 @@
 
 <main class="">
     <Header bind:active="{activeMenu}" />
-    <Menu bind:active="{activeMenu}" />
+    <Footer />
 </main>
 
+<Menu bind:active="{activeMenu}" />
+
 <style lang="less" global>
     @import "./lib/assets/css/main.less";
     @import "./lib/assets/css/base.less";
     main {
         overflow: hidden;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         height: 100%;
         width: 100%;
         @media @mobile {
diff --git a/frontend/src/lib/assets/css/base.less b/frontend/src/lib/assets/css/base.less
index 4308483..8d5c61e 100644
--- a/frontend/src/lib/assets/css/base.less
+++ b/frontend/src/lib/assets/css/base.less
@@ -59,6 +59,3 @@ select {
     color: #333;
     width: 100%;
 }
-
-.text-container {
-}
diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..6716f76
--- /dev/null
+++ b/frontend/src/lib/components/Footer.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+</script>
+
+<div class="footer">
+    <button class="upper-part">
+        <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
+        <div class="lower">Ihre&nbsp;Bedürfnisse</div>
+    </button>
+    <div class="lower-part">
+        <div class="links">
+            <button>Datenschutz</button>
+            <button>Impressum</button>
+        </div>
+        <div class="contact">
+            <button>0711 644 700-0</button>
+            <button>info@fontis.de</button>
+        </div>
+    </div>
+</div>
+
+<style lang="less">
+    @import "../assets/css/main.less";
+    .footer {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        background-color: @bg-color-secondary;
+        color: @font-color-secondary;
+        .upper-part {
+            padding: 10px 40px;
+            display: flex;
+            flex-direction: column;
+            width: fit-content;
+            .upper {
+                color: @font-color-secondary;
+                font-size: 12px;
+                display: flex;
+                gap: 10px;
+                @media @tablet {
+                    font-size: 14px;
+                }
+            }
+            .lower {
+                color: @font-color-secondary;
+                font-size: 22px;
+                @media @tablet {
+                    font-size: 24px;
+                }
+            }
+        }
+
+        .lower-part {
+            padding: 40px 40px;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            .links,
+            .contact {
+                display: flex;
+                justify-content: space-between;
+                padding: 10px 0px;
+            }
+            button {
+                color: @font-color-secondary;
+            }
+            @media @tablet {
+                padding: 80px 40px;
+                flex-direction: row;
+                justify-content: space-between;
+                .links,
+                .contact {
+                    display: flex;
+                    justify-content: flex-start;
+                    gap: 40px;
+                    padding: 0px;
+                }
+            }
+        }
+    }
+</style>
diff --git a/frontend/src/lib/components/Menu/Menu.svelte b/frontend/src/lib/components/Menu/Menu.svelte
index 0c76936..553f46e 100644
--- a/frontend/src/lib/components/Menu/Menu.svelte
+++ b/frontend/src/lib/components/Menu/Menu.svelte
@@ -8,14 +8,25 @@
         <Header bind:active="{active}" opened="{true}" />
         <div class="menu-content">
             <div class="container">
-                <div class="pages">
-                    {#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
-                        <button class="page">
-                            {page}
-                        </button>
-                    {/each}
+                <div class="inner-container">
+                    <div class="pages">
+                        {#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
+                            <button class="page">
+                                {page}
+                            </button>
+                        {/each}
+                    </div>
+                    <div class="footer-infos">
+                        <div class="upper">
+                            <button>Datenschutz</button>
+                            <button>Impressum</button>
+                        </div>
+                        <div class="lower">
+                            <button>0711 644 700-0</button>
+                            <button>info@fontis.de</button>
+                        </div>
+                    </div>
                 </div>
-                <div class="footer-infos"></div>
             </div>
         </div>
     </div>
@@ -52,31 +63,65 @@
                 .container {
                     display: flex;
                     flex-direction: column;
+                    justify-content: flex-end;
                     align-items: flex-end;
                     width: 80%;
                     margin: 10vw 0px;
-                    .footer-infos {
-                        width: 100%;
-                    }
-                    .pages {
+                    .inner-container {
                         width: 100%;
                         display: flex;
-                        align-items: flex-start;
-                        flex-direction: column;
-                        gap: 20px;
-                        .page {
-                            font-size: 1.6rem;
-                            color: @font-color-secondary;
-                        }
-                    }
-                    @media @tablet {
-                        flex-direction: row;
+
                         .footer-infos {
-                            width: 50%;
+                            width: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-between;
+                            .upper {
+                                display: flex;
+                                flex-direction: column;
+                                align-items: flex-end;
+                                gap: 15px;
+                            }
+                            .lower {
+                                display: flex;
+                                flex-direction: column;
+                                align-items: flex-end;
+                                @media @desktop {
+                                    flex-direction: row;
+                                    justify-content: flex-end;
+                                }
+                                gap: 20px;
+                            }
+                            button {
+                                font-size: 1.6rem;
+                                color: @font-color-secondary;
+                            }
+                            @media @desktop {
+                                .lower {
+                                    gap: 40px;
+                                }
+                            }
                         }
                         .pages {
+                            width: 100%;
+                            display: flex;
                             align-items: flex-start;
-                            width: 50%;
+                            flex-direction: column;
+                            gap: 20px;
+                            .page {
+                                font-size: 1.6rem;
+                                color: @font-color-secondary;
+                            }
+                        }
+                        @media @tablet {
+                            flex-direction: row;
+                            .footer-infos {
+                                width: 50%;
+                            }
+                            .pages {
+                                align-items: flex-start;
+                                width: 50%;
+                            }
                         }
                     }
                 }