diff --git a/package-lock.json b/package-lock.json
index 1e99821..f6afb35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "dayjs": "^1.11.3",
         "vite-plugin-git-revision": "^0.1.9",
         "vue": "^3.2.37",
+        "vue-i18n": "^9.2.2",
         "vue-router": "^4.0.15"
       },
       "devDependencies": {
@@ -1744,6 +1745,63 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -2034,9 +2092,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
     },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "7.0.0",
@@ -5111,6 +5169,23 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.0.15",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz",
@@ -6670,6 +6745,48 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "requires": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "requires": {
+        "@intlify/shared": "9.2.2"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "requires": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      }
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -6909,9 +7026,9 @@
       }
     },
     "@vue/devtools-api": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
-      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
     },
     "@vue/eslint-config-prettier": {
       "version": "7.0.0",
@@ -9041,6 +9158,17 @@
         "semver": "^7.3.5"
       }
     },
+    "vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "requires": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      }
+    },
     "vue-router": {
       "version": "4.0.15",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz",
diff --git a/package.json b/package.json
index 6454582..e21ccd8 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "dayjs": "^1.11.3",
     "vite-plugin-git-revision": "^0.1.9",
     "vue": "^3.2.37",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.15"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index c4dce65..a35479e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,16 +12,16 @@ import { loading } from "./store";
   <div class="center">
     <main>
       <DateSelector
-        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
       />
       <LoadingElement
         :active="loading"
-        v-show="$route.name != 'Settings' && $route.name != 'Login'"
+        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
       />
       <RouterView />
     </main>
   </div>
-  <BottomNavbar v-show="$route.name != 'Login'" />
+  <BottomNavbar v-show="$route.name != 'title.login'" />
 </template>
 
 <style>
diff --git a/src/components/bottom-navbar.vue b/src/components/bottom-navbar.vue
index e75e7ca..ec2c439 100644
--- a/src/components/bottom-navbar.vue
+++ b/src/components/bottom-navbar.vue
@@ -10,19 +10,19 @@ import { RouterLink } from "vue-router";
     <div class="entry">
       <RouterLink to="/timetable">
         <CalendarIcon class="icon" />
-        <span class="title">Timetable</span>
+        <span class="title">{{ $t("title.timetable") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/substitutions">
         <BellIcon class="icon" />
-        <span class="title">Substitutions</span>
+        <span class="title">{{ $t("title.substitutions") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/history">
         <ClockIcon class="icon" />
-        <span class="title">History</span>
+        <span class="title">{{ $t("title.history") }}</span>
       </RouterLink>
     </div>
   </div>
diff --git a/src/components/date-selector.vue b/src/components/date-selector.vue
index 19f583d..8925d48 100644
--- a/src/components/date-selector.vue
+++ b/src/components/date-selector.vue
@@ -6,10 +6,19 @@ import {
   fetchHistory,
   loading,
 } from "../store";
-import { dayNames } from "../definitions";
 import dayjs from "dayjs";
 import ArrowIcon from "./icons/arrow-icon.vue";
 
+const dayNames = [
+  "days.sunday",
+  "days.monday",
+  "days.tuesday",
+  "days.wednesday",
+  "days.thursday",
+  "days.friday",
+  "days.saturday",
+];
+
 function nextDay() {
   var newDate = dayjs(selectedDate.value).add(1, "day");
   // Skip weekend
@@ -35,7 +44,7 @@ async function changeDate(newDate) {
   <div class="selector">
     <ArrowIcon @click="previousDay" />
     <span class="day" @click="changeDate(dayjs())">
-      {{ dayNames[selectedDay + 1] }},
+      {{ $t(dayNames[selectedDay + 1]) }},
       {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
     </span>
     <ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
diff --git a/src/components/initial-setup.vue b/src/components/initial-setup.vue
index 81d4ff7..dfc3587 100644
--- a/src/components/initial-setup.vue
+++ b/src/components/initial-setup.vue
@@ -2,18 +2,6 @@
 import CalendarIcon from "./icons/calendar-icon.vue";
 
 defineProps({
-  title: {
-    required: true,
-    type: String,
-  },
-  description: {
-    required: true,
-    type: String,
-  },
-  selectPrompt: {
-    required: true,
-    type: String,
-  },
   options: {
     required: true,
     type: Array,
@@ -28,12 +16,12 @@ defineProps({
   <div class="setup-wrapper">
     <div class="content">
       <CalendarIcon class="icon" />
-      <span class="title">{{ title }}</span>
-      <span class="description">{{ description }}</span>
+      <span class="title">{{ $t("timetable.setup.title") }}</span>
+      <span class="description">{{ $t("timetable.setup.description") }}</span>
       <select
         @input="(event) => $emit('update:modelValue', event.target.value)"
       >
-        <option value="none">{{ selectPrompt }}</option>
+        <option value="none">{{ $t("timetable.setup.prompt") }}</option>
         <option v-for="option in options" :value="option" :key="option">
           {{ option }}
         </option>
diff --git a/src/components/titlebar-element.vue b/src/components/titlebar-element.vue
index 0207178..f52feae 100644
--- a/src/components/titlebar-element.vue
+++ b/src/components/titlebar-element.vue
@@ -8,7 +8,7 @@ const route = useRoute();
 const router = useRouter();
 const routeName = computed(() => route.name);
 function goBack() {
-  if (routeName.value != "Settings") return;
+  if (routeName.value != "title.settings") return;
   if (lastRoute.value.name) router.go(-1);
   else router.push("/timetable");
 }
@@ -16,11 +16,11 @@ function goBack() {
 
 <template>
   <div class="titlebar">
-    <span class="title">{{ routeName }}</span>
+    <span class="title">{{ $t(routeName || "") }}</span>
     <div class="settings">
       <RouterLink
         to="/settings"
-        v-show="$route.name != 'Login'"
+        v-show="$route.name != 'title.login'"
         @click="goBack()"
       >
         <MenuIcon />
diff --git a/src/definitions.js b/src/definitions.js
deleted file mode 100644
index 1d0a563..0000000
--- a/src/definitions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const dayNames = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursay",
-  "Friday",
-  "Saturday",
-];
-export const substitutionTexts = {
-  subjectChange: "Unterrichtsänderung im Fach",
-  teacherChange: "Vertretung mit",
-  teacherChangePartial: "mit",
-  roomChange: "Raumvertretung in Raum",
-  roomChangePartial: "in Raum",
-  cancellation: "Ausfall",
-};
-export const uiTexts = {
-  substitutionNotes: "Notes",
-};
diff --git a/src/main.js b/src/main.js
index 98078c6..9dbaf23 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,20 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { registerSW } from "virtual:pwa-register";
+import { createI18n } from "vue-i18n";
+import { strings } from "./strings";
+import { language } from "./store";
+
+const i18n = createI18n({
+  locale: language.value,
+  fallbackLocale: "en",
+  messages: strings,
+});
 
 const app = createApp(App);
 
 app.use(router);
+app.use(i18n);
 
 app.mount("#app");
 
diff --git a/src/router/index.js b/src/router/index.js
index 555f74f..647b89d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,27 +15,27 @@ const router = createRouter({
     },
     {
       path: "/timetable",
-      name: "Timetable",
+      name: "title.timetable",
       component: TimetableView,
     },
     {
       path: "/substitutions",
-      name: "Substitutions",
+      name: "title.substitutions",
       component: SubstitutionView,
     },
     {
       path: "/history",
-      name: "History",
+      name: "title.history",
       component: HistoryView,
     },
     {
       path: "/settings",
-      name: "Settings",
+      name: "title.settings",
       component: SettingsView,
     },
     {
       path: "/login",
-      name: "Login",
+      name: "title.login",
       component: LoginView,
     },
   ],
diff --git a/src/store.js b/src/store.js
index 85621cf..24cb871 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,6 +9,7 @@ export const classFilter = ref(localStorage.getItem("classFilter") || "none");
 export const timetableGroups = ref(
   JSON.parse(localStorage.getItem("timetableGroups") || "[]")
 );
+export const language = ref(localStorage.getItem("lang")) || "en";
 
 watch(classFilter, (newValue) => {
   localStorage.setItem("classFilter", newValue);
@@ -18,6 +19,10 @@ watch(timetableGroups, (newValue) => {
   localStorage.setItem("timetableGroups", JSON.stringify(newValue));
   fetchData();
 });
+watch(language, (newValue) => {
+  localStorage.setItem("lang", newValue);
+  location.reload();
+});
 
 export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
 export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
diff --git a/src/strings.js b/src/strings.js
new file mode 100644
index 0000000..04491ac
--- /dev/null
+++ b/src/strings.js
@@ -0,0 +1,71 @@
+export const strings = {
+  en: {
+    title: {
+      timetable: "Timetable",
+      substitutions: "Substitutions",
+      history: "History",
+      settings: "Settings",
+      login: "Login",
+    },
+    settings: {
+      heading: {
+        filtering: "Filtering",
+        timetableGroups: "Timetable Groups",
+        language: "Language",
+        about: "About",
+      },
+      text: {
+        filtering:
+          "Select a class here so the correct timetable is used and only relevant substitutions are shown.",
+        timetableGroups:
+          "A timetable group defines, which lesson should be displayed, and which substitution should be shown if there are multiple possibilities for a single lesson within one class.",
+        language: "Change the language of all texts in the application",
+        about:
+          "This Tool queries and parses the latest timetable data every minute. The correctness of the data can in no way be guaranteed, so please check the data against the official plan if something seems wrong! Due to the format of the plan files, it it sometimes not easily possible to extract the correct data, so the plan displayed here may not be correct.",
+      },
+      other: "Other",
+      none: "None",
+      version: "Version",
+    },
+    timetable: {
+      warning: "Warning:",
+      trustWarning:
+        "The Data source of the Timetable data ({source}) is not trustworthy, which means the timetable may be incorrect!",
+      setup: {
+        title: "No class selected",
+        prompt: "Select a class",
+        description:
+          "Please select your class so you can view your timetable and only see substitutions that affect you. You can change this later in the settings.",
+      },
+      notes: "Notes:",
+    },
+    days: {
+      sunday: "Sunday",
+      monday: "Monday",
+      tuesday: "Tuesday",
+      wednesday: "Wednesday",
+      thursday: "Thursday",
+      friday: "Friday",
+      saturday: "Saturday",
+    },
+    substitution: {
+      text: {
+        withClass: {
+          subjectChange:
+            "Lesson changed for {class} in {subject} with {teacher} in room {room}",
+          teacherChange: "Lesson for {class} in {subject} now with {teacher}",
+          roomChange:
+            "Room for lesson {subject} for {class} with {teacher} is now {room}",
+          cancellation: "Lesson for {class} with {teacher} is cancelled",
+        },
+        withoutClass: {
+          subjectChange:
+            "Lesson changed in {subject} with {teacher} in room {room}",
+          teacherChange: "Lesson in {subject} now with {teacher}",
+          roomChange: "Room for lesson {subject} with {teacher} is now {room}",
+          cancellation: "Lesson with {teacher} is cancelled",
+        },
+      },
+    },
+  },
+};
diff --git a/src/util.js b/src/util.js
index 39f9105..6254519 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,35 +1,16 @@
-import { substitutionTexts } from "./definitions";
 import { classFilter } from "./store";
 
 export function getSubstitutionText(substitution) {
-  var text = "";
+  const includeClass = !classFilter.value || classFilter.value == "none";
+  const includeClassValue = includeClass ? "withClass" : "withoutClass";
 
-  if (!classFilter.value || classFilter.value == "none") {
-    text +=
-      substitution.class.join(", ") +
-      (substitution.class.length > 1 ? " haben " : " hat ");
-  }
+  // TODO: implement more texts
   if (substitution.type == "change") {
-    const change = substitution.change;
-    if (change.subject) {
-      text += substitutionTexts.subjectChange + " " + change.subject;
-    }
-    if (change.teacher && text == "") {
-      text += substitutionTexts.teacherChange + " " + change.teacher;
-    } else if (change.teacher) {
-      text += " " + substitutionTexts.teacherChangePartial;
-      text += " " + change.teacher;
-    }
-    if (change.room && text == "") {
-      text += substitutionTexts.roomChange + " " + change.room;
-    } else if (change.room) {
-      text += " " + substitutionTexts.roomChangePartial;
-      text += " " + change.room;
-    }
+    return `substitution.text.${includeClassValue}.subjectChange`;
   } else if (substitution.type == "cancellation") {
-    text += substitutionTexts.cancellation;
+    return `substitution.text.${includeClassValue}.cancellation`;
   }
-  return text;
+  return "";
 }
 
 export function getSubstitutionColor(substitution) {
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 3683263..8bd03d9 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { historyOfDate, selectedDate } from "../store";
-import { uiTexts } from "../definitions";
 import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
@@ -47,11 +46,16 @@ function getColor(type) {
               </p>
             </template>
           </span>
-          <span class="text" v-else>
-            {{ getSubstitutionText(event.change) }}
-            <span class="notes">
-              {{ event.change.notes ? uiTexts.substitutionNotes + ": " : "" }}
-              {{ event.change.notes }}
+          <span class="text" v-else
+            >{{
+              $t(getSubstitutionText(event.change), {
+                subject: event.change.subject,
+                class: event.change.class.join(", "),
+                teacher: event.change.change.teacher || event.change.teacher,
+                room: event.change.change.room,
+              })
+            }}<span class="notes" v-if="event.change.notes">
+              {{ $t("timetable.notes") }} {{ event.change.notes }}
             </span>
           </span>
           <span class="notes">
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 7ee293c..4305945 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -4,6 +4,7 @@ import {
   classFilter,
   possibleTimetableGroups,
   timetableGroups,
+  language,
 } from "../store";
 
 // eslint-disable-next-line no-undef
@@ -12,27 +13,20 @@ const gitHash = GITVERSION;
 
 <template>
   <div class="settings">
-    <h2>Filtering</h2>
-    <p>
-      Select a class here so the correct timetable is used and only relevant
-      substitutions are shown.
-    </p>
+    <h2>{{ $t("settings.heading.filtering") }}</h2>
+    <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
-      <option value="none">Select a class</option>
+      <option value="none">{{ $t("timetable.setup.prompt") }}</option>
       <option v-for="option in classList" :value="option" :key="option">
         {{ option }}
       </option>
-      <option value="other">Other</option>
+      <option value="other">{{ $t("settings.other") }}</option>
     </select>
     <div class="spacer"></div>
-    <h2>Timetable Groups</h2>
-    <p>
-      A timetable group defines, which lesson should be displayed, and which
-      substitution should be shown if there are multiple possibilities for a
-      single lesson within one class.
-    </p>
+    <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
+    <p>{{ $t("settings.text.timetableGroups") }}</p>
     <select v-model="timetableGroups" multiple>
-      <option value="none">None</option>
+      <option value="none">{{ $t("settings.none") }}</option>
       <option
         v-for="option in possibleTimetableGroups"
         :value="option"
@@ -42,16 +36,22 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
-    <h2>About</h2>
-    <p>
-      This Tool queries and parses the latest timetable data every minute. The
-      correctness of the data can in no way be guaranteed, so please check the
-      data against the official plan if something seems wrong! Due to the format
-      of the plan files, it it sometimes not easily possible to extract the
-      correct data, so the plan displayed here may not be correct.
-    </p>
+    <h2>{{ $t("settings.heading.language") }}</h2>
+    <p>{{ $t("settings.text.language") }}</p>
+    <select v-model="language">
+      <option
+        v-for="locale in $i18n.availableLocales"
+        :key="`locale-${locale}`"
+        :value="locale"
+      >
+        {{ locale }}
+      </option>
+    </select>
     <div class="spacer"></div>
-    <p class="gray">Version: {{ gitHash }}</p>
+    <h2>{{ $t("settings.heading.about") }}</h2>
+    <p>{{ $t("settings.text.about") }}</p>
+    <div class="spacer"></div>
+    <p class="gray">{{ $t("settings.version") }}: {{ gitHash }}</p>
   </div>
 </template>
 
diff --git a/src/views/SubstitutionView.vue b/src/views/SubstitutionView.vue
index eead3da..9c9ecd6 100644
--- a/src/views/SubstitutionView.vue
+++ b/src/views/SubstitutionView.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { substitutionsForDate, selectedDate } from "../store";
-import { uiTexts } from "../definitions";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
 
@@ -15,10 +14,16 @@ const substitutions = computed(() => {
       <div class="substitution" :style="getSubstitutionColor(substitution)">
         <span class="hour">{{ substitution.lesson }}</span>
         <div class="infos">
-          <span class="text">{{ getSubstitutionText(substitution) }}</span>
-          <span class="notes">
-            {{ substitution.notes ? uiTexts.substitutionNotes + ": " : "" }}
-            {{ substitution.notes }}
+          <span class="text">{{
+            $t(getSubstitutionText(substitution), {
+              subject: substitution.change.subject,
+              class: substitution.class.join(", "),
+              teacher: substitution.change.teacher || substitution.teacher,
+              room: substitution.change.room,
+            })
+          }}</span>
+          <span class="notes" v-if="substitution.notes">
+            {{ $t("timetable.notes") }} {{ substitution.notes }}
           </span>
         </div>
       </div>
diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index 9b85599..5de4e9a 100644
--- a/src/views/TimetableView.vue
+++ b/src/views/TimetableView.vue
@@ -53,18 +53,14 @@ function isCancelled(substitution) {
 <template>
   <TimetableSetup
     v-show="!classFilter || classFilter == 'none'"
-    title="No Class Selected"
-    description="Please select your class so you can view your timetable and only see substitutions that affect you. You can change this later in the settings."
-    selectPrompt="Select a class"
     :options="classList"
     v-model="classFilter"
   />
   <div class="timetable">
     <div class="container">
       <div class="trust-warning" v-if="!timetable.trusted">
-        <b>Warning:</b> The Data source of the Timetable data
-        <b>({{ timetable.source }})</b> is not trustworthy, which means the
-        timetable may be incorrect!
+        <b>{{ $t("timetable.warning") }}</b>
+        {{ $t("timetable.trustWarning", { source: timetable.source }) }}
       </div>
     </div>
     <template v-for="(lesson, index) in linkedTimetable" :key="index">
@@ -98,7 +94,7 @@ function isCancelled(substitution) {
             >
             <!-- Show notes if available -->
             <span class="info" v-if="getNotes(lesson.substitution)"
-              >, Notes: {{ getNotes(lesson.substitution) }}
+              >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
             </span>
           </div>
         </div>