diff --git a/website/index.html b/website/index.html
index 81af30a..36cfeb7 100644
--- a/website/index.html
+++ b/website/index.html
@@ -7,6 +7,9 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
         integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
         crossorigin=""/>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Rocket App: Chat and collaboration platform.">
     <meta name="theme-color" content="#1976d2">
diff --git a/website/src/components/footer/Footer.vue b/website/src/components/footer/Footer.vue
new file mode 100644
index 0000000..e4f2cce
--- /dev/null
+++ b/website/src/components/footer/Footer.vue
@@ -0,0 +1,109 @@
+<template>
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-section footer-address">
+        <span class="footer-title">Address</span>
+        <span>Hochschule für Technik Stuttgart</span>
+        <span>Schellingstraße 24</span>
+        <span>70174 Stuttgart</span>
+        <span>Germany</span>
+      </div>
+      <div class="footer-section footer-legal">
+        <span class="footer-title">Legal</span>
+        <router-link to="/legal-notice">Legal Notice</router-link>
+        <router-link to="/privacy-policy">Privacy Policy</router-link>
+        <router-link to="/accessibility">Accessibility</router-link>
+      </div>
+      <div class="footer-section footer-contact">
+        <span class="footer-title">Contact</span>
+        <a href="mailto:info@hft-stuttgart.de" id="footer-email">info@hft-stuttgart.de</a>
+        <a href="https://www.instagram.com/hft_stuttgart/" target="_blank" rel="noopener" aria-label="Instagram" class="footer-instagram">
+            <i class="fab fa-instagram" style="font-size: 1.3em;"></i>
+        </a>
+        <a href="https://www.youtube.com/c/Hochschulef%C3%BCrTechnikStuttgart" target="_blank" rel="noopener" aria-label="YouTube" class="footer-youtube">
+            <i class="fab fa-youtube" style="font-size: 1.3em;"></i>
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  width: 100%;
+  background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
+  color: #fff;
+  border-top: 2px solid #1e3c72;
+  padding: 1.2rem 0;
+  font-size: 1rem;
+  position: relative;
+  left: 0;
+  bottom: 0;
+}
+
+.footer-content {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.footer-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  min-width: 180px;
+}
+
+.footer-title {
+  font-weight: bold;
+  font-size: x-large;
+  margin-bottom: 0.2rem;
+  letter-spacing: 0.02em;
+  color: #ffd580; 
+}
+
+.footer-legal a,
+.footer-contact a {
+  color: #e0e0e0;
+  text-decoration: none;
+  transition: color 0.2s;
+  font-size: 1em;
+}
+
+.footer-legal a:hover, #footer-email:hover {
+  color: #ffd580; 
+  text-decoration: underline;
+}
+
+.footer-instagram,
+.footer-youtube {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.1rem;
+  margin-right: 0.6rem;
+}
+
+.footer-instagram:hover i {
+  color: #f8a8f4;
+}
+
+.footer-youtube:hover i {
+  color: #ff4c4c;
+}
+
+@media (max-width: 900px) {
+  .footer-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.2rem;
+    padding: 0 1rem;
+  }
+  .footer-section {
+    width: 100%;
+    min-width: unset;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/website/src/pages/AccessibilityView.vue b/website/src/pages/AccessibilityView.vue
new file mode 100644
index 0000000..9b3be7f
--- /dev/null
+++ b/website/src/pages/AccessibilityView.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="page-wrapper">
+    <Navbar />
+    <main class="legal-content">
+      <div class="legal-page">
+        <h1>Accessibility</h1>
+
+        <section>
+          <h2>Commitment to Accessibility</h2>
+          <p>
+            We are committed to making our website and application accessible to everyone, including people with disabilities.
+            Our goal is to ensure a user-friendly experience for all users, regardless of their physical or technical limitations.
+          </p>
+        </section>
+
+        <section>
+          <h2>Measures to Support Accessibility</h2>
+          <ul>
+            <li>Responsive design for different devices and screen readers</li>
+            <li>Keyboard navigation and focus visibility</li>
+            <li>Text alternatives for non-text content</li>
+            <li>Consistent structure and headings</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>Feedback and Contact</h2>
+          <p>
+            If you encounter accessibility issues or have suggestions for improvement, please contact us:
+            <br />
+            <strong>Email:</strong> info@hft-stuttgart.de
+          </p>
+        </section>
+
+        <section>
+          <h2>Enforcement Procedure</h2>
+          <p>
+            In the event of unsatisfactory responses to your accessibility inquiry, you may contact the responsible regulatory authority in your region to enforce your rights under applicable accessibility legislation.
+          </p>
+        </section>
+
+        <section>
+          <h2>Last Updated</h2>
+          <p>
+            This statement was last updated on 17 June 2025.
+          </p>
+        </section>
+      </div>
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/footer/Footer.vue'
+</script>
+
+<style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.legal-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 2rem 1rem;
+  background: white; /* wichtig: Seitenhintergrund bleibt weiß */
+}
+
+.legal-page {
+  max-width: 900px;
+  width: 100%;
+  background: #f5f5f5; /* grau nur für die Box */
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  line-height: 1.7;
+  color: #333;
+}
+
+.legal-page h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #1e3c72;
+  font-size: 2.5rem;
+}
+
+.legal-page section {
+  margin-bottom: 2rem;
+}
+
+.legal-page h2 {
+  color: #2a5298;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.legal-page ul {
+  padding-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.legal-page li {
+  margin-bottom: 0.4rem;
+}
+
+.footer {
+  margin-top: auto;
+}
+</style>
\ No newline at end of file
diff --git a/website/src/pages/ChallengesView.vue b/website/src/pages/ChallengesView.vue
index ffcb053..f45ab16 100644
--- a/website/src/pages/ChallengesView.vue
+++ b/website/src/pages/ChallengesView.vue
@@ -1,16 +1,19 @@
 <template>
-  <Navbar />
-  <div class="challenges-view">
-    <h1>Challenges</h1>
-    <ChallengeList :challenges="challenges"
-      @complete="handleCompleteChallenge"
+  <div class="page-wrapper">
+    <Navbar />
+    <div class="challenges-view">
+      <h1>Challenges</h1>
+      <ChallengeList :challenges="challenges"
+        @complete="handleCompleteChallenge"
       @invite="handleInvite"/>
     <FriendInvitePopup
       v-if="showInvitePopup"
       :challenge-id="inviteChallengeId!"
-      @close="showInvitePopup = false"/>
+      @close="showInvitePopup = false"/> 
   </div>
+  <Footer />
   <DailyChallengeProgress :completed="completedCount" :total="totalCount" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -20,6 +23,7 @@ import ChallengeList from '@/components/challenges/ChallengeList.vue';
 import DailyChallengeProgress from '@/components/challenges/DailyChallengeProgress.vue';
 import FriendInvitePopup from '@/components/challenges/FriendInvitePopup.vue';
 import backendApi from '@/api/backend-api';
+import Footer from '@/components/footer/Footer.vue'
 
 const challenges = ref<{ id: string; text: string; points: number }[]>([]);
 const completedCount = ref(0);
@@ -76,10 +80,23 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* Make space for the fixed progress bar */
+  padding-bottom: 3.5rem;
+}
 .challenges-view {
+  flex: 1;
   padding: 2rem;
 }
 .challenges-view h1 {
   text-align: center;
 }
+.footer {
+  margin-top: auto;
+  /* Add extra bottom padding so it's scrollable above the progress bar */
+  padding-bottom: 2.5rem;
+}
 </style>
diff --git a/website/src/pages/ChatView.vue b/website/src/pages/ChatView.vue
index f668f1b..9a110fe 100644
--- a/website/src/pages/ChatView.vue
+++ b/website/src/pages/ChatView.vue
@@ -3,11 +3,13 @@
   <div class="chatview-wrapper d-flex flex-column align-items-center justify-content-center">
     <ChatRoom :user="user"/>
   </div>
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import Navbar from '@/components/Navbar.vue'
 import ChatRoom from '@/components/chat/ChatRoom.vue'
+import Footer from '@/components/footer/Footer.vue'
 import { ref, onMounted } from 'vue'
 import api from '@/api/backend-api'
 
diff --git a/website/src/pages/DownloadView.vue b/website/src/pages/DownloadView.vue
index f875b61..43fbb0e 100644
--- a/website/src/pages/DownloadView.vue
+++ b/website/src/pages/DownloadView.vue
@@ -1,25 +1,34 @@
 <template>
-  <Navbar />
-  <div class="download-view">
-    <h1>Download the Rocket App</h1>
-    <p>You can download the latest version of the Rocket App for Android below:</p>
-    <a
-      class="download-btn"
-      :href="apkUrl"
-      download
-    >
-      Download APK
-    </a>
-    <p class="note">If you have trouble installing, make sure to allow installation from unknown sources in your device settings.</p>
+  <div class="page-wrapper">
+    <Navbar />
+    <div class="download-view">
+      <h1>Download the Rocket App</h1>
+      <p>You can download the latest version of the Rocket App for Android below:</p>
+      <a
+        class="download-btn"
+        :href="apkUrl"
+        download
+      >
+        Download APK
+      </a>
+      <p class="note">If you have trouble installing, make sure to allow installation from unknown sources in your device settings.</p>
+    </div>
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/footer/Footer.vue'
 const apkUrl = '/apk/rocket-app-latest.apk'
 </script>
 
 <style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 .download-view {
   max-width: 500px;
   margin: 2rem auto;
@@ -49,4 +58,7 @@ const apkUrl = '/apk/rocket-app-latest.apk'
   font-size: 0.95rem;
   margin-top: 1.2rem;
 }
+.footer {
+  margin-top: auto;
+}
 </style>
diff --git a/website/src/pages/FriendlistView.vue b/website/src/pages/FriendlistView.vue
index 7ec9a02..3649340 100644
--- a/website/src/pages/FriendlistView.vue
+++ b/website/src/pages/FriendlistView.vue
@@ -1,33 +1,36 @@
 <template>
-  <Navbar />
-  <div class="friendlist-page">
-    <FriendSearchBar v-model:search="search" />
-    <div v-if="loading" class="loading-indicator">
-      Loading...
-    </div>
-    <template v-else>
-      <div v-if="search" class="search-results-section">
-        <h3 class="result-headline">Search Results</h3>
+  <div class="page-wrapper">
+    <Navbar />
+    <div class="friendlist-page">
+      <FriendSearchBar v-model:search="search" />
+      <div v-if="loading" class="loading-indicator">
+        Loading...
+      </div>
+      <template v-else>
+        <div v-if="search" class="search-results-section">
+          <h3 class="result-headline">Search Results</h3>
+          <div class="friend-grid">
+            <FriendCard
+              v-for="user in filteredUserResults"
+              :key="user.id"
+              :friend="user"
+              :isFriend="false"
+              @add-friend="addFriend"
+            />
+          </div>
+        </div>
         <div class="friend-grid">
           <FriendCard
-            v-for="user in filteredUserResults"
-            :key="user.id"
-            :friend="user"
-            :isFriend="false"
-            @add-friend="addFriend"
+            v-for="friend in filteredFriends"
+            :key="friend.id"
+            :friend="friend"
+            :isFriend="true"
+            @unfollow="unfollowFriend"
           />
         </div>
-      </div>
-      <div class="friend-grid">
-        <FriendCard
-          v-for="friend in filteredFriends"
-          :key="friend.id"
-          :friend="friend"
-          :isFriend="true"
-          @unfollow="unfollowFriend"
-        />
-      </div>
-    </template>
+      </template>
+    </div>
+    <Footer />
   </div>
 </template>
 
@@ -37,6 +40,7 @@ import Navbar from '@/components/Navbar.vue';
 import FriendSearchBar from '@/components/friends/FriendSearchBar.vue';
 import FriendCard from '@/components/friends/FriendCard.vue';
 import backendApi from '@/api/backend-api';
+import Footer from '@/components/footer/Footer.vue'
 
 interface User {
   id: string;
@@ -127,6 +131,7 @@ const addFriend = async (user: User) => {
 
 <style scoped>
 .friendlist-page {
+  flex: 1;
   padding: 2rem;
   max-width: 900px;
   margin: 0 auto;
@@ -155,4 +160,12 @@ const addFriend = async (user: User) => {
   font-size: 1.2rem;
   margin: 2rem 0;
 }
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.footer {
+  margin-top: auto;
+}
 </style>
diff --git a/website/src/pages/HighscoreView.vue b/website/src/pages/HighscoreView.vue
index 126d3a7..364e438 100644
--- a/website/src/pages/HighscoreView.vue
+++ b/website/src/pages/HighscoreView.vue
@@ -35,6 +35,7 @@
       @close="notification.open = false"
     />
   </div>
+  <Footer />
 </template>
 <script setup lang="ts">
 import Podium from '@/components/highscore/Podium.vue'
@@ -46,6 +47,7 @@ import List from "@/components/highscore/List.vue";
 import ProfileCard from '@/components/highscore/ProfileCard.vue'
 import Rocket from '@/components/highscore/Rocket.vue'
 import NotificationModal from '@/components/modals/NotificationModal.vue'
+import Footer from '@/components/footer/Footer.vue'
 
 interface RankedUser {
   id: string
diff --git a/website/src/pages/HomeView.vue b/website/src/pages/HomeView.vue
index 56a2632..ac70499 100644
--- a/website/src/pages/HomeView.vue
+++ b/website/src/pages/HomeView.vue
@@ -1,22 +1,25 @@
 <template>
-  <Navbar />
-  <div class="dashboard-container">
-    <div v-if="isLoggedIn" class="dashboard-header">
-      <h1>Welcome back, Astronaut!</h1>
-      <p>Here’s your step dashboard. Ready to break your record?</p>
-    </div>
-    <div v-if="isLoggedIn" class="dashboard-main">
-      <div class="dashboard-left">
-        <StatsCards :stats="stats" />
-        <StepChart :data="chartData" :labels="chartLabels" />
+  <div class="page-wrapper">
+    <Navbar />
+    <div class="dashboard-container">
+      <div v-if="isLoggedIn" class="dashboard-header">
+        <h1>Welcome back, Astronaut!</h1>
+        <p>Here’s your step dashboard. Ready to break your record?</p>
       </div>
-      <div class="dashboard-right">
-        <ActivityPanel />
+      <div v-if="isLoggedIn" class="dashboard-main">
+        <div class="dashboard-left">
+          <StatsCards :stats="stats" />
+          <StepChart :data="chartData" :labels="chartLabels" />
+        </div>
+        <div class="dashboard-right">
+          <ActivityPanel />
+        </div>
+      </div>
+      <div v-else>
+        <HomeGuest />
       </div>
     </div>
-    <div v-else>
-      <HomeGuest />
-    </div>
+    <Footer />
   </div>
 </template>
 
@@ -29,6 +32,7 @@ import HomeGuest from '@/components/dashboard/HomeGuest.vue'
 import ActivityPanel from '@/components/dashboard/ActivityPanel.vue'
 import { useAuth } from '@/utils/useAuth'
 import api from '@/api/backend-api'
+import Footer from '@/components/footer/Footer.vue'
 
 type StepStatistic = {
   day: string
@@ -83,10 +87,16 @@ watch(isLoggedIn, (val) => {
 </script>
 
 <style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 .dashboard-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 2rem 1rem;
+  flex: 1;
 }
 .dashboard-header {
   text-align: center;
@@ -134,4 +144,7 @@ watch(isLoggedIn, (val) => {
     opacity: 1;
   }
 }
+.footer {
+  margin-top: auto;
+}
 </style>
diff --git a/website/src/pages/LegalNoticeView.vue b/website/src/pages/LegalNoticeView.vue
new file mode 100644
index 0000000..5027fc2
--- /dev/null
+++ b/website/src/pages/LegalNoticeView.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="page-wrapper">
+    <Navbar />
+    <main class="legal-content">
+      <div class="legal-page">
+        <h1>Legal Notice</h1>
+
+        <section>
+          <h2>Information According to § 5 TMG</h2>
+          <p>
+            Hochschule für Technik Stuttgart<br />
+            Schellingstraße 24<br />
+            70174 Stuttgart<br />
+            Germany
+          </p>
+        </section>
+
+        <section>
+          <h2>Represented By</h2>
+          <p>Prof. Dr. Katja Rade (President)</p>
+        </section>
+
+        <section>
+          <h2>Contact</h2>
+          <p>
+            Phone: +49 711 8926 0<br />
+            Email: info@hft-stuttgart.de
+          </p>
+        </section>
+
+        <section>
+          <h2>VAT ID</h2>
+          <p>
+            VAT Identification Number according to § 27 a UStG:<br />
+            DE 147794431
+          </p>
+        </section>
+
+        <section>
+          <h2>Supervisory Authority</h2>
+          <p>
+            Ministry of Science, Research and the Arts Baden-Württemberg<br />
+            Konrad-Adenauer-Straße 20<br />
+            70173 Stuttgart
+          </p>
+        </section>
+
+        <section>
+          <h2>Disclaimer</h2>
+          <p>
+            Despite careful content control, we assume no liability for the content of external links. The operators of linked pages are solely responsible for their content.
+            <br /><br />
+            This statement was last updated on 17 June 2025.
+          </p>
+        </section>
+      </div>
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/footer/Footer.vue'
+</script>
+
+<style scoped>
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.legal-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 2rem 1rem;
+  background: white;
+}
+
+.legal-page {
+  max-width: 900px;
+  width: 100%;
+  background: #f5f5f5;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  line-height: 1.7;
+  color: #333;
+}
+
+.legal-page h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #1e3c72;
+  font-size: 2.5rem;
+}
+
+.legal-page section {
+  margin-bottom: 2rem;
+}
+
+.legal-page h2 {
+  color: #2a5298;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/website/src/pages/PrivacyPolicyView.vue b/website/src/pages/PrivacyPolicyView.vue
new file mode 100644
index 0000000..7429ddf
--- /dev/null
+++ b/website/src/pages/PrivacyPolicyView.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="page-wrapper">
+    <Navbar />
+    <main class="legal-content">
+      <div class="legal-page">
+        <h1>Privacy Policy</h1>
+
+        <section>
+          <h2>1. Introduction</h2>
+          <p>
+            We value your privacy and are committed to protecting your personal data. This Privacy Policy explains how we collect, use, and store your information when you use our website and mobile application.
+          </p>
+        </section>
+
+        <section>
+          <h2>2. Data We Collect</h2>
+          <ul>
+            <li>Account information (e.g., username, email address)</li>
+            <li>Fitness and activity data (e.g., steps, routes, challenges)</li>
+            <li>Device information (e.g., browser type, IP address)</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>3. How We Use Your Data</h2>
+          <p>We use your data to:</p>
+          <ul>
+            <li>Provide and improve our services</li>
+            <li>Track your activity and progress</li>
+            <li>Enable social features like leaderboards and friend connections</li>
+            <li>Respond to your inquiries and support requests</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>4. Data Sharing</h2>
+          <p>
+            We do not sell or rent your personal information. Data may be shared with third parties only when required by law or to provide essential services (e.g., hosting providers).
+          </p>
+        </section>
+
+        <section>
+          <h2>5. Your Rights</h2>
+          <p>You have the right to:</p>
+          <ul>
+            <li>Access and review your personal data</li>
+            <li>Request data correction or deletion</li>
+            <li>Withdraw your consent at any time</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>6. Contact</h2>
+          <p>
+            For questions regarding this policy, please contact us at:<br />
+            <strong>Email:</strong> info@hft-stuttgart.de
+          </p>
+        </section>
+
+        <section>
+          <h2>7. Changes to This Policy</h2>
+          <p>
+            We may update this Privacy Policy from time to time. Changes will be published on this page. This statement was last updated on 17 June 2025.
+          </p>
+        </section>
+      </div>
+    </main>
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Navbar from '@/components/Navbar.vue'
+import Footer from '@/components/footer/Footer.vue'
+</script>
+
+<style scoped>
+.page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.legal-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 2rem 1rem;
+  background: white;
+}
+
+.legal-page {
+  max-width: 900px;
+  width: 100%;
+  background: #f5f5f5;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  line-height: 1.7;
+  color: #333;
+}
+
+.legal-page h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: #1e3c72;
+  font-size: 2.5rem;
+}
+
+.legal-page section {
+  margin-bottom: 2rem;
+}
+
+.legal-page h2 {
+  color: #2a5298;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.legal-page ul {
+  padding-left: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.legal-page li {
+  margin-bottom: 0.4rem;
+}
+</style>
\ No newline at end of file
diff --git a/website/src/pages/ProfileView.vue b/website/src/pages/ProfileView.vue
index 3a7afe4..1a9d4a4 100644
--- a/website/src/pages/ProfileView.vue
+++ b/website/src/pages/ProfileView.vue
@@ -1,16 +1,19 @@
 <template>
-  <Navbar />
-  <div class="profile-page">
-    <TabBar :tabs="tabs" v-model="activeTab" />
-    <div v-if="activeTab === 'Profile'">
-      <ProfileTab :user="user" />
-    </div>
-    <div v-else-if="activeTab === 'Followers'">
-      <FollowListTab :users="followedUsers" title="Followers" />
-    </div>
-    <div v-else-if="activeTab === 'Following'">
-      <FollowListTab :users="followingUsers" title="Following" />
+  <div class="page-wrapper">
+    <Navbar />
+    <div class="profile-page">
+      <TabBar :tabs="tabs" v-model="activeTab" />
+      <div v-if="activeTab === 'Profile'">
+        <ProfileTab :user="user" />
+      </div>
+      <div v-else-if="activeTab === 'Followers'">
+        <FollowListTab :users="followedUsers" title="Followers" />
+      </div>
+      <div v-else-if="activeTab === 'Following'">
+        <FollowListTab :users="followingUsers" title="Following" />
+      </div>
     </div>
+    <Footer />
   </div>
 </template>
 
@@ -22,6 +25,7 @@ import FollowListTab from '@/components/profile/FollowListTab.vue'
 import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import api from '@/api/backend-api'
+import Footer from '@/components/footer/Footer.vue'
 
 interface User {
    id: string
@@ -83,7 +87,16 @@ watch(
 </script>
 
 <style scoped>
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 .profile-page {
+  flex: 1;
   padding: 2rem;
 }
+.footer {
+  margin-top: auto;
+}
 </style>
diff --git a/website/src/pages/RunsView.vue b/website/src/pages/RunsView.vue
index bec587e..c1b7245 100644
--- a/website/src/pages/RunsView.vue
+++ b/website/src/pages/RunsView.vue
@@ -123,6 +123,7 @@
       </template>
     </main>
   </div>
+  <Footer />
 </template>
 
 <script setup lang="ts">
@@ -136,6 +137,7 @@ import ElevationProfile from '@/components/runs/ElevationProfile.vue'
 import { parseRoute } from '@/utils/routes'
 import PlanRunMap from '@/components/runs/plan/PlanRunMap.vue'
 import ConfirmDialog from '@/components/modals/ConfirmDialog.vue'
+import Footer from '@/components/footer/Footer.vue'
 
 const tab = ref<'past' | 'plan' | 'planned'>('past')
 
@@ -335,7 +337,7 @@ const handleConfirmDelete = async () => {
 }
 .runs-view {
   display: flex;
-  height: 100vh;
+  height: 110vh;
 }
 .run-details {
   flex: 1;
diff --git a/website/src/pages/SettingsView.vue b/website/src/pages/SettingsView.vue
index ace094c..a103049 100644
--- a/website/src/pages/SettingsView.vue
+++ b/website/src/pages/SettingsView.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="page-wrapper">
   <Navbar :key="navbarKey" />
   <div class="settings-tabbar-layout">
     <div class="settings-tabbar">
@@ -77,9 +78,12 @@
       />
     </div>
   </div>
+  <Footer />
+  </div>
 </template>
 
 <script setup lang="ts">
+import Footer from '@/components/footer/Footer.vue'
 import { ref, reactive, onMounted, computed } from 'vue'
 import Navbar from '@/components/Navbar.vue'
 import ProfileSettings from '@/components/settings/ProfileSettings.vue'
@@ -272,6 +276,7 @@ onMounted(async () => {
     // Ignore errors for optional fetches
   }
 })
+
 </script>
 
 <style scoped>
@@ -402,4 +407,12 @@ button.logout:hover {
 .fade-enter-from, .fade-leave-to {
   opacity: 0;
 }
+.footer {
+  margin-top: auto;
+}
+.page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/website/src/router/index.ts b/website/src/router/index.ts
index c2b96b9..070f207 100644
--- a/website/src/router/index.ts
+++ b/website/src/router/index.ts
@@ -11,6 +11,9 @@ import ProfileView from '@/pages/ProfileView.vue'
 import SettingsView from '@/pages/SettingsView.vue'
 import NotFoundView from '@/pages/NotFound.vue'
 import DownloadView from '@/pages/DownloadView.vue'
+import LegalNoticeView from '@/pages/LegalNoticeView.vue'
+import PrivacyPolicyView from '@/pages/PrivacyPolicyView.vue'
+import AccessibilityView from '@/pages/AccessibilityView.vue'
 import { useAuth } from '@/utils/useAuth'
 
 const routes = [
@@ -25,6 +28,9 @@ const routes = [
   { path: '/download', component: DownloadView },
   { path: '/settings', component: SettingsView },
   { path: '/profile/:username', component: ProfileView, props: true },
+  { path: '/legal-notice', component: LegalNoticeView },
+  { path: '/privacy-policy', component: PrivacyPolicyView },
+  { path: '/accessibility', component: AccessibilityView },
   { path: '/:pathMatch(.*)*', component: NotFoundView } // Catch-all for 404
 ]