diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 78d2eee..e46c5d5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -40,14 +40,14 @@
         "sass": "^1.81.1",
         "sass-loader": "^13.3.3",
         "terser": "^5.36.0",
-        "typescript": "^5.7.2",
+        "typescript": "5.6.3",
         "vite": "^5.4.11",
         "vite-plugin-vue-devtools": "^7.6.7",
         "vite-ssg": "^0.23.8",
         "vite-ssg-sitemap": "^0.7.1",
         "vitest": "^1.6.0",
         "vue-router": "^4.5.0",
-        "vue-tsc": "^2.1.10"
+        "vue-tsc": "^2.1.6"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -6921,9 +6921,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/frontend/package.json b/frontend/package.json
index 3e0c004..3d92dce 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,13 +45,13 @@
     "sass": "^1.81.1",
     "sass-loader": "^13.3.3",
     "terser": "^5.36.0",
-    "typescript": "^5.7.2",
+    "typescript": "5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-vue-devtools": "^7.6.7",
     "vite-ssg": "^0.23.8",
     "vite-ssg-sitemap": "^0.7.1",
     "vitest": "^1.6.0",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.6"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a49c1a2..7db3e16 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -117,7 +117,7 @@ if (!import.meta.env.SSR) window.addEventListener("resize", updateMobile);
     </transition>
   </RouterView>
   <!-- show CalendarPreview but only on specific router views -->
-  <CalendarPreview v-if="isDisabled($route.name)" />
+  <CalendarPreview v-if="isDisabled(route.name)" />
 
   <VueQueryDevtools />
   <Toast />
diff --git a/frontend/src/components/AdditionalModuleTable.vue b/frontend/src/components/AdditionalModuleTable.vue
index c33c84f..020b6d9 100644
--- a/frontend/src/components/AdditionalModuleTable.vue
+++ b/frontend/src/components/AdditionalModuleTable.vue
@@ -132,11 +132,11 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       :rows-per-page-options="[5, 10, 20, 50]"
       paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
       :current-page-report-template="
-        $t('additionalModules.paginator.from') +
+        t('additionalModules.paginator.from') +
         '{first}' +
-        $t('additionalModules.paginator.to') +
+        t('additionalModules.paginator.to') +
         '{last}' +
-        $t('additionalModules.paginator.of') +
+        t('additionalModules.paginator.of') +
         '{totalRecords}'
       "
       filter-display="row"
@@ -155,7 +155,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
 
       <Column
         field="course"
-        :header="$t('additionalModules.course')"
+        :header="t('additionalModules.course')"
         :show-clear-button="false"
         :show-filter-menu="false"
       >
@@ -173,7 +173,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       </Column>
       <Column
         field="name"
-        :header="$t('additionalModules.module')"
+        :header="t('additionalModules.module')"
         :show-clear-button="false"
         :show-filter-menu="false"
       >
@@ -194,7 +194,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         filter-field="eventType"
         :filter-menu-style="{ width: '10rem' }"
         style="min-width: 10rem"
-        :header="$t('additionalModules.eventType')"
+        :header="t('additionalModules.eventType')"
         :show-clear-button="false"
         :show-filter-menu="false"
       >
@@ -213,7 +213,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       </Column>
       <Column
         field="prof"
-        :header="$t('additionalModules.professor')"
+        :header="t('additionalModules.professor')"
         :show-clear-button="false"
         :show-filter-menu="false"
       >
@@ -221,7 +221,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
           <Skeleton></Skeleton>
         </template>
       </Column>
-      <Column :header="$t('additionalModules.info')">
+      <Column :header="t('additionalModules.info')">
         <template #body="slotProps">
           <div v-if="loadingData">
             <Skeleton></Skeleton>
@@ -232,7 +232,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
               severity="secondary"
               rounded
               outlined
-              :aria-label="$t('additionalModules.info-long')"
+              :aria-label="t('additionalModules.info-long')"
               class="small-button"
               @click.stop="showInfo(slotProps.data)"
             ></Button>
diff --git a/frontend/src/components/CalendarPreview.vue b/frontend/src/components/CalendarPreview.vue
index 5eb2721..2dfb712 100644
--- a/frontend/src/components/CalendarPreview.vue
+++ b/frontend/src/components/CalendarPreview.vue
@@ -52,7 +52,7 @@ const columns = computed(() => [
     :visible="dialogVisible && previewOn"
     :maximizable="!mobilePage"
     :draggable="false"
-    :header="$t('calendarPreview.preview-long')"
+    :header="t('calendarPreview.preview-long')"
     class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
     position="bottomleft"
     @update:visible="dialogVisible = $event"
@@ -85,7 +85,7 @@ const columns = computed(() => [
     <template #button>
       <Button
         icon="pi pi-calendar"
-        :label="$t('calendarPreview.preview')"
+        :label="t('calendarPreview.preview')"
         class="p-button-rounded p-button-primary"
         raised
         @click="dialogVisible = true"
diff --git a/frontend/src/components/LocaleSwitcher.vue b/frontend/src/components/LocaleSwitcher.vue
index caa03ae..1579b25 100644
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@@ -23,7 +23,7 @@ import { useI18n } from "vue-i18n";
 import { usePrimeVue } from "primevue/config";
 import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
 import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json";
-const { t } = useI18n({ useScope: "global" });
+const { t, locale, availableLocales } = useI18n({ useScope: "global" });
 
 const countries = computed(() => [
   { name: t("english"), code: "en", icon: "🇬🇧" },
@@ -54,8 +54,8 @@ updateLocale(localeStore().locale);
 </script>
 <template>
   <Dropdown
-    v-model="$i18n.locale"
-    :options="$i18n.availableLocales"
+    v-model="locale"
+    :options="availableLocales"
     option-label="name"
     placeholder="Select a Language"
     class="w-full md:w-14rem"
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 4464ac9..6e4649d 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -21,8 +21,11 @@ import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
 import DarkModeSwitcher from "./DarkModeSwitcher.vue";
+import { useRoute } from "vue-router";
 const { t } = useI18n({ useScope: "global" });
 
+const route = useRoute();
+
 const isDark = ref(true);
 
 const items = computed(() => [
@@ -96,7 +99,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
       >
         <a
           :class="
-            $route.path == item.route
+            route.path == item.route
               ? 'flex align-items-center active'
               : 'flex align-items-center'
           "
@@ -111,7 +114,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
       <a
         v-else-if="item.url"
         :class="
-          $route.path.includes(item.info)
+          route.path.includes(item.info)
             ? 'flex align-items-center active'
             : 'flex align-items-center'
         "
@@ -124,7 +127,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
       <span
         v-else
         :class="
-          $route.path.includes(item.info)
+          route.path.includes(item.info)
             ? 'flex align-items-center active'
             : 'flex align-items-center'
         "
diff --git a/frontend/src/components/ModuleInformation.vue b/frontend/src/components/ModuleInformation.vue
index e5af71d..90115c2 100644
--- a/frontend/src/components/ModuleInformation.vue
+++ b/frontend/src/components/ModuleInformation.vue
@@ -62,13 +62,13 @@ function formatWeekday(weekday: string) {
     <h2>{{ module.name }}</h2>
     <table class="w-full">
       <tr>
-        <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
+        <td>{{ t("moduleInformation.course") }}: {{ module.course }}</td>
       </tr>
       <tr>
-        <td>{{ $t("moduleInformation.person") }}: {{ module.prof }}</td>
+        <td>{{ t("moduleInformation.person") }}: {{ module.prof }}</td>
       </tr>
       <tr>
-        <td>{{ $t("moduleInformation.semester") }}: {{ module.semester }}</td>
+        <td>{{ t("moduleInformation.semester") }}: {{ module.semester }}</td>
       </tr>
       <tr>
         <td>
@@ -81,33 +81,33 @@ function formatWeekday(weekday: string) {
             >
               <Column
                 field="day"
-                :header="$t('moduleInformation.day')"
+                :header="t('moduleInformation.day')"
               ></Column>
-              <Column field="start" :header="$t('moduleInformation.start')">
+              <Column field="start" :header="t('moduleInformation.start')">
                 <template #body="slotProps">
                   {{ formatTimestamp(slotProps.data.start) }}
                 </template>
               </Column>
-              <Column field="end" :header="$t('moduleInformation.end')">
+              <Column field="end" :header="t('moduleInformation.end')">
                 <template #body="slotProps">
                   {{ formatTimestamp(slotProps.data.end) }}
                 </template>
               </Column>
               <Column
                 field="rooms"
-                :header="$t('moduleInformation.room')"
+                :header="t('moduleInformation.room')"
               ></Column>
               <Column
                 field="eventType"
-                :header="$t('moduleInformation.type')"
+                :header="t('moduleInformation.type')"
               ></Column>
               <Column
                 field="notes"
-                :header="$t('moduleInformation.notes')"
+                :header="t('moduleInformation.notes')"
               ></Column>
               <Column
                 field="week"
-                :header="$t('moduleInformation.week')"
+                :header="t('moduleInformation.week')"
               ></Column>
             </DataTable>
             <DataView
@@ -140,7 +140,7 @@ function formatWeekday(weekday: string) {
                           <div class="mr-2">{{ formatWeekday(item.day) }}</div>
                           <div class="mr-2">
                             {{
-                              $t("moduleInformation.nthWeek", {
+                              t("moduleInformation.nthWeek", {
                                 count: item.week,
                               })
                             }}
@@ -150,25 +150,25 @@ function formatWeekday(weekday: string) {
                           <table>
                             <tr>
                               <td class="mr-2">
-                                <b>{{ $t("moduleInformation.start") }}:</b>
+                                <b>{{ t("moduleInformation.start") }}:</b>
                               </td>
                               <td>{{ formatTimestamp(item.start) }}</td>
                             </tr>
                             <tr>
                               <td class="mr-2">
-                                <b>{{ $t("moduleInformation.end") }}:</b>
+                                <b>{{ t("moduleInformation.end") }}:</b>
                               </td>
                               <td>{{ formatTimestamp(item.end) }}</td>
                             </tr>
                             <tr>
                               <td class="mr-2">
-                                <b>{{ $t("moduleInformation.room") }}:</b>
+                                <b>{{ t("moduleInformation.room") }}:</b>
                               </td>
                               <td>{{ item.rooms }}</td>
                             </tr>
                             <tr>
                               <td class="mr-2">
-                                <b>{{ $t("moduleInformation.notes") }}:</b>
+                                <b>{{ t("moduleInformation.notes") }}:</b>
                               </td>
                               <td>{{ item.notes }}</td>
                             </tr>
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index 5629e9e..cb20b5b 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 const props = defineProps({
@@ -83,7 +85,7 @@ function toggleModule(module: Module) {
           class="flex justify-content-between align-items-center flex-wrap md:mx-4"
         >
           <h3>
-            {{ $t("moduleSelection.modules") }} -
+            {{ t("moduleSelection.modules") }} -
             {{ store.countModules() }}
           </h3>
           <div
@@ -92,8 +94,8 @@ function toggleModule(module: Module) {
             <p>
               {{
                 allSelected
-                  ? $t("moduleSelection.deselectAll")
-                  : $t("moduleSelection.selectAll")
+                  ? t("moduleSelection.deselectAll")
+                  : t("moduleSelection.selectAll")
               }}
             </p>
             <InputSwitch
@@ -107,7 +109,7 @@ function toggleModule(module: Module) {
       </template>
       <template #empty>
         <p class="p-4 text-2xl font-bold text-900 empty-message">
-          {{ $t("moduleSelection.noModulesAvailable") }}
+          {{ t("moduleSelection.noModulesAvailable") }}
         </p>
       </template>
       <template #list="slotProps">
@@ -126,8 +128,8 @@ function toggleModule(module: Module) {
                 :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
                 :label="
                   store.hasModule(item)
-                    ? $t('moduleSelection.selected')
-                    : $t('moduleSelection.unselected')
+                    ? t('moduleSelection.selected')
+                    : t('moduleSelection.unselected')
                 "
                 outlined
                 :severity="store.hasModule(item) ? '' : 'secondary'"
diff --git a/frontend/src/components/ModuleTemplateDialog.vue b/frontend/src/components/ModuleTemplateDialog.vue
index f3c83f7..1f6ff95 100644
--- a/frontend/src/components/ModuleTemplateDialog.vue
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@@ -66,7 +66,7 @@ const placeholders = computed(() => [
   <Dialog
     v-model:visible="helpVisible"
     class="w-full md:w-auto"
-    :header="$t('moduleTemplateDialog.moduleConfiguration')"
+    :header="t('moduleTemplateDialog.moduleConfiguration')"
   >
     <p>
       {{ t("moduleTemplateDialog.explanationOne") }}
@@ -75,15 +75,15 @@ const placeholders = computed(() => [
     <DataTable :value="placeholders">
       <Column
         field="placeholder"
-        :header="$t('moduleTemplateDialog.placeholder')"
+        :header="t('moduleTemplateDialog.placeholder')"
       ></Column>
       <Column
         field="description"
-        :header="$t('moduleTemplateDialog.description')"
+        :header="t('moduleTemplateDialog.description')"
       ></Column>
       <Column
         field="examples"
-        :header="$t('moduleTemplateDialog.examples')"
+        :header="t('moduleTemplateDialog.examples')"
       ></Column>
     </DataTable>
     <p>
diff --git a/frontend/src/view/CourseSelection.vue b/frontend/src/view/CourseSelection.vue
index 38ad399..a3cf1fe 100644
--- a/frontend/src/view/CourseSelection.vue
+++ b/frontend/src/view/CourseSelection.vue
@@ -96,11 +96,11 @@ getCourses();
 <template>
   <DynamicPage
     :hide-content="selectedCourse.name === ''"
-    :headline="$t('courseSelection.headline')"
-    :sub-title="$t('courseSelection.subTitle')"
+    :headline="t('courseSelection.headline')"
+    :sub-title="t('courseSelection.subTitle')"
     icon="pi pi-calendar"
     :button="{
-      label: $t('courseSelection.nextStep'),
+      label: t('courseSelection.nextStep'),
       icon: 'pi pi-arrow-right',
       disabled: store.isEmpty(),
       onClick: () => router.push('/additional-modules'),
@@ -113,8 +113,8 @@ getCourses();
         :class="flexSpecs"
         filter
         option-label="name"
-        :placeholder="$t('courseSelection.courseDropDown')"
-        :empty-message="$t('courseSelection.noCoursesAvailable')"
+        :placeholder="t('courseSelection.courseDropDown')"
+        :empty-message="t('courseSelection.noCoursesAvailable')"
         :auto-filter-focus="true"
         @change="getModules()"
       ></Dropdown>
@@ -123,7 +123,7 @@ getCourses();
         :options="semesters"
         :class="flexSpecs"
         option-label="name"
-        :placeholder="$t('courseSelection.semesterDropDown')"
+        :placeholder="t('courseSelection.semesterDropDown')"
         @change="getCourses()"
       ></Dropdown>
     </template>
diff --git a/frontend/src/view/FaqView.vue b/frontend/src/view/FaqView.vue
index db8067e..b96e611 100644
--- a/frontend/src/view/FaqView.vue
+++ b/frontend/src/view/FaqView.vue
@@ -17,99 +17,103 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
+
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
 </script>
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
     <div class="flex align-items-center justify-content-center m-2">
-      <h1>{{ $t("faqView.headline") }}</h1>
+      <h1>{{ t("faqView.headline") }}</h1>
     </div>
 
     <div class="flex flex-column lg:col-7">
       <div class="grid my-2">
         <div class="col">
-          {{ $t("faqView.firstQuestion") }}
+          {{ t("faqView.firstQuestion") }}
         </div>
         <div class="col">
-          {{ $t("faqView.firstAnswer") }}
+          {{ t("faqView.firstAnswer") }}
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.secondQuestion") }}</div>
+        <div class="col">{{ t("faqView.secondQuestion") }}</div>
         <div class="col">
-          {{ $t("faqView.secondAnswer") }}
+          {{ t("faqView.secondAnswer") }}
         </div>
       </div>
 
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.thirdQuestion") }}</div>
+        <div class="col">{{ t("faqView.thirdQuestion") }}</div>
         <div class="col">
           <Accordion>
-            <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
+            <AccordionTab :header="t('faqView.thirdAnswer.tabTitle')">
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.google.first") }}</li>
+                <li>{{ t("faqView.thirdAnswer.google.first") }}</li>
                 <li>
-                  {{ $t("faqView.thirdAnswer.google.second") }}
+                  {{ t("faqView.thirdAnswer.google.second") }}
                 </li>
                 <li>
-                  {{ $t("faqView.thirdAnswer.google.third") }}
+                  {{ t("faqView.thirdAnswer.google.third") }}
                 </li>
                 <li>
-                  {{ $t("faqView.thirdAnswer.google.fourth") }}
+                  {{ t("faqView.thirdAnswer.google.fourth") }}
                 </li>
               </ol>
             </AccordionTab>
             <AccordionTab header="HTWK App">
-              <p>{{ $t("faqView.thirdAnswer.htwk_app.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.htwk_app.description") }}</p>
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.htwk_app.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.htwk_app.five") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab
-              :header="$t('faqView.thirdAnswer.microsoft_outlook.title')"
+              :header="t('faqView.thirdAnswer.microsoft_outlook.title')"
             >
               <p>
                 {{
-                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
+                  t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
                 }}
               </p>
 
               <ol>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
                     )
                   }}
@@ -118,141 +122,141 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
               <p>
                 {{
-                  $t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
+                  t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
                 }}
               </p>
 
               <ol>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
                     )
                   }}
                 </li>
                 <li>
                   {{
-                    $t(
+                    t(
                       "faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
                     )
                   }}
                 </li>
               </ol>
             </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
+            <AccordionTab :header="t('faqView.thirdAnswer.apple_osx.title')">
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.first") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.second") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.third") }}</li>
+                <li>{{ t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
               </ol>
             </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
+            <AccordionTab :header="t('faqView.thirdAnswer.thunderbird.title')">
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.thunderbird.seven") }}</li>
               </ol>
             </AccordionTab>
-            <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
-              <p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p>
+            <AccordionTab :header="t('faqView.thirdAnswer.iphone.title')">
+              <p>{{ t("faqView.thirdAnswer.iphone.description") }}</p>
 
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.eight") }}</li>
+                <li>{{ t("faqView.thirdAnswer.iphone.nine") }}</li>
               </ol>
             </AccordionTab>
             <AccordionTab header="Android">
-              <p>{{ $t("faqView.thirdAnswer.android.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.android.description") }}</p>
             </AccordionTab>
             <AccordionTab header="Windows Phone">
-              <p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p>
+              <p>{{ t("faqView.thirdAnswer.windows_phone.description") }}</p>
               <ol>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li>
-                <li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.one") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.two") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.three") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.four") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.five") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.six") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.seven") }}</li>
+                <li>{{ t("faqView.thirdAnswer.windows_phone.eight") }}</li>
               </ol>
             </AccordionTab>
           </Accordion>
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.fourthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.fourthAnswer") }}</div>
+        <div class="col">{{ t("faqView.fourthQuestion") }}</div>
+        <div class="col">{{ t("faqView.fourthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.fifthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.fifthAnswer") }}</div>
+        <div class="col">{{ t("faqView.fifthQuestion") }}</div>
+        <div class="col">{{ t("faqView.fifthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.sixthAnswer") }}</div>
+        <div class="col my-2">{{ t("faqView.sixthQuestion") }}</div>
+        <div class="col">{{ t("faqView.sixthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.seventhQuestion") }}</div>
-        <div class="col">{{ $t("faqView.seventhAnswer") }}</div>
+        <div class="col">{{ t("faqView.seventhQuestion") }}</div>
+        <div class="col">{{ t("faqView.seventhAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.eighthQuestion") }}</div>
-        <div class="col">{{ $t("faqView.eighthAnswer") }}</div>
+        <div class="col">{{ t("faqView.eighthQuestion") }}</div>
+        <div class="col">{{ t("faqView.eighthAnswer") }}</div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.ninthQuestion") }}</div>
+        <div class="col">{{ t("faqView.ninthQuestion") }}</div>
         <div class="col">
-          {{ $t("faqView.ninthAnswer") }}
+          {{ t("faqView.ninthAnswer") }}
           <a href="https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender"
             >Gitlab</a
           >.
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">{{ $t("faqView.crossPromoQuestion") }}</div>
+        <div class="col">{{ t("faqView.crossPromoQuestion") }}</div>
         <div class="col">
-          {{ $t("faqView.crossPromo.teaser") }}
+          {{ t("faqView.crossPromo.teaser") }}
           <div class="flex flex-column gap-3 my-3">
             <Card
               v-for="promoPage in new Array('mensa', 'htwkarte')"
@@ -267,13 +271,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
                   />
                   <div class="flex flex-column gap-1">
                     <div>
-                      {{ $t("faqView.crossPromo." + promoPage + ".title") }}
+                      {{ t("faqView.crossPromo." + promoPage + ".title") }}
                     </div>
                     <div class="p-card-subtitle text-base">
                       <a
-                        :href="$t('faqView.crossPromo.' + promoPage + '.link')"
+                        :href="t('faqView.crossPromo.' + promoPage + '.link')"
                       >
-                        {{ $t("faqView.crossPromo." + promoPage + ".link") }}
+                        {{ t("faqView.crossPromo." + promoPage + ".link") }}
                       </a>
                     </div>
                   </div>
@@ -281,7 +285,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
               </template>
               <template #content>
                 <p class="m-0">
-                  {{ $t("faqView.crossPromo." + promoPage + ".description") }}
+                  {{ t("faqView.crossPromo." + promoPage + ".description") }}
                 </p>
               </template>
             </Card>
@@ -289,7 +293,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
         </div>
       </div>
       <p>
-        {{ $t("faqView.notFound") }}<br />
+        {{ t("faqView.notFound") }}<br />
         <a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
       </p>
     </div>
diff --git a/frontend/src/view/create/AdditionalModules.vue b/frontend/src/view/create/AdditionalModules.vue
index e103009..eb3a214 100644
--- a/frontend/src/view/create/AdditionalModules.vue
+++ b/frontend/src/view/create/AdditionalModules.vue
@@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import moduleStore from "@/store/moduleStore";
 import { router } from "@/main";
 import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 
@@ -36,7 +38,7 @@ async function nextStep() {
   <div class="flex flex-column align-items-center w-full mb-8">
     <div class="flex align-items-center justify-content-center">
       <h3>
-        {{ $t("additionalModules.subTitle") }}
+        {{ t("additionalModules.subTitle") }}
       </h3>
     </div>
     <div
@@ -46,7 +48,7 @@ async function nextStep() {
         :disabled="store.isEmpty()"
         class="col-12 md:col-4 align-self-end"
         icon="pi pi-arrow-right"
-        :label="$t('additionalModules.nextStep')"
+        :label="t('additionalModules.nextStep')"
         @click="nextStep()"
       />
     </div>
@@ -58,7 +60,7 @@ async function nextStep() {
         class="col-12 md:col-4 mb-3 align-self-end"
         severity="secondary"
         icon="pi pi-arrow-up"
-        :label="$t('additionalModules.scrollToTop')"
+        :label="t('additionalModules.scrollToTop')"
         @click="topFunction()"
       />
     </div>
diff --git a/frontend/src/view/create/RenameModules.vue b/frontend/src/view/create/RenameModules.vue
index 0c21dd5..a630912 100644
--- a/frontend/src/view/create/RenameModules.vue
+++ b/frontend/src/view/create/RenameModules.vue
@@ -83,7 +83,7 @@ async function finalStep() {
 <template>
   <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
@@ -100,7 +100,7 @@ async function finalStep() {
             <div
               class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
             >
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
               <InputSwitch
                 :model-value="
                   tableData.reduce(
@@ -181,7 +181,7 @@ async function finalStep() {
         :disabled="store.isEmpty() || requestIsPending"
         class="col-12 md:col-4 mb-3 align-self-end"
         :icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
-        :label="$t('renameModules.nextStep')"
+        :label="t('renameModules.nextStep')"
         @click="finalStep()"
       />
     </div>
diff --git a/frontend/src/view/edit/EditAdditionalModules.vue b/frontend/src/view/edit/EditAdditionalModules.vue
index 6febdfa..fa9f066 100644
--- a/frontend/src/view/edit/EditAdditionalModules.vue
+++ b/frontend/src/view/edit/EditAdditionalModules.vue
@@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { defineAsyncComponent } from "vue";
 import moduleStore from "@/store/moduleStore";
 import { router } from "@/main";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 const AdditionalModuleTable = defineAsyncComponent(
@@ -35,7 +37,7 @@ async function nextStep() {
   <div class="flex flex-column align-items-center w-full mb-7">
     <div class="flex align-items-center justify-content-center m-2">
       <h3>
-        {{ $t("additionalModules.subTitle") }}
+        {{ t("additionalModules.subTitle") }}
       </h3>
     </div>
     <AdditionalModuleTable />
@@ -46,7 +48,7 @@ async function nextStep() {
         :disabled="store.isEmpty()"
         class="col-12 md:col-4 mb-3 align-self-end"
         icon="pi pi-arrow-right"
-        :label="$t('additionalModules.nextStep')"
+        :label="t('additionalModules.nextStep')"
         @click="nextStep()"
       />
     </div>
diff --git a/frontend/src/view/edit/EditCalendar.vue b/frontend/src/view/edit/EditCalendar.vue
index 8154cd4..9e4c272 100644
--- a/frontend/src/view/edit/EditCalendar.vue
+++ b/frontend/src/view/edit/EditCalendar.vue
@@ -91,11 +91,11 @@ function loadCalendar(): void {
 <template>
   <DynamicPage
     hide-content
-    :headline="$t('editCalendarView.headline')"
-    :sub-title="$t('editCalendarView.subTitle')"
+    :headline="t('editCalendarView.headline')"
+    :sub-title="t('editCalendarView.subTitle')"
     icon="pi pi-pencil"
     :button="{
-      label: $t('editCalendarView.loadCalendar'),
+      label: t('editCalendarView.loadCalendar'),
       icon: 'pi pi-arrow-down',
       disabled: !isToken(token),
       onClick: loadCalendar,
diff --git a/frontend/src/view/edit/EditModules.vue b/frontend/src/view/edit/EditModules.vue
index 37f8c90..d9705c8 100644
--- a/frontend/src/view/edit/EditModules.vue
+++ b/frontend/src/view/edit/EditModules.vue
@@ -107,7 +107,7 @@ async function deleteFeed() {
 <template>
   <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
@@ -122,7 +122,7 @@ async function deleteFeed() {
         >
           <template #header>
             <div class="flex align-items-center justify-content-end">
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
               <InputSwitch
                 class="mx-4"
                 :model-value="
@@ -219,7 +219,7 @@ async function deleteFeed() {
                 severity="danger"
                 outlined
                 icon="pi pi-trash"
-                :label="$t('editCalendarView.delete')"
+                :label="t('editCalendarView.delete')"
                 @click="visible = true"
               />
               <Button
@@ -227,7 +227,7 @@ async function deleteFeed() {
                 severity="info"
                 outlined
                 icon="pi pi-plus"
-                :label="$t('editCalendarView.addModules')"
+                :label="t('editCalendarView.addModules')"
                 @click="router.push('edit-additional-modules')"
               />
               <Button
@@ -235,7 +235,7 @@ async function deleteFeed() {
                 severity="success"
                 outlined
                 icon="pi pi-save"
-                :label="$t('editCalendarView.save')"
+                :label="t('editCalendarView.save')"
                 @click="finalStep()"
               />
             </div>
@@ -257,14 +257,14 @@ async function deleteFeed() {
           class="inline-flex align-items-center justify-content-center gap-2"
         >
           <span class="font-bold white-space-nowrap">{{
-            $t("editCalendarView.dialog.headline")
+            t("editCalendarView.dialog.headline")
           }}</span>
         </div>
       </template>
-      <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
+      <p class="m-0">{{ t("editCalendarView.dialog.subTitle") }}</p>
       <template #footer>
         <Button
-          :label="$t('editCalendarView.dialog.delete')"
+          :label="t('editCalendarView.dialog.delete')"
           severity="danger"
           icon="pi pi-trash"
           autofocus
diff --git a/frontend/src/view/rooms/FreeRooms.vue b/frontend/src/view/rooms/FreeRooms.vue
index 787af7e..98ac171 100644
--- a/frontend/src/view/rooms/FreeRooms.vue
+++ b/frontend/src/view/rooms/FreeRooms.vue
@@ -19,11 +19,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 <template>
   <DynamicPage
     :hide-content="availableRooms.length === 0"
-    :headline="$t('freeRooms.freeRooms')"
-    :sub-title="$t('freeRooms.detail')"
+    :headline="t('freeRooms.freeRooms')"
+    :sub-title="t('freeRooms.detail')"
     icon="pi pi-search"
     :button="{
-      label: $t('freeRooms.search'),
+      label: t('freeRooms.search'),
       icon: 'pi pi-search',
       disabled: isLater,
       onClick: loadFreeRooms,
@@ -33,8 +33,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
       <Calendar
         v-model="date"
         :class="flexSpecs"
-        :placeholder="$t('freeRooms.pleaseSelectDate')"
-        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :placeholder="t('freeRooms.pleaseSelectDate')"
+        :empty-message="t('roomFinderPage.noRoomsAvailable')"
         date-format="dd.mm.yy"
         panel-class="min-w-min"
         touch-u-i
@@ -118,13 +118,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
         :rows="10"
         :global-filter-fields="['room']"
       >
-        <Column field="room" :sortable="true" :header="$t('freeRooms.room')">
+        <Column field="room" :sortable="true" :header="t('freeRooms.room')">
           <template #filter="{ filterModel, filterCallback }">
             <InputText
               v-model="filterModel.value"
               type="text"
               class="p-column-filter"
-              :placeholder="$t('freeRooms.searchByRoom')"
+              :placeholder="t('freeRooms.searchByRoom')"
               @input="filterCallback()"
             />
           </template>
@@ -136,7 +136,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
                 {{ slotProps.data.room }}
               </p>
               <Button
-                :label="$t('freeRooms.viewOccupancy')"
+                :label="t('freeRooms.viewOccupancy')"
                 icon="pi pi-hourglass"
                 class="p-button-rounded p-button-outlined sm:align-self-center align-self-end"
                 @click="occupationRoute(slotProps.data.room)"
@@ -158,6 +158,9 @@ import { padStart } from "@fullcalendar/core/internal";
 import { router } from "@/main";
 import { formatYearMonthDay } from "@/helpers/dates";
 
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
+
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
   room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" },
diff --git a/frontend/src/view/rooms/RoomFinder.vue b/frontend/src/view/rooms/RoomFinder.vue
index 7b824bf..8bb0a15 100644
--- a/frontend/src/view/rooms/RoomFinder.vue
+++ b/frontend/src/view/rooms/RoomFinder.vue
@@ -123,8 +123,8 @@ const button = computed(() => {
 <template>
   <DynamicPage
     :hide-content="selectedRoom.name === ''"
-    :headline="$t('roomFinderPage.headline')"
-    :sub-title="$t('roomFinderPage.detail')"
+    :headline="t('roomFinderPage.headline')"
+    :sub-title="t('roomFinderPage.detail')"
     icon="pi pi-search"
     :lower-button="button"
   >
@@ -135,8 +135,8 @@ const button = computed(() => {
         class="flex-1 m-0"
         filter
         option-label="name"
-        :placeholder="$t('roomFinderPage.dropDownSelect')"
-        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :placeholder="t('roomFinderPage.dropDownSelect')"
+        :empty-message="t('roomFinderPage.noRoomsAvailable')"
         :auto-filter-focus="true"
       />
     </template>
@@ -145,7 +145,7 @@ const button = computed(() => {
     </template>
       <Button
         class="col-12 md:col-4 mt-3"
-        :label="$t('roomFinderPage.reset')"
+        :label="t('roomFinderPage.reset')"
         @click="selectedRoom.name = ''"
       />
   </DynamicPage>