diff --git a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
index aac551b5..9a3f80b7 100644
--- a/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
+++ b/Frontend/components/SupervisorStudentList/SupervisorStudentList.vue
@@ -83,13 +83,12 @@ const emailAddress = ref("");
 const clearInput = ref(false);
 const emailDomain = "fhstp.ac.at";
 
-
 const updateMail = (value: string) => {
   emailAddress.value = value;
 };
 
 const editButtonLabel = computed(() => {
-  return isEditing.value ? t('generic.done') : t('generic.edit');
+  return isEditing.value ? t("generic.done") : t("generic.edit");
 });
 
 const editButtonIcon = computed(() => {
@@ -219,17 +218,27 @@ watch(
             studentToRemove?.lastName
           : ''
       "
-      :image-src="studentToRemove?.src || getPlaceholderImage(studentToRemove?.firstName, studentToRemove?.lastName) || ''"
+      :image-src="
+        studentToRemove?.src ||
+        getPlaceholderImage(
+          studentToRemove?.firstName,
+          studentToRemove?.lastName
+        ) ||
+        ''
+      "
       :main-text="
         t('supervisorStudentList.removeStudent.mainText', {
           firstName: studentToRemove?.firstName,
           lastName: studentToRemove?.lastName,
         })
       "
-      :confirm-text="t('supervisorStudentList.removeStudent.confirmText')"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.removeStudent.confirmText')
+      "
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
       setting-key="showRemoveStudentModal"
       :title="t('supervisorStudentList.removeStudent.title')"
+      :sub-text="t('supervisorStudentList.removeStudent.subText')"
       icon="trash"
       @confirm="confirmRemoveStudent"
     />
@@ -246,7 +255,11 @@ watch(
             modal_user.last_name
           : ''
       "
-      :image-src="modal_user?.profile_image || getPlaceholderImage(modal_user?.first_name, modal_user?.last_name) || ''"
+      :image-src="
+        modal_user?.profile_image ||
+        getPlaceholderImage(modal_user?.first_name, modal_user?.last_name) ||
+        ''
+      "
       :main-text="
         t('supervisorStudentList.addExistingStudent.mainText', {
           firstName: modal_user?.first_name,
@@ -254,8 +267,10 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      :confirm-text="t('supervisorStudentList.addExistingStudent.confirmText')"
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addExistingStudent.confirmText')
+      "
       icon="user-group"
       setting-key="showAddStudentModal"
       :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
@@ -273,14 +288,18 @@ watch(
         })
       "
       :show-checkbox="true"
-      :checkbox-label="t('supervisorStudentList.checkboxLabel')"
-      confirm-text=""
+      :checkbox-label="t('settings.supervisorStudentList.checkboxLabel')"
+      :confirm-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.confirmText')
+      "
       icon="user-group"
       image-alt="Logo"
       image-src="../images/Superwise_Logo.svg"
       setting-key="showAddStudentModal"
-      :sub-text="t('supervisorStudentList.addExistingStudent.subText')"
-      :title="t('supervisorStudentList.addNewStudent.title')"
+      :sub-text="
+        t('settings.supervisorStudentList.addNotExistingStudent.subText')
+      "
+      :title="t('settings.supervisorStudentList.addNewStudent.title')"
       @confirm="addStudent"
     />
   </div>
diff --git a/Frontend/components/SwipeContainer/SwipeContainer.vue b/Frontend/components/SwipeContainer/SwipeContainer.vue
index ffaf82de..20564ac2 100644
--- a/Frontend/components/SwipeContainer/SwipeContainer.vue
+++ b/Frontend/components/SwipeContainer/SwipeContainer.vue
@@ -1,113 +1,134 @@
 <script setup lang="ts">
-import { usePointerSwipe } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
+import { usePointerSwipe } from "@vueuse/core";
+import { computed, shallowRef, ref } from "vue";
+import { faCheck, faBan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 interface Props {
-    swipeThreshold?: number
+  swipeThreshold?: number;
+  swipeLeftText?: string;
+  swipeRightText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    swipeThreshold: 40,
-})
+  swipeThreshold: 40,
+  swipeLeftText: "Request",
+  swipeRightText: "Reject",
+});
 
-const emit = defineEmits(['swipeRight', 'swipeLeft'])
+const emit = defineEmits(["swipeRight", "swipeLeft"]);
 
 defineExpose({
-    reset,
-})
+  reset,
+});
 
-const target = shallowRef<HTMLElement | null>(null)
-const container = shallowRef<HTMLElement | null>(null)
+const target = shallowRef<HTMLElement | null>(null);
+const container = shallowRef<HTMLElement | null>(null);
 
-const containerWidth = computed(() => container.value?.offsetWidth || 0)
+const containerWidth = computed(() => container.value?.offsetWidth || 0);
 
-const left = shallowRef('0')
-const opacity = shallowRef(1)
+const left = shallowRef("0");
+const opacity = shallowRef(1);
 
-const cardIsAtStartPosition = ref(false)
+const cardIsAtStartPosition = ref(false);
 
 function reset() {
-    left.value = '0'
-    opacity.value = 1
-    cardIsAtStartPosition.value = true
+  left.value = "0";
+  opacity.value = 1;
+  cardIsAtStartPosition.value = true;
 }
 
 const { distanceX, isSwiping } = usePointerSwipe(target, {
-    disableTextSelect: true,
-    threshold: props.swipeThreshold,
-    onSwipe() {
-        cardIsAtStartPosition.value = false
-        if (containerWidth.value) {
-            if (distanceX.value < 0) {
-                // Swipe right direction (negative distanceX)
-                const distance = Math.abs(distanceX.value)
-                left.value = `${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else if (distanceX.value > 0) {
-                // Swipe left direction (positive distanceX)
-                const distance = distanceX.value
-                left.value = `-${distance}px`
-                opacity.value = 1.25 - distance / containerWidth.value
-            }
-            else {
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-    onSwipeEnd() {
-        if (containerWidth.value) {
-            // Calculate the ratio relative to container width
-            const ratio = Math.abs(distanceX.value) / containerWidth.value
-            
-            if (distanceX.value < 0 && ratio >= 0.5) {
-                // Swipe right direction threshold reached
-                left.value = '100%'
-                opacity.value = 0
-                emit('swipeRight')
-            }
-            else if (distanceX.value > 0 && ratio >= 0.5) {
-                // Swipe left direction threshold reached
-                left.value = '-100%'
-                opacity.value = 0
-                emit('swipeLeft')
-            }
-            else {
-                // Reset if threshold not reached
-                cardIsAtStartPosition.value = true
-                left.value = '0'
-                opacity.value = 1
-            }
-        }
-    },
-})
-
-const backgroundColorClasses = computed(() => {
-    return {
-        'bg-base-100': cardIsAtStartPosition.value,
-        'bg-success': distanceX.value < -props.swipeThreshold/10,
-        'bg-error':  distanceX.value > props.swipeThreshold/10,
+  disableTextSelect: true,
+  threshold: props.swipeThreshold,
+  onSwipe() {
+    cardIsAtStartPosition.value = false;
+    if (containerWidth.value) {
+      if (distanceX.value < 0) {
+        // Swipe right direction (negative distanceX)
+        const distance = Math.abs(distanceX.value);
+        left.value = `${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else if (distanceX.value > 0) {
+        // Swipe left direction (positive distanceX)
+        const distance = distanceX.value;
+        left.value = `-${distance}px`;
+        opacity.value = 1.25 - distance / containerWidth.value;
+      } else {
+        left.value = "0";
+        opacity.value = 1;
+      }
     }
-})
+  },
+  onSwipeEnd() {
+    if (containerWidth.value) {
+      // Calculate the ratio relative to container width
+      const ratio = Math.abs(distanceX.value) / containerWidth.value;
 
+      if (distanceX.value < 0 && ratio >= 0.5) {
+        // Swipe right direction threshold reached
+        left.value = "100%";
+        opacity.value = 0;
+        emit("swipeRight");
+      } else if (distanceX.value > 0 && ratio >= 0.5) {
+        // Swipe left direction threshold reached
+        left.value = "-100%";
+        opacity.value = 0;
+        emit("swipeLeft");
+      } else {
+        // Reset if threshold not reached
+        cardIsAtStartPosition.value = true;
+        left.value = "0";
+        opacity.value = 1;
+      }
+    }
+  },
+});
+
+const backgroundColorClasses = computed(() => ({
+  "bg-base-100": cardIsAtStartPosition.value,
+  "bg-success": distanceX.value < -props.swipeThreshold / 10,
+  "bg-error": distanceX.value > props.swipeThreshold / 10,
+}));
+
+const swipeIcon = computed(() => {
+  if (!isSwiping.value) return null;
+
+  if (distanceX.value < -props.swipeThreshold / 10) return faCheck;
+  if (distanceX.value > props.swipeThreshold / 10) return faBan;
+  return null;
+});
+
+const textPositionClass = computed(() => {
+  if (distanceX.value < -props.swipeThreshold / 10) return "left-4";
+  if (distanceX.value > props.swipeThreshold / 10) return "right-4";
+  return "";
+});
 </script>
 
 <template>
-    <div class="inline-flex">
-        <div
-            ref="container"
-            class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
-            :class="backgroundColorClasses"
-        >
-            <div
-                ref="target"
-                class="relative w-full flex items-center justify-center"
-                :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
-                :style="{ left, opacity }"
-            >
-                <slot />
-            </div>
-        </div>
+  <div class="inline-flex">
+    <div
+      ref="container"
+      class="rounded-3xl relative inline-block overflow-hidden shadow-lg"
+      :class="backgroundColorClasses"
+    >
+      <div
+        ref="target"
+        class="relative w-full flex items-center justify-center z-10"
+        :class="{ 'transition-all duration-200 ease-linear': !isSwiping }"
+        :style="{ left, opacity }"
+      >
+        <slot />
+      </div>
+      <!-- Overlay text for swipe direction -->
+      <div
+        v-if="swipeIcon"
+        class="absolute top-1/2 transform -translate-y-1/2 pointer-events-none"
+        :class="textPositionClass"
+      >
+        <FontAwesomeIcon :icon="swipeIcon" class="text-3xl text-white" />
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>
diff --git a/Frontend/composables/useUserApi.ts b/Frontend/composables/useUserApi.ts
index fe93ad67..73cbcf4c 100644
--- a/Frontend/composables/useUserApi.ts
+++ b/Frontend/composables/useUserApi.ts
@@ -1,11 +1,11 @@
-import {makeRequest} from './useApi'
-import type {UserCreateData, UserRegistrationData} from "~/shared/types/userInterfaces";
+import { makeRequest } from './useApi'
+import type { UserCreateData, UserRegistrationData } from "~/shared/types/userInterfaces";
 
 export const useUserApi = () => {
 
   const getUserRegistrationStatus = async (email: string) => {
-      const data = await $fetch(`/api/users/check-registration?email=${email}`);
-      return data as UserRegistrationData;
+    const data = await $fetch(`/api/users/check-registration?email=${email}`);
+    return data as UserRegistrationData;
   }
   const createUser = async (data: UserCreateData) => {
     return await makeRequest('users', 'POST', data)
@@ -40,13 +40,17 @@ export const useUserApi = () => {
   const getRecommendedSupervisors = async (data: string) => {
     return await makeRequest(`match/${data}`, 'GET');
   }
-  
+
   const createStudentProfile = async (data: string) => {
     return await makeRequest('students', 'POST', {
       thesis_description: data
     })
   }
 
+  const deleteUser = async (id: string) => {
+    return await makeRequest(`users/${id}`, 'DELETE')
+  }
+
   return {
     getUserRegistrationStatus,
     createUser,
@@ -56,7 +60,8 @@ export const useUserApi = () => {
     getUserById,
     addUserTag,
     getRecommendedSupervisors,
-    createStudentProfile
+    createStudentProfile,
+    deleteUser
   }
 
 }
\ No newline at end of file
diff --git a/Frontend/i18n/locales/de-DE.json b/Frontend/i18n/locales/de-DE.json
index 79b944ab..40218514 100644
--- a/Frontend/i18n/locales/de-DE.json
+++ b/Frontend/i18n/locales/de-DE.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Studenten Verwalten",
       "noRequests": "Es gibt keine offenen Anfragen...",
-      "slotsFilled": "Belegte Slots"
+      "slotsFilled": "Freie Slots"
     }
   },
   "dataProtection": {
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Datenlöschung",
       "deleteMyData": "Meine Daten löschen",
       "generalInfoText": "Bei SuperWise nehmen wir Ihre Privatsphäre und den Schutz Ihrer persönlichen Daten sehr ernst. Diese Richtlinie beschreibt, wie wir Ihre Daten erfassen, verwenden und verwalten – für maximale Transparenz und Ihr beruhigtes Gewissen.",
-      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie"
+      "generalInfoTitle": "🛡️ SuperWise Datenschutzrichtlinie",
+      "dataDeleted": "Daten erfolgreich gelöscht"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "Wenn Sie persönliche Daten wie Ihren Namen, Ihr Profilbild, die Themenbeschreibung oder die Biografie aktualisieren, wird die vorherige Version dauerhaft überschrieben. Wir speichern keine früheren Versionen oder Backups Ihrer persönlichen Daten.",
@@ -177,6 +178,7 @@
     "done": "Fertig",
     "download": "Herunterladen",
     "edit": "Bearbeiten",
+    "error": "Fehler",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -196,6 +198,7 @@
     "showLess": "Weniger anzeigen",
     "spanish": "🇪🇸 Español",
     "student": "Studierende",
+    "success": "Erfolgreich ausgeführt",
     "supervise": "Betreuen",
     "supervisionRequest": "Betreuungsanfrage",
     "supervisor": "Betreuende",
@@ -226,6 +229,9 @@
     "sentRequest": "Betreuungsanfrage wurde gesendet",
     "supervisionRequest": "{name} will von dir betreut werden!",
     "supervisorDismissed": "Betreuer wurde abgelehnt",
+    "swipeRightHeadline": "{firstName} {lastName} anfragen",
+    "swipeLeftText": "Anfragen",
+    "swipeRightText": "Entfernen",
     "swipeLeft": {
       "description": "Wenn Sie {firstName} {lastName} entfernen, wird er nie wieder vorgeschlagen, Sie können jedoch weiterhin nach ihm suchen. Sind Sie sicher, dass Sie fortfahren möchten?",
       "headline": "Betreuer entfernen",
@@ -241,7 +247,7 @@
     "confirm": "Bestätigen",
     "dontShowAgain": "Nicht mehr anzeigen",
     "sendSupervisionRequestHeadline": "Betreuungsanfrage senden",
-    "supervisionInfo": "Wenn du eine Anfrage zur Betreuung einer Abschlussarbeit sendest, wird diese an die ausgewählten Betreuenden weitergeleitet. Sie können dann entscheiden, ob sie die Anfrage annehmen oder ablehnen möchten. Wenn sie die Anfrage annehmen, wird eine Bestätigung erstellt, die du herunterladen kannst.",
+    "supervisionInfo": "Wenn du eine Anfrage an {firstName} {lastName} sendest, wird er/sie benachrichtigt und kann die Anfrage annehmen oder ablehnen. Wenn er/sie die Anfrage annimmt, erhältst Du eine automatisch erstellte Bestätigung, die du herunterladen kannst. Wenn er/sie ablehnt, solltest du einen weiteren Betreuer anfragen.",
     "withdrawSupervisionConfirm": "Anfrage zurückziehen",
     "withdrawSupervisionDescription": "Möchten Sie die Betreuungsanfrage von {name} zurückziehen? Nach dem Zurückziehen kann der Betreuer diese Anfrage nicht mehr sehen.",
     "withdrawSupervisionHeadline": "Betreuungsanfrage zurückziehen"
diff --git a/Frontend/i18n/locales/en-GB.json b/Frontend/i18n/locales/en-GB.json
index f20f67e1..2d2a9031 100644
--- a/Frontend/i18n/locales/en-GB.json
+++ b/Frontend/i18n/locales/en-GB.json
@@ -129,7 +129,7 @@
     "supervisor": {
       "manageStudents": "Manage Students",
       "noRequests": "There are no open requests...",
-      "slotsFilled": "Slots filled"
+      "slotsFilled": "Free slots"
     }
   },
   "dataProtection": {
@@ -152,7 +152,8 @@
       "dataDeletionSubtitle": "🗑 Data Deletion",
       "deleteMyData": "Delete my data",
       "generalInfoText": "At SuperWise, we take your privacy and the protection of your personal data seriously. This policy outlines how we collect, use, and manage your information to ensure transparency and your peace of mind.",
-      "generalInfoTitle": "🛡 SuperWise Data Protection Policy"
+      "generalInfoTitle": "🛡 SuperWise Data Protection Policy",
+      "dataDeleted": "Data deleted successfully"
     },
     "student&supervisor": {
       "changesAndOverwritesText": "When you update your personal data, such as your name, profile picture, topic description, or bio, the previous version is permanently overwritten. We do not retain copies or backups of your previous personal data.",
@@ -177,6 +178,7 @@
     "done": "Done",
     "download": "Download",
     "edit": "Edit",
+    "error": "Error",
     "english": "🇬🇧 English",
     "french": "🇫🇷 Français",
     "german": "🇩🇪 Deutsch",
@@ -196,6 +198,7 @@
     "showLess": "Show less",
     "spanish": "🇪🇸 Español",
     "student": "Student",
+    "success": "Success",
     "supervise": "Supervise",
     "supervisionRequest": "Supervision request",
     "supervisor": "Supervisor",
@@ -226,6 +229,9 @@
     "sentRequest": "Supervision request has been sent",
     "supervisionRequest": "{name} wants to be supervised by you!",
     "supervisorDismissed": "Supervisor has been dismissed",
+    "swipeRightHeadline": "Request {firstName} {lastName}",
+    "swipeLeftText": "Request",
+    "swipeRightText": "Reject",
     "swipeLeft": {
       "description": "By dismissing {firstName} {lastName}, they will never get suggested again, but you can still search for them. Are you sure you want to do this?",
       "headline": "Dismiss Supervisor",
@@ -241,7 +247,7 @@
     "confirm": "Confirm",
     "dontShowAgain": "Don't show again",
     "sendSupervisionRequestHeadline": "Send supervision request",
-    "supervisionInfo": "When you send a thesis supervision request, it will be forwarded to the selected supervisors. They can then decide whether to accept or decline the request. If they accept the request, a confirmation will be created that you can download.",
+    "supervisionInfo": "When you send a thesis supervision request to {firstName} {lastName}, they will be notified and can accept or deny your request. If they accept the request, a confirmation will be created that you can download, otherwise you will need to choose a different supervisor.",
     "withdrawSupervisionConfirm": "Withdraw Request",
     "withdrawSupervisionDescription": "Would you like to withdraw the supervision request from {name}? Once withdrawn, the supervisor will no longer see this request.",
     "withdrawSupervisionHeadline": "Withdraw Supervision Request"
diff --git a/Frontend/pages/admin/data-protection.vue b/Frontend/pages/admin/data-protection.vue
index 31cdce25..94d8faea 100644
--- a/Frontend/pages/admin/data-protection.vue
+++ b/Frontend/pages/admin/data-protection.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
 
 const pageContent = [
   "dataProtection.generic.generalInfoTitle",
@@ -18,15 +20,29 @@ const pageContent = [
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/))
-    return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
   console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
+  deleteUser(userStore.user.id);
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -37,9 +53,9 @@ definePageMeta({
 <template>
   <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
       <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
         <li v-for="(item, index) in t(content).split('\n')" :key="index">
@@ -47,20 +63,43 @@ definePageMeta({
         </li>
       </ul>
 
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
+        {{ t(content) }}
+      </h2>
 
-      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">{{ t(content) }}</h2>
-
-      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">{{ t(content) }}</h1>
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
+        {{ t(content) }}
+      </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/data-protection.vue b/Frontend/pages/student/data-protection.vue
index d07a97c3..bd083117 100644
--- a/Frontend/pages/student/data-protection.vue
+++ b/Frontend/pages/student/data-protection.vue
@@ -1,27 +1,56 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
+
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
+  deleteUser(userStore.user.id);
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -30,57 +59,56 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>
diff --git a/Frontend/pages/student/matching.vue b/Frontend/pages/student/matching.vue
index 05939c97..4b575b62 100644
--- a/Frontend/pages/student/matching.vue
+++ b/Frontend/pages/student/matching.vue
@@ -6,6 +6,8 @@
         :key="supervisor.supervisor_userId || index"
         :ref="(el) => setItemRef(el, supervisor.supervisor_userId)"
         class="mb-4"
+        :swipe-left-text="t('matching.swipeLeftText')"
+        :swipe-right-text="t('matching.swipeRightText')"
         @swipe-left="handleSwipeLeft(supervisor)"
         @swipe-right="handleSwipeRight(supervisor)"
       >
@@ -170,10 +172,16 @@ const handleSwipeRight = async (supervisor: SupervisorData) => {
   removedSupervisor.value = supervisor;
   modalInformation.value = {
     type: supervisionRequestType.CONFIRM,
-    headline: `Request ${supervisor.firstName} ${supervisor.lastName}`,
+    headline: t("matching.swipeRightHeadline", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     icon: "",
     warning: "",
-    description: t("modal.supervisionInfo"),
+    description: t("modal.supervisionInfo", {
+      firstName: supervisor.firstName,
+      lastName: supervisor.lastName,
+    }),
     confirmButtonText: t("modal.confirm"),
     confirmButtonColor: "primary",
     supervisor: supervisor,
diff --git a/Frontend/pages/student/requests.vue b/Frontend/pages/student/requests.vue
index afd2c355..c9fed4ec 100644
--- a/Frontend/pages/student/requests.vue
+++ b/Frontend/pages/student/requests.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { useStudentStore } from "~/stores/useStudentStore";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
-import { supervisionRequestStatus, supervisionRequestType, HttpMethods } from "~/shared/enums/enums";
+import {
+  supervisionRequestStatus,
+  supervisionRequestType,
+  HttpMethods,
+} from "~/shared/enums/enums";
 import type { ConfirmationDialogData } from "~/shared/types/userInterfaces";
 import { nextTick, ref } from "vue";
 import type { SupervisionRequestsData } from "~/shared/types/supervisorInterfaces";
@@ -11,8 +15,9 @@ const { t } = useI18n();
 const studentStore = useStudentStore();
 const settingsStore = useSettingsStore();
 
-const { pendingSupervisionRequests, rejectedSupervisionRequests } = storeToRefs(studentStore)
-const modalInformation = ref<ConfirmationDialogData | null>(null)
+const { pendingSupervisionRequests, rejectedSupervisionRequests } =
+  storeToRefs(studentStore);
+const modalInformation = ref<ConfirmationDialogData | null>(null);
 const toast = ref({
   visible: false,
   type: "success",
@@ -30,10 +35,9 @@ onUnmounted(async () => {
 });
 
 const sortedRequests = computed(() => {
-  return [ ...(pendingSupervisionRequests.value || []) ]
-      .sort((a, b) => {
-        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
-      })
+  return [...(pendingSupervisionRequests.value || [])].sort((a, b) => {
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+  });
 });
 
 function navigate(route: string) {
@@ -44,16 +48,16 @@ async function handleWithdrawRequest(request: SupervisionRequestsData) {
   if (toast.value.visible && modalInformation.value) {
     await handleToastClosed();
   }
-   modalInformation.value = {
+  modalInformation.value = {
     type: supervisionRequestType.DISMISS,
-    headline: t('modal.withdrawSupervisionHeadline'),
-    icon: '',
-    warning: '',
-    description: t('modal.withdrawSupervisionDescription', {
-      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`
+    headline: t("modal.withdrawSupervisionHeadline"),
+    icon: "",
+    warning: "",
+    description: t("modal.withdrawSupervisionDescription", {
+      name: `${request.supervisor.user.first_name} ${request.supervisor.user.last_name}`,
     }),
-    confirmButtonText: t('modal.withdrawSupervisionConfirm'),
-    confirmButtonColor: 'error',
+    confirmButtonText: t("modal.withdrawSupervisionConfirm"),
+    confirmButtonColor: "error",
     request: request,
   };
   if (settingsStore.settings?.showSupervisionAcceptModal) {
@@ -78,7 +82,7 @@ const handleToastClosed = () => {
 };
 
 const handleWithdrawAction = async (request: SupervisionRequestsData) => {
-   try {
+  try {
     await $fetch(`/api/supervision-requests/${request.id}`, {
       method: HttpMethods.PATCH,
       body: {
@@ -91,11 +95,11 @@ const handleWithdrawAction = async (request: SupervisionRequestsData) => {
     toast.value = {
       visible: true,
       type: "error",
-      message: t('toast.withdrawRequestFailed'),
+      message: t("toast.withdrawRequestFailed"),
     };
     modalInformation.value = null;
   }
-}
+};
 
 const handleToastUndoClick = async () => {
   toast.value.visible = false;
@@ -110,12 +114,14 @@ const showToastInformation = () => {
     handleToastClosed();
   }
   if (modalInformation.value?.request) {
-    studentStore.removePendingSupervisionRequest(modalInformation.value.request.id);
+    studentStore.removePendingSupervisionRequest(
+      modalInformation.value.request.id
+    );
   }
   toast.value = {
     visible: true,
     type: "success",
-    message: t('toast.withdrawnRequest'),
+    message: t("toast.withdrawnRequest"),
   };
 };
 
@@ -128,9 +134,11 @@ const handleModalDontShowAgain = () => {
 
 const openModal = async () => {
   await nextTick();
-  const modal = document.getElementById('confirmationModal') as HTMLDialogElement
-  modal?.showModal()
-}
+  const modal = document.getElementById(
+    "confirmationModal"
+  ) as HTMLDialogElement;
+  modal?.showModal();
+};
 
 definePageMeta({
   layout: "student-base-layout",
@@ -140,18 +148,18 @@ definePageMeta({
 <template>
   <div class="size-full flex overflow-y-auto flex-col py-3 px-8">
     <MiniCard
-        v-for="pendingRequest in sortedRequests"
-        :key="pendingRequest.id"
-        :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
-        :first-name="pendingRequest.supervisor.user.first_name"
-        :image="pendingRequest.supervisor.user.profile_image"
-        :last-name="pendingRequest.supervisor.user.last_name"
-        :preview-text="`Pending Request to ${pendingRequest.supervisor.user.first_name}`"
-        bottom-icon="tag"
-        class="cursor-pointer"
-        top-icon="user-group"
-        :show-delete="true"
-        @delete-clicked="handleWithdrawRequest(pendingRequest)"
+      v-for="pendingRequest in sortedRequests"
+      :key="pendingRequest.id"
+      :bottom-text="new Date(pendingRequest.updated_at).toLocaleDateString()"
+      :first-name="pendingRequest.supervisor.user.first_name"
+      :image="pendingRequest.supervisor.user.profile_image"
+      :last-name="pendingRequest.supervisor.user.last_name"
+      :preview-text="t('miniCard.pending', {firstName: pendingRequest.supervisor.user.first_name})"
+      bottom-icon="tag"
+      class="cursor-pointer"
+      top-icon="user-group"
+      :show-delete="true"
+      @delete-clicked="handleWithdrawRequest(pendingRequest)"
     />
 
     <EmptyPagePlaceholder
@@ -185,28 +193,33 @@ definePageMeta({
       />
     </CustomAccordion>
     <Toast
-        v-if="toast.visible"
-        :duration="3000"
-        :message="toast.message"
-        :type="toast.type"
-        button-text="Undo"
-        @close="handleToastClosed"
-        @button-click="handleToastUndoClick"
+      v-if="toast.visible"
+      :duration="3000"
+      :message="toast.message"
+      :type="toast.type"
+      button-text="Undo"
+      @close="handleToastClosed"
+      @button-click="handleToastUndoClick"
     />
     <ConfirmationModal
-        v-if="modalInformation && modalInformation.request"
-        :confirm-button-color="modalInformation.confirmButtonColor"
-        :confirm-button-text="modalInformation.confirmButtonText"
-        :description="modalInformation.description"
-        :headline="modalInformation.headline"
-        :icon="modalInformation.icon"
-        :image="modalInformation.request.supervisor.user.profile_image || getPlaceholderImage(modalInformation.request.supervisor.user.first_name, modalInformation.request.supervisor.user.last_name)"
-        linked-component-id="confirmationModal"
-        @confirm="showToastInformation()"
-        @dont-show-again="handleModalDontShowAgain"
+      v-if="modalInformation && modalInformation.request"
+      :confirm-button-color="modalInformation.confirmButtonColor"
+      :confirm-button-text="modalInformation.confirmButtonText"
+      :description="modalInformation.description"
+      :headline="modalInformation.headline"
+      :icon="modalInformation.icon"
+      :image="
+        modalInformation.request.supervisor.user.profile_image ||
+        getPlaceholderImage(
+          modalInformation.request.supervisor.user.first_name,
+          modalInformation.request.supervisor.user.last_name
+        )
+      "
+      linked-component-id="confirmationModal"
+      @confirm="showToastInformation()"
+      @dont-show-again="handleModalDontShowAgain"
     />
   </div>
-
 </template>
 
 <style scoped></style>
diff --git a/Frontend/pages/supervisor/currently-supervising.vue b/Frontend/pages/supervisor/currently-supervising.vue
index de66145a..46afcec3 100644
--- a/Frontend/pages/supervisor/currently-supervising.vue
+++ b/Frontend/pages/supervisor/currently-supervising.vue
@@ -5,7 +5,7 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import type { SupervisorData } from "~/shared/types/supervisorInterfaces";
 import type { UserData } from "~/shared/types/userInterfaces";
 import { supervisionRequestStatus } from "#shared/enums/enums";
-import { useI18n } from 'vue-i18n';
+import { useI18n } from "vue-i18n";
 
 const authStore = useAuthStore();
 await authStore.initialize();
@@ -17,6 +17,8 @@ const { getUserByEmail } = useUserApi();
 const current_user = ref<UserData | null>(null);
 const supervisor_data = ref<SupervisorData | null>(null);
 
+const { t } = useI18n();
+
 const {
   data: requests,
   pending,
@@ -24,6 +26,12 @@ const {
   refresh,
 } = useSupervisionRequests("ACCEPTED");
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const students = computed(() =>
   (requests.value ?? []).map((request) => ({
     id: request.student.user_id,
@@ -83,20 +91,37 @@ async function addStudent(email: string) {
   );
 
   if (!existingStudent) {
-    await $fetch("/api/supervision-requests", {
-      method: "POST",
-      body: {
-        // This "id" usage is correct based on the current backend, even if you ide says its not
-        supervisor_id: supervisor_data.value.id,
-        student_email: email,
-      },
-    });
+    try {
+      await $fetch("/api/supervision-requests", {
+        method: "POST",
+        body: {
+          // This "id" usage is correct based on the current backend, even if you ide says its not
+          supervisor_id: supervisor_data.value.id,
+          student_email: email,
+        },
+      });
+      toastData.value = {
+        visible: true,
+        type: "success",
+        message: t("generic.success"), // or any other suitable success message
+      };
+    } catch (err) {
+      const errorMessage =
+        (err as { data?: { message?: string }; message?: string })?.data
+          ?.message ||
+        (err as { message?: string })?.message ||
+        t("generic.error");
+
+      toastData.value = {
+        visible: true,
+        type: "error",
+        message: errorMessage,
+      };
+    }
   }
   await refresh();
 }
 
-const { t } = useI18n();
-
 definePageMeta({
   layout: "generic-back-layout",
 });
@@ -104,12 +129,12 @@ definePageMeta({
 
 <template>
   <div class="w-full h-fit flex flex-col gap-2 p-8">
-    <span class="text-large p-4">{{ t('nav.currentlySupervising') }}</span>
+    <span class="text-large p-4">{{ t("nav.currentlySupervising") }}</span>
     <div
       v-if="pending || error"
       class="w-full h-fit min-h-64 p-4 border border-base-300 rounded-3xl flex flex-col justify-center items-center"
     >
-      <div v-if="pending">Loading…</div>
+      <div v-if="pending">{{ t("generic.loading") }}</div>
       <div v-else-if="error" class="text-red-600">{{ error.message }}</div>
     </div>
     <!-- your IDE says that total_spots doesnt exists. Its lying. The interfaces are fucked up, we gotta fix that later-->
@@ -120,6 +145,14 @@ definePageMeta({
       @add-student="addStudent"
       @remove-student="removeStudent"
     />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
   </div>
 </template>
 
diff --git a/Frontend/pages/supervisor/dashboard.vue b/Frontend/pages/supervisor/dashboard.vue
index 9e73ec02..99c7a80a 100644
--- a/Frontend/pages/supervisor/dashboard.vue
+++ b/Frontend/pages/supervisor/dashboard.vue
@@ -7,8 +7,8 @@ import { useSupervisionRequests } from "~/composables/useSupervisionRequests";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import EmptyPagePlaceholder from "~/components/Placeholder/EmptyPagePlaceholder.vue";
 
-const authStore = useAuthStore()
-const { user } = storeToRefs(authStore)
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
 const { getUserByEmail } = useUserApi();
 const { getSupervisorByUserId } = useSupervisorApi();
 const userStore = useUserStore();
@@ -33,15 +33,15 @@ const visibleRequests = computed(
 );
 
 watch(
-    () => user.value?.primaryEmailAddress?.emailAddress,
-    async (email) => {
-      if (!email) return;
+  () => user.value?.primaryEmailAddress?.emailAddress,
+  async (email) => {
+    if (!email) return;
 
-      if (!userStore.user) {
-        const fetched = (await getUserByEmail(email)) as UserData;
-        userStore.setUser(fetched);
-      }
-      current_user.value = userStore.user;
+    if (!userStore.user) {
+      const fetched = (await getUserByEmail(email)) as UserData;
+      userStore.setUser(fetched);
+    }
+    current_user.value = userStore.user;
 
       if (current_user.value?.id) {
         const data = (await getSupervisorByUserId(
@@ -73,14 +73,14 @@ definePageMeta({
 <template>
   <div class="flex flex-col w-full gap-8 p-8">
     <ActionCard
-        :button-text="t('dashboard.supervisor.manageStudents')"
-        card-type="primary"
-        class="w-full text-center"
-        @action-button-clicked="navigate('/supervisor/currently-supervising')"
+      :button-text="t('dashboard.supervisor.manageStudents')"
+      card-type="primary"
+      class="w-full text-center"
+      @action-button-clicked="navigate('/supervisor/currently-supervising')"
     >
       <div class="py-8 px-16 w-full">
         <h2 class="text-xl">
-          <FontAwesomeIcon icon="user-group"/>
+          <FontAwesomeIcon icon="user-group" />
           {{
             // this works, even though the IDE tells you it doesnt. The frontend interface types are not consitent with the backend types. Dont ask why.
             (supervisor_data?.total_spots ?? 0) - (supervisor_data?.available_spots ?? 0)
@@ -93,31 +93,37 @@ definePageMeta({
     </ActionCard>
 
     <ActionCard
-        :button-text="t('generic.showAll')"
-        :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
-        :header-text="t('generic.requests')"
-        card-type="ghost"
-        @action-button-clicked="navigateTo('/supervisor/matching')"
+      :button-text="t('generic.showAll')"
+      :disabled="visibleCount >= (pendingRequests?.length ?? 0)"
+      :header-text="t('generic.requests')"
+      card-type="ghost"
+      @action-button-clicked="navigateTo('/supervisor/matching')"
     >
       <EmptyPagePlaceholder
-          :render-condition="visibleRequests"
-          :text="t('dashboard.supervisor.noRequests')"
+        :render-condition="visibleRequests"
+        :text="t('dashboard.supervisor.noRequests')"
       />
       <NuxtLink
-          v-for="request in visibleRequests"
-          :key="request.id"
-          :to="`/profiles/${request.student.user_id}`"
+        v-for="request in visibleRequests"
+        :key="request.id"
+        :to="`/profiles/${request.student.user_id}`"
       >
         <MiniCard
-            :bottom-text="formatTimeString(request.updated_at, undefined)"
-            :first-name="request.student.user.first_name"
-            :image="request.student.user.profile_image || getPlaceholderImage(request.student.user.first_name, request.student.user.last_name) || ''"
-            :last-name="request.student.user.last_name"
-            :preview-text="request.student.thesis_description"
-            top-icon="message"
+          :bottom-text="formatTimeString(request.updated_at, undefined)"
+          :first-name="request.student.user.first_name"
+          :image="
+            request.student.user.profile_image ||
+            getPlaceholderImage(
+              request.student.user.first_name,
+              request.student.user.last_name
+            ) ||
+            ''
+          "
+          :last-name="request.student.user.last_name"
+          :preview-text="request.student.thesis_description"
+          top-icon="message"
         />
       </NuxtLink>
-
     </ActionCard>
   </div>
 </template>
diff --git a/Frontend/pages/supervisor/data-protection.vue b/Frontend/pages/supervisor/data-protection.vue
index 08f66bea..ab34d1c6 100644
--- a/Frontend/pages/supervisor/data-protection.vue
+++ b/Frontend/pages/supervisor/data-protection.vue
@@ -1,28 +1,57 @@
 <script lang="ts" setup>
+const { deleteUser } = useUserApi();
+const userStore = useUserStore();
+
 const pageContent = [
-  'dataProtection.generic.generalInfoTitle',
-  'dataProtection.generic.generalInfoText',
-  'dataProtection.generic.collectedDataSubtitle',
-  'dataProtection.student&supervisor.collectedDataText',
-  'dataProtection.student&supervisor.collectedDataList',
-  'dataProtection.generic.changesAndOverwritesSubtitle',
-  'dataProtection.student&supervisor.changesAndOverwritesText',
-  'dataProtection.generic.dataDeletionSubtitle',
-  'dataProtection.student&supervisor.dataDeletionText.1',
-  'dataProtection.student&supervisor.dataDeletionList',
-  'dataProtection.student&supervisor.dataDeletionText.2',
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
+  "dataProtection.generic.generalInfoTitle",
+  "dataProtection.generic.generalInfoText",
+  "dataProtection.generic.collectedDataSubtitle",
+  "dataProtection.student&supervisor.collectedDataText",
+  "dataProtection.student&supervisor.collectedDataList",
+  "dataProtection.generic.changesAndOverwritesSubtitle",
+  "dataProtection.student&supervisor.changesAndOverwritesText",
+  "dataProtection.generic.dataDeletionSubtitle",
+  "dataProtection.student&supervisor.dataDeletionText.1",
+  "dataProtection.student&supervisor.dataDeletionList",
+  "dataProtection.student&supervisor.dataDeletionText.2",
 ];
 
 const getStyle = (content: string) => {
-  if (content.match(/Subtitle(\.\d+)?$/)) return 'pt-6';
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
+  if (content.match(/Subtitle(\.\d+)?$/)) return "pt-6";
   // Removed unnecessary commented-out style conditions to reduce clutter.
 };
 
 const { t } = useI18n();
 
+const toastData = ref({
+  visible: false,
+  type: "success",
+  message: "",
+});
+
 const deleteData = () => {
   // Implement the logic to delete data
-  console.log('Delete data button clicked');
+  console.log("Delete data button clicked");
+  if (!userStore.user) return;
+
+  deleteUser(userStore.user.id);
+  toastData.value = {
+    visible: true,
+    type: "success",
+    message: t("dataProtection.generic.dataDeleted"),
+  };
 };
 
 definePageMeta({
@@ -31,57 +60,56 @@ definePageMeta({
 </script>
 
 <template>
-  <div
-      class="p-8 flex flex-col gap-2"
-  >
+  <div class="p-8 flex flex-col gap-2">
     <div
-        v-for="content in pageContent"
-        :key="content"
-        :class="getStyle(content)"
+      v-for="content in pageContent"
+      :key="content"
+      :class="getStyle(content)"
     >
-      <ul
-          v-if="content.match(/List(\.\d+)?$/)"
-          class="list-disc pl-5"
-      >
-        <li
-            v-for="(item, index) in t(
-							content,
-						).split('\n')"
-            :key="index"
-        >
+      <ul v-if="content.match(/List(\.\d+)?$/)" class="list-disc pl-5">
+        <li v-for="(item, index) in t(content).split('\n')" :key="index">
           {{ item }}
         </li>
       </ul>
 
-      <h2
-          v-else-if="
-						content.match(
-							/Subtitle(\.\d+)?$/,
-						)
-					"
-          class="text-large"
-      >
+      <h2 v-else-if="content.match(/Subtitle(\.\d+)?$/)" class="text-large">
         {{ t(content) }}
       </h2>
 
-      <h1
-          v-else-if="
-						content.match(/Title(\.\d+)?$/)
-					"
-          class="text-header"
-      >
+      <h1 v-else-if="content.match(/Title(\.\d+)?$/)" class="text-header">
         {{ t(content) }}
       </h1>
 
       <p v-else class="text-body">{{ t(content) }}</p>
     </div>
-    <CustomButton
-        :text="t('dataProtection.generic.deleteMyData')"
-        block
-        class="py-8"
-        color="error"
-        left-icon="trash-can"
-        @click="deleteData"
+    <SignOutButton>
+      <a href="/">
+        <CustomButton
+          :text="t('dataProtection.generic.deleteMyData')"
+          block
+          class="py-8"
+          color="error"
+          left-icon="trash-can"
+          @click="deleteData"
+        />
+      </a>
+    </SignOutButton>
+
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
+    />
+    <Toast
+      v-if="toastData.visible"
+      :duration="3000"
+      :message="toastData.message"
+      :type="toastData.type"
+      @close="toastData.visible = false"
+      @button-click="toastData.visible = false"
     />
   </div>
 </template>