diff --git a/frontend/src/elements/Tag.vue b/frontend/src/elements/Tag.vue
index a14b9662..780d2ab4 100644
--- a/frontend/src/elements/Tag.vue
+++ b/frontend/src/elements/Tag.vue
@@ -5,7 +5,7 @@
 		<slot>
 			<icon-tag class="shrink-0 w-4 h-4 stroke-1.5" />
 			<div v-if="tag" class="whitespace-nowrap">
-				{{ tag[locale] ? tag[locale] : tag.key }}
+				{{ tag[loc] ? tag[loc] : tag.key }}
 			</div>
 			<icon-x v-if="closable" class="cursor-pointer w-4 h-4 stroke-1.5"  @click="emit('close')" />
 		</slot>
@@ -20,6 +20,7 @@ import { IconTag, IconX } from '@tabler/icons-vue';
 
 // component constants
 const { locale } = useI18n({ useScope: 'global' });
+const loc = locale.value.substring(0, 2);
 
 // component properties
 const props = defineProps({
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 03c0efa8..5f8656fd 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -39,7 +39,7 @@ const messages = {
 	'en': en, // English
 };
 const loc = !('lang' in localStorage)
-	? navigator.language || navigator.userLanguage
+	? navigator.language.substring(0, 2) || navigator.userLanguage.substring(0, 2)
 	: localStorage.getItem('lang');
 const i18n = createI18n({
 	legacy: false,
@@ -73,7 +73,7 @@ marked.use({
 app.provide('marked', marked);
 
 // extend Object for filtering
-Object.filter = (obj, predicate) => 
+Object.filter = (obj, predicate) =>
 	Object.keys(obj)
 		.filter(key => predicate(obj[key]))
 		.reduce((res, key) => (res[key] = obj[key], res), {});
diff --git a/frontend/src/modals/InfoSongSyntax.vue b/frontend/src/modals/InfoSongSyntax.vue
index 729ad646..3c451ed2 100644
--- a/frontend/src/modals/InfoSongSyntax.vue
+++ b/frontend/src/modals/InfoSongSyntax.vue
@@ -20,10 +20,11 @@ import Modal from '@/elements/Modal.vue';
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // cheatsheet contents
 const cheatsheets = { de, en };
-const lang = ['de', 'en'].includes(locale.value) ? locale.value : 'en';
+const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
 // component properties
 const props = defineProps({
diff --git a/frontend/src/modals/SetlistSet.vue b/frontend/src/modals/SetlistSet.vue
index b2dcfe39..d3d746bb 100644
--- a/frontend/src/modals/SetlistSet.vue
+++ b/frontend/src/modals/SetlistSet.vue
@@ -47,7 +47,7 @@
 						class="lg:hidden"
 						pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
 					/>
-					<div class="text-blade-500">{{ humanDate(setlist.date, locale) }}</div>
+					<div class="text-blade-500">{{ humanDate(setlist.date, loc) }}</div>
 					<div v-if="error.date & !setlist.date" class="text-rose-600">
 						{{ t('error.requiredDate') }}
 					</div>
@@ -60,8 +60,8 @@
 						auto-apply
 						:dark="isDark"
 						:enable-time-picker="false"
-						:locale="locale"
-						:format-locale="calendarLanguage[locale]"
+						:locale="loc"
+						:format-locale="calendarLanguage[loc]"
 						@update:model-value="updateDate"
 					>
 						<template #arrow-left>
@@ -102,7 +102,7 @@
 							</template>
 							<div class="max-h-80 overflow-y-scroll flex flex-col gap-0.5 !p-2 text-sm">
 								<tag
-									v-for="tag in sortTags(tags, locale)" :key="tag.key"
+									v-for="tag in sortTags(tags, loc)" :key="tag.key"
 									:tag="tag"
 									@click="filter.tag = tag.key"
 									class="cursor-pointer"
@@ -304,6 +304,8 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
+
 const calendarLanguage = {
 	en: enGB,
 	de: de
@@ -455,7 +457,7 @@ const performedSongs = computed(() => {
 	setlists.forEach(setlist => {
 		setlist.songs.forEach(song => {
 			if (!(song.id in songs)) {
-				songs[song.id] = humanDate(setlist.date, locale.value, false);
+				songs[song.id] = humanDate(setlist.date, loc, false);
 			}
 		});
 	});
diff --git a/frontend/src/modals/TagAssign.vue b/frontend/src/modals/TagAssign.vue
index f9bbcc89..fdcf29f0 100644
--- a/frontend/src/modals/TagAssign.vue
+++ b/frontend/src/modals/TagAssign.vue
@@ -25,7 +25,7 @@
 							type="checkbox"
 							class="w-6 h-6 ml-2"
 						/>
-						{{ tag[locale] ? tag[locale] : tag.key }}
+						{{ tag[loc] ? tag[loc] : tag.key }}
 					</label>
 				</div>
 			</div>
@@ -39,7 +39,7 @@
 					<div class="text-lg text-center mb-2">{{ t('text.selection') }}</div>
 					<div v-for="tag in sortedSelectedTags" :key="tag" class="flex items-center gap-2">
 						<icon-tag class="w-4 h-4" />
-						{{ tags[tag][locale] ? tags[tag][locale] : tag }}
+						{{ tags[tag][loc] ? tags[tag][loc] : tag }}
 						<button
 							class="ml-auto"
 							@click="selectedTags = selectedTags.filter(k => k !== tag)"
@@ -79,6 +79,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // user input properties
 const selectedTags = ref([]);
@@ -109,7 +110,7 @@ const filteredTags = computed(() => {
 				const tag = props.tags[key];
 				let search = searchInput.value.toLowerCase();
 				// search in tag labels
-				let label = tag[locale.value] ? tag[locale.value] : key;
+				let label = tag[loc] ? tag[loc] : key;
 				if (label.toLowerCase().indexOf(search) !== -1) {
 					tags[key] = tag;
 				}
diff --git a/frontend/src/partials/Login.vue b/frontend/src/partials/Login.vue
index 3c5941aa..357bb2ca 100644
--- a/frontend/src/partials/Login.vue
+++ b/frontend/src/partials/Login.vue
@@ -11,6 +11,7 @@
 					v-model="email"
 					:class="{ '!border-rose-600': error.email }"
 					:placeholder="t('field.email')"
+					autocomplete="email"
 					required
 				/>
 				<input
diff --git a/frontend/src/partials/SongFooter.vue b/frontend/src/partials/SongFooter.vue
index 2b4403c5..b1f5a379 100644
--- a/frontend/src/partials/SongFooter.vue
+++ b/frontend/src/partials/SongFooter.vue
@@ -56,6 +56,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // component properties
 const props = defineProps({
@@ -66,6 +67,6 @@ const props = defineProps({
 // sort tag list
 const sortedTags = computed(() => {
 	const songTags = props.song.tags.map(t => props.tags[t]);
-	return sortTags(songTags, locale.value);
+	return sortTags(songTags, loc);
 });
 </script>
diff --git a/frontend/src/views/Documentation.vue b/frontend/src/views/Documentation.vue
index 1c981baf..5686ce2e 100644
--- a/frontend/src/views/Documentation.vue
+++ b/frontend/src/views/Documentation.vue
@@ -63,7 +63,7 @@
 				<div class="text-center">{{ t('text.foundABug') }}</div>
 				<div class="flex gap-4 justify-center items-center">
 					<a
-						:href="'https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.' + locale + '.md'"
+						:href="'https://github.com/devmount/SongDrive/blob/main/frontend/src/docs/docs.' + loc + '.md'"
 						target="_blank"
 					>
 						<secondary-button>
@@ -73,7 +73,7 @@
 						</secondary-button>
 					</a>
 					<a
-						:href="'https://github.com/devmount/SongDrive/edit/main/frontend/src/docs/docs.' + locale + '.md'"
+						:href="'https://github.com/devmount/SongDrive/edit/main/frontend/src/docs/docs.' + loc + '.md'"
 						target="_blank"
 					>
 						<secondary-button>
@@ -109,10 +109,11 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 
 // documentation contents
 const docs = { de, en };
-const lang = ['de', 'en'].includes(locale.value) ? locale.value : 'en';
+const lang = ['de', 'en'].includes(loc) ? loc : 'en';
 
 // convert spaces to dashes
 const dashCase = (text) => {
diff --git a/frontend/src/views/SetlistShow.vue b/frontend/src/views/SetlistShow.vue
index b0bdb079..559b4122 100644
--- a/frontend/src/views/SetlistShow.vue
+++ b/frontend/src/views/SetlistShow.vue
@@ -531,6 +531,7 @@ import {
 
 // component constants
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 const route = useRoute();
 const router = useRouter();
 const setlistKey = route.params.id;
@@ -995,7 +996,7 @@ const exportOsz = async () => {
 			// get song object
 			const song = props.songs[setlist.value.songs[key].id];
 			// check for translations
-			const lang = !('lang' in localStorage) ? locale.value : localStorage.getItem('lang');
+			const lang = !('lang' in localStorage) ? loc : localStorage.getItem('lang');
 			let tSong = null;
 			if (lang !== song.language && song.translations.length > 0) {
 				const tKey = song.translations.find((t) => t.endsWith(`-${lang}`));
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index b8e91596..320af556 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -481,6 +481,7 @@ import {
 
 // component constants
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' });
+const loc = locale.value.substring(0, 2);
 
 // global properties
 const fb = inject('firebaseApp');
@@ -695,11 +696,11 @@ const uiLanguages = computed(() => {
 	});
 	return uiLanguages;
 });
-const initLang = !('lang' in localStorage) ? locale.value : localStorage.getItem('lang');
+const initLang = !('lang' in localStorage) ? loc : localStorage.getItem('lang');
 const lang = ref(initLang);
 watch(lang, (newValue) => {
 	locale.value = newValue;
-	localStorage.setItem('lang', newValue);
+	localStorage.setItem('lang', newValue.substring(0, 2));
 });
 
 // handle theme mode
diff --git a/frontend/src/views/SongShow.vue b/frontend/src/views/SongShow.vue
index 2dd68303..d62e8786 100644
--- a/frontend/src/views/SongShow.vue
+++ b/frontend/src/views/SongShow.vue
@@ -294,7 +294,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { whenever } from '@vueuse/core';
 import Dropdown from '@/elements/Dropdown.vue';
-import pdfMake from "pdfmake/build/pdfmake";
+import pdfMake, { log } from "pdfmake/build/pdfmake";
 import PrimaryButton from '@/elements/PrimaryButton.vue';
 import SecondaryButton from '@/elements/SecondaryButton.vue';
 import SongContent from '@/partials/SongContent.vue';
@@ -327,6 +327,8 @@ import {
 
 // component constants
 const { t, availableLocales } = useI18n();
+console.log(availableLocales);
+
 const route      = useRoute();
 const router     = useRouter();
 const songId     = route.params.id;
diff --git a/frontend/src/views/Songs.vue b/frontend/src/views/Songs.vue
index a271ac91..08945287 100644
--- a/frontend/src/views/Songs.vue
+++ b/frontend/src/views/Songs.vue
@@ -52,7 +52,7 @@
 					<icon-chevron-right class="w-5 h-5 stroke-1.5" />
 				</secondary-button>
 			</div>
-		</div>	
+		</div>
 
 		<!-- empty songs collection -->
 		<div v-if="noSongs" class="text-blade-500">
@@ -124,7 +124,7 @@
 							<icon-filter class="absolute top-0 left-2 w-5 h-5 stroke-1.5 text-blade-500" />
 							<select v-model="filter.tag" class="w-full pl-8">
 								<option v-for="tag in tags" :key="tag.key" :value="tag.key">
-									{{ tag[locale] ? tag[locale] : tag.key }}
+									{{ tag[loc] ? tag[loc] : tag.key }}
 								</option>
 							</select>
 						</label>
@@ -290,6 +290,7 @@ import {
 
 // component constantes
 const { t, locale } = useI18n();
+const loc = locale.value.substring(0, 2);
 const route = useRoute();
 const router = useRouter();
 
@@ -340,7 +341,7 @@ const isFiltered = computed(() => {
 // pagination and sorting
 const page       = ref(0);
 const listLength = 16;
-const order = reactive({ 
+const order = reactive({
 	field: 'title',
 	ascending: true
 });