diff --git a/.gitignore b/.gitignore
index b707d2832d91818e4bff459ddf482449fc3d3a32..90f64df6cd1f94503e7815faa6a7bbd33cc696f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ yarn-error.log*
 
 
 src/translations.json
-
+src/translations
diff --git a/scripts/i18n-compile.sh b/scripts/i18n-compile.sh
index 955913393f1551b003e111280505b40500d5ebf3..17d9653b29534e549cf5c6bcac31749cac8dbd89 100755
--- a/scripts/i18n-compile.sh
+++ b/scripts/i18n-compile.sh
@@ -1,3 +1,7 @@
 #!/bin/bash -eux
 locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
-find locales -name '*.po' | xargs $(yarn bin)/gettext-compile --output src/translations.json
+mkdir -p src/translations
+
+for locale in $locales; do
+    $(yarn bin)/gettext-compile locales/$locale/LC_MESSAGES/app.po --output src/translations/$locale.json
+done
diff --git a/src/App.vue b/src/App.vue
index 7a021f533ebac06a5c8d02d7a60a533f6d20af50..f9931aa659297cdda1b9a54c3a26ecbf75de0d0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,12 @@
         <label for="language" class="label">
           <translate translate-context="Label for language switcher">Language</translate>
         </label>
-        <select id="language" name="language" v-model="$language.current">
+        <select
+          id="language"
+          name="language"
+          :value="$language.current"
+          @change="switchLanguage($event.target.value)"
+        >
           <option
             v-for="(language, key) in $language.available"
             :key="key"
@@ -23,19 +28,60 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 require("typeface-noto-sans");
 require("typeface-montserrat");
+import locales from './locales'
 
 import Navigation from "./components/Navigation";
 export default {
   components: {
     Navigation
   },
+  created () {
+    this.autodetectLanguage()
+  },
   computed: {
     labels() {
       return {};
     }
+  },
+  methods: {
+    autodetectLanguage () {
+      let userLanguage = navigator.language || navigator.userLanguage
+      let available = locales.locales.map(e => { return e.code })
+      let self = this
+      let candidate
+      let matching = available.filter((a) => {
+        return userLanguage.replace('-', '_') === a
+      })
+      let almostMatching = available.filter((a) => {
+        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
+      })
+      if (matching.length > 0) {
+        candidate = matching[0]
+      } else if (almostMatching.length > 0) {
+        candidate = almostMatching[0]
+      } else {
+        return
+      }
+      this.switchLanguage(candidate)
+    },
+    switchLanguage (newValue) {
+      let self = this
+      import(`./translations/${newValue}.json`).then((response) =>{
+        Vue.$translations[newValue] = response.default[newValue]
+      }).finally(() => {
+        // set current language twice, otherwise we seem to have a cache somewhere
+        // and rendering does not happen
+        self.$language.current = 'noop'
+        self.$language.current = newValue
+      })
+
+    }
   }
+
 };
 </script>
 <style lang="scss">
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index ae0da9fc3f2bc4c92cab1379e1c43e72abce9b18..dc064c8479fb731a6217e29364aabe65a6314ba7 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -62,7 +62,6 @@
 <script>
 export default {
   data () {
-    console.log(this.$router)
     return {
       showMenu: false
     }