diff --git a/quiz-app/src/App.vue b/quiz-app/src/App.vue
index 4bbb1cc0..0e66a7a6 100644
--- a/quiz-app/src/App.vue
+++ b/quiz-app/src/App.vue
@@ -5,7 +5,6 @@
       <label for="locale">locale</label>
       <select v-model="locale">
         <option>en</option>
-        <option>fr</option>
         <option>id</option>
       </select>
     </nav>
@@ -29,13 +28,18 @@ export default {
     Quiz,
   },
   data() {
-    return { locale: "en" };
+    return {
+      locale: "en",
+    };
   },
   watch: {
     locale(val) {
       this.$root.$i18n.locale = val;
     },
   },
+  created() {
+    this.locale = this.$route.query.loc;
+  },
 };
 </script>
 
diff --git a/quiz-app/src/components/Quiz.vue b/quiz-app/src/components/Quiz.vue
index 08ac27cf..60dee99d 100644
--- a/quiz-app/src/components/Quiz.vue
+++ b/quiz-app/src/components/Quiz.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="card">
     <div v-for="q in questions" :key="q.id">
-      
       <div v-if="route == q.id">
-        <h2>{{q.title}}</h2>
-        <hr/>
+        <h2>{{ q.title }}</h2>
+        <hr />
         <h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
         <div v-else>
           <h3 v-if="error" class="error">{{ $t("error") }}</h3>
@@ -38,12 +37,13 @@ export default {
       complete: false,
       error: false,
       route: "",
+      locale: "",
     };
   },
   computed: {
     questions() {
       return this.$t("quizzes");
-    }
+    },
   },
 
   i18n: { messages },
@@ -65,6 +65,7 @@ export default {
   },
   created() {
     this.route = this.$route.params.id;
+    this.locale = this.$route.query.loc;
   },
 };
 </script>