diff --git a/quiz-app/src/components/QuizComponent.vue b/quiz-app/src/components/QuizComponent.vue
index 89b7d02c0..1a11c367a 100644
--- a/quiz-app/src/components/QuizComponent.vue
+++ b/quiz-app/src/components/QuizComponent.vue
@@ -18,6 +18,7 @@
 
 </style>
 <template>
+  <div>
     <div class="card">
         Back to <router-link to="/">Quizzes</router-link>
     </div>
@@ -59,10 +60,15 @@
         </div>
       </div>
     </div>
+  </div>
   </template>
   
   <script>
 
+  function normalizeLocale(locale) {
+    return (locale || "").toLowerCase().replace("-", "_");
+  }
+
   function getFileByLocale(locale) {
     // loop keys in messages, if key is the start of locale, return that file
     let file = {
@@ -71,8 +77,9 @@
         quizzes: [],
         title: "Default Quiz",
     };
+    const normalizedLocale = normalizeLocale(locale);
     for (let key in messages) {
-      if (locale.startsWith(key)) {
+      if (normalizedLocale.startsWith(key)) {
         file = messages[key];
         break;
       }
@@ -94,8 +101,8 @@
         complete: false,
         error: false,
         route: "",
-        locale: "",
-        file: getFileByLocale(locale),
+        locale: this.$route.query.loc || locale,
+        file: getFileByLocale(this.$route.query.loc || locale),
       };
     },
     computed: {
@@ -105,7 +112,6 @@
     },
     created() {
       this.route = this.$route.params.id;
-      this.locale = this.$route.query.loc;
     },
     methods: {
       handleAnswerClick(isCorrect) {
@@ -125,4 +131,4 @@
     },
   };
   </script>
-  
\ No newline at end of file
+  
diff --git a/quiz-app/src/components/QuizzesComponent.vue b/quiz-app/src/components/QuizzesComponent.vue
index 6be72efdf..fe538617c 100644
--- a/quiz-app/src/components/QuizzesComponent.vue
+++ b/quiz-app/src/components/QuizzesComponent.vue
@@ -8,21 +8,29 @@
 
 </style>
 <template>
-    <div class="question" v-for="q in questions" :key="q.id" >
+  <div>
+    <div
+      class="question"
+      v-for="q in questions"
+      :key="q.id"
+    >
       <router-link
-        
-        :key="q.id"
         :to="`quiz/${q.id}`"
         class="link"
       >
         {{ q.title }}
       </router-link>
     </div>
+  </div>
   </template>
   
   <script>
   import messages from "@/assets/translations";
   
+  function normalizeLocale(locale) {
+    return (locale || "").toLowerCase().replace("-", "_");
+  }
+
   function getFileByLocale(locale) {
     // loop keys in messages, if key is the start of locale, return that file
     let file = {
@@ -31,8 +39,9 @@
         quizzes: [],
         title: "Default Quiz",
     };
+    const normalizedLocale = normalizeLocale(locale);
     for (let key in messages) {
-      if (locale.startsWith(key)) {
+      if (normalizedLocale.startsWith(key)) {
         file = messages[key];
         break;
       }
@@ -46,7 +55,7 @@
     name: "QuizzesComponent",
     data() {
       return {
-        file: getFileByLocale(locale),
+        file: getFileByLocale(this.$route.query.loc || locale),
       };
     },
     computed: {
@@ -56,4 +65,4 @@
     },
     i18n: { messages },
   };
-  </script>
\ No newline at end of file
+  </script>