diff --git a/changes/changelog.d/644.bugfix b/changes/changelog.d/644.bugfix
new file mode 100644
index 0000000000000000000000000000000000000000..79844014742b2370f210df89d8d4eab63f1fdf21
--- /dev/null
+++ b/changes/changelog.d/644.bugfix
@@ -0,0 +1 @@
+Initial UI render using correct language from browser (#644)
diff --git a/front/src/App.vue b/front/src/App.vue
index ed78005eb5b9b7a5a9c4d922686e8672940fdd4a..4d1a1be9f09dab2a792a72ebd8ba45e42b07c55e 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import axios from 'axios'
 import _ from '@/lodash'
 import {mapState} from 'vuex'
@@ -133,6 +134,8 @@ export default {
     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
       })
@@ -140,10 +143,20 @@ export default {
         return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
       })
       if (matching.length > 0) {
-        this.$language.current = matching[0]
+        candidate = matching[0]
       } else if (almostMatching.length > 0) {
-        this.$language.current = almostMatching[0]
+        candidate = almostMatching[0]
+      } else {
+        return
       }
+      import(`./translations/${candidate}.json`).then((response) =>{
+        Vue.$translations[candidate] = response.default[candidate]
+      }).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 = candidate
+      })
     },
     disconnect () {
       if (!this.bridge) {